Skip to content

A lightweight, deployable MERN note-taking app (React + Vite frontend, Express + MongoDB backend) that provides fast CRUD for notes with built-in rate-limiting and a minimal UI.

Notifications You must be signed in to change notification settings

Sandanu06/SandNotes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SandNotes

alt text

Beautiful, minimal note-taking app built with the MERN stack (MongoDB, Express, React, Node). SandNotes is a simple, fast, and deployable app for creating, reading, updating and deleting notes. It includes basic rate-limiting, a clean React + Vite frontend, and a small Express backend with MongoDB.


✨ Features

  • Create, view, edit, and delete notes
  • Modern React frontend using Vite and Tailwind CSS
  • Express + Node backend with MongoDB for persistence
  • Rate limiting middleware to protect APIs from abuse
  • Simple, minimal UI components and utility helpers

🧭 Tech Stack

  • Frontend: React, Vite, Tailwind CSS, Axios
  • Backend: Node.js, Express
  • Database: MongoDB (Mongoose)
  • Dev tools: ESLint, PostCSS, Vite

📁 Repository Structure

Top-level layout:

  • backend/ - Express server, controllers, models, and middleware

    • src/server.js - App entry
    • src/routes/noteRoute.js - API routes
    • src/controllers/notesController.js - Notes CRUD logic
    • src/models/Note.js - Mongoose schema for notes
    • src/middleware/rateLimiter.js - Rate limiting middleware
    • src/config/db.js - MongoDB connection helper
    • src/config/upstash.js - (optional) Upstash rate-limit backing store
  • frontend/ - React app created with Vite

    • src/main.jsx - Frontend entry
    • src/App.jsx - Top-level app and routes
    • src/pages/ - Page components (Home, Create, NoteDetail)
    • src/components/ - Re-usable UI components
    • src/lib/axios.js - pre-configured Axios instance

⚙️ Quick Local Setup

Follow these steps to run the project locally (Windows; adapt commands for macOS/Linux):

# 1. Clone the repo
git clone https://github.com/Sandanu06/SandNotes.git
cd SandNotes
# 2. Backend setup
cd backend
npm install

# Create a .env file in backend/ and add the environment variables described below.

# Start the server (development)
npm run dev
# The backend listens on the port defined in process.env.PORT (default 5000).
# 3. Frontend setup (in a new terminal)
cd frontend
npm install
npm run dev
# The frontend runs with Vite (default http://localhost:5173).

🔐 Environment Variables

Create a .env in backend/ with the following keys (example names):

  • MONGO_URI - MongoDB connection string (required)
  • PORT - Port for the Express server (optional, default 5000)
  • RATE_LIMIT_WINDOW - Rate limit window size in minutes/seconds depending on implementation
  • RATE_LIMIT_MAX - Max number of requests per window
  • Any Upstash/Redis variables if using the upstash.js config

Keep .env out of version control. Add it to .gitignore if not already present.


🧩 API Endpoints (Backend)

Base URL: http://localhost:5000 (or your configured PORT)

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

Each endpoint responds with JSON. Errors use conventional HTTP status codes and return a message field with details.

Example create request body:

{ "title": "Shopping list", "content": "Milk, Eggs, Bread", "tags": ["personal", "shopping"] }


🧠 Data Model

Note (Mongoose schema) - core fields:

  • title: String
  • content: String
  • tags: [String]
  • createdAt: Date (auto)
  • updatedAt: Date (auto)

See backend/src/models/Note.js for exact schema.


🛡️ Rate Limiting

This project contains a rate limiting middleware (backend/src/middleware/rateLimiter.js). It prevents excessive requests from a single IP and can be backed by Upstash or Redis. Configure limits using environment variables.


🧪 Tests

No automated tests are included yet. Recommended next steps:

  • Add unit tests for controller logic (e.g., Jest + Supertest)
  • Add integration tests for API endpoints
  • Add E2E tests for the frontend (Cypress or Playwright)

🌐 Deployment

General steps:

  1. Build frontend: from frontend/ run npm run build (Vite).
  2. Serve static build with any static hosting (Netlify, Vercel, GitHub Pages) or serve from the backend with Express static middleware.
  3. Deploy backend to Heroku, Render, Railway, or any cloud provider. Ensure MONGO_URI and rate-limit environment variables are set.

If you want a single combined deployment, copy the frontend build into backend/public and serve with Express.


🤝 Contributing

Contributions are welcome. Suggested workflow:

  1. Fork the repo
  2. Create a feature branch: git checkout -b feat/your-feature
  3. Make changes & commit
  4. Push and open a Pull Request describing your change

Please keep changes small and focused. Add tests for new behavior when possible.


📄 License

This project is open-sourced under the MIT License. Add a LICENSE file to the repo with the MIT text if you want to publish.


📌 Notes & Next Improvements

  • Add authentication (JWT + refresh tokens) for private notes
  • Pagination for notes list
  • Attachments (images) support
  • Improved UX for rate-limited responses (client-side messaging)

If you'd like, I can also open a PR with these README changes or add a CONTRIBUTING.md and LICENSE file.


Thanks for building SandNotes — a focused, minimal notes app. Happy hacking! ✨

About

A lightweight, deployable MERN note-taking app (React + Vite frontend, Express + MongoDB backend) that provides fast CRUD for notes with built-in rate-limiting and a minimal UI.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published