📝 Note-Taking Application

Full-Stack · Mobile-First · OTP Auth · Google Login

A full-stack, mobile-first note-taking app with Email OTP and Google Login —
secure, responsive, and deployed.

🚀 Quick Start · 🏗️ Architecture · 🔐 Auth Flow · ⚙️ Configuration · 🚢 Deployment

---

✨ Features

Feature	Description
🔐 Email + OTP Auth	Sign up and log in with a one-time password sent to your email
🌐 Google OAuth	One-click sign-in with your Google account
🪪 JWT Authorization	Secure, stateless session management — all notes are user-scoped
📝 Create & Delete Notes	Full CRUD with live UI updates — no page refresh needed
📱 Mobile-First UI	Figma-designed, fully responsive with smooth transitions
🚀 Deployed	Frontend on Vercel · Backend on Render

---

🏗️ Architecture

graph TD
    A[👤 User - Browser / Mobile] --> B[⚡ React + Vite Frontend\nTypeScript]

    B -->|Email + OTP| C[🔐 Auth Flow\nOTP generation + verification]
    B -->|Google Sign-In| D[🌐 Google OAuth 2.0]

    C --> E[🔙 Node.js + Express Backend\nTypeScript]
    D --> E

    E --> F[🪪 JWT Issued\nStored client-side]
    F --> G[📝 Notes API\nCreate · Read · Delete]

    G --> H[🛢️ MongoDB Atlas\nUser + Notes collections]

    style A fill:#e1f5fe
    style E fill:#f3e5f5
    style H fill:#e8f5e9

Loading

Stack Overview

Layer	Technology
Frontend	React + TypeScript + Vite
Backend	Node.js + Express + TypeScript
Database	MongoDB Atlas
Authentication	Email OTP + Google OAuth 2.0
Authorization	JWT — stateless, user-scoped
Frontend Hosting	Vercel
Backend Hosting	Render

---

🔐 Auth Flow

graph TD
    A[👤 User] --> B{Auth Method}

    B -->|Email + OTP| C[Enter Email]
    C --> D[OTP sent to inbox]
    D --> E[User enters OTP]
    E --> F{OTP valid?}
    F -->|✅ Yes| G[JWT issued]
    F -->|❌ No| E

    B -->|Google Login| H[Google OAuth consent]
    H --> I[Google returns token]
    I --> G

    G --> J[Access Notes Dashboard]

    style A fill:#e1f5fe
    style G fill:#e8f5e9
    style J fill:#e8f5e9
    style F fill:#fff3e0

Loading

---

🚀 Quick Start

Backend

cd backend
npm install
cp .env.example .env      # Fill in your credentials
npm run dev               # Starts on :5000

Frontend

cd frontend
npm install
cp .env.example .env      # Set VITE_API_URL to your backend URL
npm run dev               # Starts on :5173

Visit http://localhost:5173

---

⚙️ Configuration

Backend .env

# ── Server ────────────────────────────────────────
PORT=5000

# ── MongoDB ───────────────────────────────────────
MONGODB_URI=mongodb+srv://<user>:<password>@cluster.mongodb.net/notes

# ── JWT ───────────────────────────────────────────
JWT_SECRET=your_jwt_secret
JWT_EXPIRES_IN=7d

# ── Email OTP ─────────────────────────────────────
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=your_email@gmail.com
SMTP_PASS=your_app_password
OTP_EXPIRES_IN=300          # seconds

# ── Google OAuth ──────────────────────────────────
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

Frontend .env

VITE_API_URL=http://localhost:5000      # or your Render backend URL
VITE_GOOGLE_CLIENT_ID=your_google_client_id

---

🚢 Deployment

Frontend → Vercel

# Set in Vercel dashboard → Environment Variables:
VITE_API_URL=https://your-backend.onrender.com
VITE_GOOGLE_CLIENT_ID=your_google_client_id

Backend → Render

Build Command:  npm install && npm run build
Start Command:  npm start

Environment Variables:
  MONGODB_URI:           your atlas connection string
  JWT_SECRET:            your secret
  GOOGLE_CLIENT_ID:      your client id
  GOOGLE_CLIENT_SECRET:  your client secret
  SMTP_USER:             your email
  SMTP_PASS:             your app password

⚠️ Add your Vercel frontend URL to the Allowed Origins in your backend CORS config and to the Authorized redirect URIs in your Google OAuth console.

---

📡 API Endpoints

Method	Endpoint	Auth	Description
POST	/auth/send-otp	❌	Send OTP to email
POST	/auth/verify-otp	❌	Verify OTP → returns JWT
POST	/auth/google	❌	Google OAuth → returns JWT
GET	/notes	✅ JWT	Fetch all notes for user
POST	/notes	✅ JWT	Create a new note
DELETE	/notes/:id	✅ JWT	Delete a note by ID

---

🗃️ Project Structure

note-taking-app/
│
├── 📁 frontend/
│   ├── src/
│   │   ├── components/       # Reusable UI components
│   │   ├── pages/            # Auth, Dashboard, Notes
│   │   ├── hooks/            # Custom React hooks
│   │   └── lib/api.ts        # Backend client
│   ├── .env.example
│   └── vite.config.ts
│
├── 📁 backend/
│   ├── src/
│   │   ├── routes/           # auth.ts, notes.ts
│   │   ├── controllers/      # authController, notesController
│   │   ├── models/           # User.ts, Note.ts (Mongoose)
│   │   ├── middleware/       # jwtAuth, errorHandler
│   │   └── utils/            # otpGenerator, emailSender
│   ├── .env.example
│   └── tsconfig.json
│
└── README.md

---

Built with ❤️ by Alen Thomas