A personal letter-writing web app where visitors can write and send letters through a beautiful paper-like interface. Letters are private and only readable by the owner.
In a world of instant messages and fleeting notifications, Lettrly brings back the art of thoughtful correspondence. Create your personal letter page, share your unique link, and receive heartfelt messages from friends, family, and admirers.
Whether it's words of gratitude, secret confessions, or simply a thoughtful note — every letter arrives sealed and waiting just for you.
For Recipients
- Personal Letter Page — Your own
lettrly.com/usernamelink to share - Private Inbox — Only you can read your letters
- Favorites & Organization — Mark special letters and keep them close
For Writers
- Beautiful Paper Interface — Write on a realistic, tactile paper surface
- Stay Anonymous — Choose whether to sign your name or remain mysterious
- No Rush — Take your time crafting the perfect message
The Experience
- Envelope Animations — Watch your letter fold and seal
- Elegant Design — Warm, paper-like aesthetics throughout
- Fully Responsive — Write from anywhere, on any device
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS 4 |
| Components | shadcn/ui |
| Animations | Framer Motion |
| Database & Auth | Supabase |
| Package Manager | pnpm |
# Clone the repository
git clone https://github.com/yourusername/lettrly.git
cd lettrly
# Install dependencies
pnpm installCopy the environment example and configure:
cp .env.example .env.local# Start Supabase (requires Docker)
pnpx supabase start
# Apply database migrations
pnpx supabase db pushAfter running supabase start, copy the output credentials to your .env.local:
NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-local-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-local-service-role-key
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_OWNER_USERNAME=leighpnpm devOpen http://localhost:3000 to see the app.
lettrly/
├── app/
│ ├── (auth)/ # Authentication pages
│ │ ├── login/
│ │ └── register/
│ ├── (public)/
│ │ └── [username]/ # Public letter-writing page
│ ├── dashboard/ # Private letter inbox
│ └── actions/ # Server actions
├── components/
│ ├── letter/ # Paper, envelope, animations
│ ├── dashboard/ # Inbox & letter views
│ ├── landing/ # Homepage components
│ ├── shared/ # Common components
│ └── ui/ # shadcn/ui primitives
├── lib/
│ ├── supabase/ # Database clients & types
│ ├── constants.ts # App configuration
│ └── utils.ts # Utilities
├── hooks/ # React hooks
├── supabase/
│ └── migrations/ # Database schema
└── public/ # Static assets
# Start development server
pnpm dev
# Type checking
pnpm build
# Linting
pnpm lint
# Generate Supabase types after schema changes
pnpx supabase gen types typescript --local > lib/supabase/types.tsLocal Services:
- App: http://localhost:3000
- Supabase Studio: http://127.0.0.1:54323
- Supabase API: http://127.0.0.1:54321
Lettrly embraces the warmth and intimacy of handwritten letters:
- Paper Textures — Subtle backgrounds that feel tactile and real
- Ink Colors — Deep, thoughtful tones inspired by fountain pens
- Wax Seal Accents — Rich burgundy touches that evoke tradition
- Gentle Animations — Envelope folds and seal stamps that delight
--paper-bg: #fdfbf7; /* Warm cream paper */
--ink-primary: #1a1a2e; /* Deep midnight ink */
--envelope-tan: #d4a574; /* Aged envelope */
--wax-seal: #8b0000; /* Dark burgundy seal */- Create a new project at supabase.com
- Link your local project:
pnpx supabase link --project-ref your-project-ref
- Push migrations:
pnpx supabase db push
Deploy with one click or connect your repository:
Add your production environment variables in the Vercel dashboard.
MIT
Made with care for meaningful connections.