A minimalist, retro-styled personal journal system built for focus and reflection.
Inner Margins is a personal journaling platform designed with a distinct "retro-computer" aesthetic, prioritizing distraction-free writing and reading. It serves as a digital sanctuary for thoughts, combining modern web technologies with nostalgia-inducing design elements like pixel fonts, scanlines, and terminal-inspired layouts.
The application features a robust writing interface, data visualization for writing habits, and a chronological archive of entries, all wrapped in a cohesive visual identity.
- Retro Aesthetic: Custom Tailwind configuration for a pixel-perfect, 8-bit inspired UI.
- Distraction-Free Writing: A clean, focused editor interface for new entries.
- Journal Archive: Filterable and searchable list of past entries.
- Data Analysis: Visual analytics for writing habits, including:
- Current & Longest Streaks (Timezone-aware for Asia/Kolkata)
- Weekly & Monthly Pattern Activity Charts
- Rich Comments System: Dedicated discussion and feedback capability beneath posts.
- Hidden Pin Lock: Obfuscated security gateway to keep private journals safe from prying eyes.
- PWA Push Notifications: Sarcastic background reminders tied to your custom schedule via external cron services (cron-job.org).
- Tagging System: Organize thoughts with a custom tagging implementation.
- Rich Text Support: Markdown-style formatting for expressive writing.
- Responsive Design: Fully optimized for desktop and mobile reading experiences.
A welcoming terminal-style interface that provides a quick status report of your writing activity.
A dedicated space for composing new entries. Features include cover image uploads, title management, and a rich text editor.
Browse through your history. Filter by tags or search for specific memories.
Gain insights into your writing patterns with detailed statistics and visualizations.
A personal introduction section styled to match the system's retro theme.
This project is built using the latest features of the React ecosystem, focusing on performance and type safety.
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS with custom configuration
- Database: PostgreSQL (via Prisma ORM)
- Data Fetching: React Server Components & Server Actions
- Charts: Custom SVG implementation & Recharts
- Deployment: Vercel
├── prisma/ # Database schema and migrations
├── public/ # Static assets & screenshots
├── src/
│ ├── actions/ # Server Actions for data mutation
│ ├── app/ # Next.js App Router pages
│ ├── components/ # Reusable UI components
│ ├── lib/ # Utility functions & types
│ └── styles/ # Global styles
└── tailwind.config.mjs # Custom design token configurationFollow these steps to set up the project locally.
- Node.js 18+
- npm or pnpm
- A PostgreSQL database URL
-
Clone the repository
git clone https://github.com/yourusername/inner-margins.git cd inner-margins -
Install dependencies
npm install # or pnpm install -
Configure Environment Variables Create a
.envfile in the root directory:DATABASE_URL="postgresql://user:password@localhost:5432/innermargins?schema=public" NEXT_PUBLIC_VAPID_PUBLIC_KEY="your-vapid-public-key" VAPID_PRIVATE_KEY="your-vapid-private-key" CRON_SECRET="your-custom-cron-secret"
-
Initialize Database Run the Prisma migrations to set up your database schema:
npx prisma migrate dev
-
Run Development Server
npm run dev
Open http://localhost:3000 with your browser to see the result.
The easiest way to deploy your Next.js app is to use the Vercel Platform.
- Push your code to a GitHub repository.
- Import the project into Vercel.
- Add your
DATABASE_URLto the Environment Variables settings in Vercel. - Deploy!
This project is licensed under the MIT License - see the LICENSE file for details.