Skip to content

chotika-patt/SweetEnvelope

Repository files navigation

💌 SweetEnvelope

Digital Letter & Anonymous Message Platform
Send heartfelt messages to the people you care about — anonymously and beautifully


📌 Overview

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.


✨ Features

  • 💌 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

🛠️ Tech Stack

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

🚀 Quick Start

1. Clone Repository

git clone https://github.com/chotika-patt/sweetenvelope.git
cd sweetenvelope

2. Set Up Firebase Project

  1. Go to console.firebase.google.com
  2. Create a new project (e.g. sweetenvelope)
  3. Enable Firestore Database → Start in test mode → Region asia-southeast1

3. Get Firebase Config Keys

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_idFIREBASE_ADMIN_PROJECT_ID
  • client_emailFIREBASE_ADMIN_CLIENT_EMAIL
  • private_keyFIREBASE_ADMIN_PRIVATE_KEY

4. Configure Environment Variables

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_KEY must be wrapped in "..." (double quotes) with newlines as \n

5. Run Locally

npm install
npm run dev   # http://localhost:3000

6. Deploy on Vercel

  1. Push code to GitHub (never push .env.local)
  2. Go to vercel.com → Import repository
  3. Settings → Environment Variables → add all keys from .env.local
  4. Deploy!

📁 Project Structure

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

👥 Managing Recipients

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 },
  // ...
];

🔒 Firestore Security Rules (Production)

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;
    }
  }
}

🔗 Links


📜 License

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

Back to top ↑

About

Digital Letter & Anonymous Message Platform — Send heartfelt messages to the people you care about, anonymously and beautifully

Topics

Resources

Stars

Watchers

Forks

Contributors