mern-noteboard

A full-stack notes app built with the MERN stack (MongoDB, Express, React, Node.js) for keeping track of ideas.

Features

• Create, view, update, and delete notes
• Responsive and modern UI with React + Vite
• RESTful API built with Express and Mongoose
• Rate limiting with Upstash Redis
• Styled with Tailwind CSS and daisyUI
• Toast notifications for user feedback
• Error handling for rate limits and server issues

Project Structure

mern-noteboard/
├── backend/
│   ├── .env.example
│   ├── package.json
│   └── src/
├── frontend/
│   ├── package.json
│   ├── index.html
│   ├── tailwind.config.js
│   ├── postcss.config.js
│   └── src/
├── package.json         # Root package.json (deployment/build scripts)
├── README.md
└── .gitignore

Getting Started

Prerequisites

• Node.js (v18+ recommended)
• MongoDB database (local or cloud)
• Upstash Redis account for rate limiting

Backend Setup

1. Install dependencies:

   cd backend
   npm install

2. Configure environment variables:

   • Copy .env.example to .env and fill in your values:

     MONGO_URI=your_mongodb_connection_string
     PORT=your_backend_port
     UPSTASH_REDIS_REST_URL=your_upstash_redis_url
     UPSTASH_REDIS_REST_TOKEN=your_upstash_redis_token
     

     Note: The default backend port may have changed. Make sure to use the correct port in your .env and when accessing the API.

3. Start the backend server:

   npm run dev

   The API will be available at http://localhost:[YOUR_PORT]/api (replace [YOUR_PORT] with your configured port).

Frontend Setup

1. Install dependencies:

   cd frontend
   npm install

2. Start the frontend development server:

   npm run dev

   The app will be available at http://localhost:5173.

Root Deployment/Build

The root package.json provides scripts for installing dependencies and building the frontend for deployment.

• Build everything:

  npm run build

  This will:

  • Install dependencies in both backend and frontend
  • Build the frontend app for production

• Start the backend server (after build):

  npm start

  This runs the backend server using the built frontend.

API Endpoints

• GET /api/notes — List all notes
• GET /api/notes/:id — Get a single note
• POST /api/notes — Create a new note
• PUT /api/notes/:id — Update a note
• DELETE /api/notes/:id — Delete a note

Rate Limiting

The backend uses Upstash Redis to limit requests (default: 10 requests per 10 seconds per user). If the limit is exceeded, a 429 error is returned and the frontend displays a rate limit alert.

Development

• Linting:
  Run npm run lint in the frontend for code quality checks.
• Styling:
  Uses Tailwind CSS and daisyUI for rapid UI development.

License

MIT

---

Made with ❤️ using the MERN stack