MERN Stack Note Taking App 📝

A modern, full-stack note-taking application built with the MERN stack (MongoDB, Express.js, React, Node.js).
It provides a clean UI, responsive design, and complete CRUD functionality with rate limiting powered by Upstash Redis.

Tech Stack ⚙️

Features ✨

• Create, Read, Update, Delete (CRUD) notes with a clean UI.
• Rate limiting to prevent abuse, powered by Upstash Redis.
• Responsive design with TailwindCSS + DaisyUI themes.
• Toast notifications for user feedback.
• Reusable axios instance for API calls.
• MongoDB Atlas integration for cloud database storage.
• Professional error handling with clear UI states:
  • Loading spinner
  • Empty state (NotesNotFound)
  • Rate limit warning (RateLimitedUI)

Installation & Setup 🚀

Clone the repository and install dependencies:

git clone https://github.com/jdomingu19/mern-thinkboard.git
cd mern-thinkboard

Backend Setup ⚡

cd backend
npm install
npm install @upstash/ratelimit@2.0.5
npm install @upstash/redis@1.34.9
npm install cors
npm install dotenv

Start the backend server:

npm run dev

Frontend Setup 🎨

cd frontend
npm install
npm create vite@latest .
npm install react-router
npm install react-hot-toast
npm install axios
npm install lucide-react
npm install -D tailwindcss@3 postcss autoprefixer daisyui@v4
npx tailwindcss init -p

Start the frontend:

npm run dev

Project Structure 📂

mern-thinkboard/
├── backend/
│   ├── src/
│   │   ├── config/        # Database & Upstash setup
│   │   ├── controllers/   # Notes controllers
│   │   ├── middleware/    # Rate limiter
│   │   ├── models/        # Note model
│   │   ├── routes/        # Notes API routes
│   │   └── server.js      # Express server entry
├── frontend/
│   ├── src/
│   │   ├── components/    # NavBar, NoteCard, UI states
│   │   ├── lib/           # axios instance, utils
│   │   ├── pages/         # HomePage, CreatePage, NoteDetailsPage
│   │   ├── App.jsx        # Routes and layout
│   │   ├── main.jsx       # Entry point
│   │   └── index.css      # Tailwind base styles

Contributing 🤝

Contributions are welcome!

Open an issue or submit a pull request with improvements, bug fixes, or new features

License ⚖️

This project is distributed under the Apache License 2.0. You are free to use, modify, and share the code, provided that proper attribution is given and derivative works remain open to the community.

Built with '\u{2665}' (♥) by Jesús Domínguez @jdomingu19