Digital Letter & Anonymous Message Platform
Send heartfelt messages to the people you care about — anonymously and beautifully
SweetEnvelope is a digital letter platform where users can log in and send anonymous messages to people they care about. Built with Next.js and powered by Firebase Firestore as the backend, it is deployed on Vercel for a seamless, serverless experience.
- 💌 Send Letters — Write and send anonymous messages to specific recipients
- 🔐 Simple Login — Username and password authentication per recipient account
- 📬 Recipient Management — Configure up to 44 recipients with custom names, emojis, and tags
- 🔒 Secure Storage — Messages stored in Firestore via Admin SDK, bypassing client-side rules
- 🚀 Serverless Deployment — Deployed on Vercel with zero-config CI/CD
| Layer | Technology | Purpose |
|---|---|---|
| Frontend | Next.js + TypeScript | SSR web application |
| Styling | Tailwind CSS | Utility-first CSS framework |
| Database | Firebase Firestore | Letter storage |
| Auth (client) | Firebase Client SDK | Frontend config & initialization |
| Auth (server) | Firebase Admin SDK | Secure API routes |
| Deployment | Vercel | Hosting & serverless functions |
git clone https://github.com/chotika-patt/sweetenvelope.git
cd sweetenvelope- Go to console.firebase.google.com
- Create a new project (e.g.
sweetenvelope) - Enable Firestore Database → Start in test mode → Region
asia-southeast1
Client SDK — Project settings → General → Your apps → Web app → copy firebaseConfig
Admin SDK — Project settings → Service accounts → Generate new private key → download JSON, then copy:
project_id→FIREBASE_ADMIN_PROJECT_IDclient_email→FIREBASE_ADMIN_CLIENT_EMAILprivate_key→FIREBASE_ADMIN_PRIVATE_KEY
cp .env.example .env.local.env.local
NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSy...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=sweetenvelope.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=sweetenvelope
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=sweetenvelope.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=1234567890
NEXT_PUBLIC_FIREBASE_APP_ID=1:123...:web:abc...
FIREBASE_ADMIN_PROJECT_ID=sweetenvelope
FIREBASE_ADMIN_CLIENT_EMAIL=firebase-adminsdk-xxxx@sweetenvelope.iam.gserviceaccount.com
FIREBASE_ADMIN_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nMIIEvAIB...\n-----END PRIVATE KEY-----\n"
⚠️ FIREBASE_ADMIN_PRIVATE_KEYmust be wrapped in"..."(double quotes) with newlines as\n
npm install
npm run dev # http://localhost:3000- Push code to GitHub (never push
.env.local) - Go to vercel.com → Import repository
- Settings → Environment Variables → add all keys from
.env.local - Deploy!
sweetenvelope/
├── app/ # Next.js App Router (pages & API routes)
├── components/ # Reusable UI components
├── lib/
│ └── data.ts # Recipients and account configuration
├── public/ # Static assets
├── types/ # TypeScript type definitions
└── .env.example # Environment variable template
Edit lib/data.ts to configure recipients and accounts:
export const PEOPLE = [
{ id: 1, name: 'Name', emoji: '🌸', tag: '🏷️ tag' },
// ... up to 44 recipients
];
export const ACCOUNTS = [
{ username: 'user01', password: 'pass01', personId: 1 },
// ...
];Since all writes go through API Routes using the Admin SDK (which bypasses rules), set Firestore rules to deny all direct client access:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /letters/{letterId} {
allow read, write: if false;
}
}
}
- Live App: sweetenvelope.vercel.app
- GitHub: chotika-patt/sweetenvelope
This project is licensed under the MIT License — free to use, modify, and distribute.
Built with ❤️ for the people you want to reach
Because some things are easier to write than to say