Capsule

A future-you mailbox — write letters to your future self, sealed until the moment you choose.

✨ Features

• Time-locked letters — Write letters that unlock on a specific date and time
• Secure authentication — JWT-based auth with encrypted passwords
• Beautiful, polished UI — Clean design with dark/light theme support
• Full letter management — Create, read, edit (while locked), and delete letters
• Real-time countdowns — See how long until each letter unlocks
• Search & filtering — Find letters by title, filter by locked/unlocked status
• Mobile responsive — Works beautifully on all screen sizes

🏗️ Tech Stack

Frontend

• React 19 + Vite
• Tailwind CSS v4
• Radix UI primitives
• Lucide icons
• React Router v6

Backend

• Node.js + Express 5
• MongoDB + Mongoose
• JWT authentication
• Zod validation

🚀 Quick Start

Prerequisites

• Node.js 18+
• MongoDB (local or Atlas)

1. Clone the repository

git clone https://github.com/yourusername/capsule.git
cd capsule

2. Setup the server

cd server
npm install

Create a .env file in the server directory:

MONGO_URI=mongodb://localhost:27017/capsule
JWT_SECRET=your-super-secret-jwt-key-change-in-production
PORT=4000
CLIENT_ORIGIN=http://localhost:5173

3. Setup the client

cd ../client
npm install

Optionally create a .env file in the client directory:

VITE_API_URL=http://localhost:4000

4. Run both servers

Terminal 1 — Server:

cd server
npm run dev

Terminal 2 — Client:

cd client
npm run dev

5. Open the app

Visit http://localhost:5173

📁 Project Structure

capsule/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/     # UI components
│   │   │   ├── layout/     # Layout components
│   │   │   └── ui/         # Reusable UI primitives
│   │   ├── contexts/       # React contexts (auth, theme)
│   │   ├── hooks/          # Custom hooks (toast)
│   │   ├── lib/            # Utilities & API client
│   │   └── pages/          # Page components
│   └── index.html
│
├── server/                 # Express backend
│   └── src/
│       ├── config/         # Database config
│       ├── middleware/     # Auth middleware
│       ├── models/         # Mongoose models
│       └── routes/         # API routes
│
└── README.md

🔌 API Endpoints

Auth

Method	Endpoint	Description
POST	/auth/register	Create a new account
POST	/auth/login	Login and get token
GET	/auth/me	Get current user (auth required)

Letters

Method	Endpoint	Description
POST	/letters	Create a new letter
GET	/letters	List all your letters
GET	/letters/:id	Read a letter (403 if locked)
GET	/letters/:id?edit=true	Get locked letter for editing
PATCH	/letters/:id	Update a letter (only if locked)
DELETE	/letters/:id	Delete a letter

🎨 Design Philosophy

Capsule is designed with intention:

• Warm, sophisticated palette — Earthy tones that feel timeless
• Serif typography for letters — Playfair Display adds a personal, handwritten feel
• Minimal UI — Focus on the content, not the chrome
• Smooth micro-interactions — Subtle animations that delight
• Excellent empty states — Guide users to write their first letter

📝 License

MIT

---

Made with care for your future self.