MERN Notes App

A full-stack notes app inspired by Google Keep — built with MongoDB Atlas, Express, React (Vite), and Node.

✨ Features

• 📝 Create, edit, delete, and pin notes — pinned notes get their own section, Keep-style
• ⚡ Quick capture: a "Take a note..." bar that expands inline, just like Google Keep
• 🧱 Masonry grid layout with hover actions
• 🔍 Live search across titles and content (powered by React's useDeferredValue)
• 🎨 Three themes — light, dark, and a glowing neon mode — persisted, OS-aware, no flash on load
• 🎬 Smooth animations with Framer Motion: staggered card entrances, zoom on hover, spring theme switcher, respects prefers-reduced-motion
• 🚦 API rate limiting, loading skeletons, toasts, and empty states

🌗 Themes

Light	Neon

🛠 Tech stack

• Frontend: React 19, Vite, React Router, Framer Motion, Axios, react-hot-toast, lucide-react
• Backend: Node, Express, Mongoose, MongoDB Atlas
• Styling: hand-rolled CSS with custom properties (no framework), Josefin Sans typography

🚀 Running locally

1. Backend (port 5001):

cd backend
npm install
cp .env.example .env   # then fill in your Atlas connection string
npm run dev

2. Frontend (port 5173, proxies /api to the backend):

cd frontend
npm install
npm run dev

Open http://localhost:5173.

⚙️ Configuration

backend/.env:

MONGO_URI=<your Atlas connection string>
PORT=5001

.env is gitignored — never commit your database password.

📦 Production build

cd frontend && npm run build
cd ../backend
NODE_ENV=production npm start

Express serves the built frontend from frontend/dist on port 5001.

📝 Notes

• Theme via URL: append ?theme=light|dark|neon to force a theme (handy for screenshots).
• SRV DNS issues: if your router/ISP blocks Node's SRV lookups (querySrv ECONNREFUSED), the backend automatically retries with public DNS resolvers (8.8.8.8 / 1.1.1.1) — see backend/src/config/db.js.