NoteZipper is a secure, full-stack notes management application built with the MERN stack (MongoDB, Express, React, Node.js). It features a robust authentication system, real-time UI updates, and a production-ready architecture designed for scalability.
View Live Application
(Note: The backend is hosted on a free tier, so the initial request may take 30-60 seconds to spin up.)
- Secure Authentication: Full JWT-based auth system with HTTP-only cookie support (ready) and local storage failover.
- Protected Routes: Custom middleware ensures user data privacy—users can only access their own notes.
- Real-time Interface: Instant feedback on CRUD operations using Optimistic UI principles.
- Search & Filter: Real-time filtering of notes by title and content.
- Responsive Design: Fully responsive UI built with Tailwind CSS.
- Clean Architecture: Separation of concerns (Controllers, Routes, Models, Services) for maintainability.
- React.js (Vite): Component-based UI library.
- Tailwind CSS: Utility-first CSS framework for rapid styling.
- Context API: Global state management for Authentication.
- Axios: HTTP client with interceptors for automatic token injection.
- React Router 6: Client-side routing with protected route wrappers.
- Node.js & Express.js: RESTful API server.
- MongoDB & Mongoose: NoSQL database with strict schema validation.
- JWT (JSON Web Tokens): Stateless authentication mechanism.
- Bcrypt.js: Industry-standard password hashing.
- Express-Validator: Middleware for server-side input sanitization.
| Login Page | Register |
|---|---|
 |
 |
| Home Screen | Dashboard |
 |
 |
| Create Note | Update Note |
 |
 |
The project follows a MVC (Model-View-Controller) pattern adapted for modern full-stack development.
NoteZipper/
├── backend/
│ ├── config/ # Database connection logic
│ ├── controllers/ # Request logic & business rules
│ ├── middleware/ # Auth checks & error handling
│ ├── models/ # Mongoose schemas (User, Note)
│ ├── routes/ # API endpoints definition
│ └── server.js # App entry point
└── frontend/
├── src/
│ ├── components/ # Reusable UI components
│ ├── context/ # Global Auth State
│ ├── lib/ # Axios configuration
│ ├── pages/ # View pages (Login, Home)
│ └── App.jsx # Main routing logic
Follow these steps to run the project locally.
- Node.js (v14+)
- MongoDB (Local instance or MongoDB Atlas URL)
- Git
git clone https://github.com/Harshitpant12/NoteZipper.git
cd NoteZipperNavigate to the backend folder and install dependencies:
cd backend
npm installCreate a .env file in the backend/ root folder with the following variables:
PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_super_secret_random_key
NODE_ENV=developmentStart the backend server:
npm run devThe server should run on http://localhost:5000
Open a new terminal window, navigate to the frontend folder, and install dependencies:
cd frontend
npm installStart the React development server:
npm run devThe app should now be live on http://localhost:5173
| Method | Endpoint | Description | Protected? |
|---|---|---|---|
| POST | /api/auth/register |
Register a new user | ❌ |
| POST | /api/auth/login |
Authenticate user & get token | ❌ |
| GET | /api/notes |
Get all notes for the logged-in user | ✅ |
| POST | /api/notes |
Create a new note | ✅ |
| PUT | /api/notes/:id |
Update a specific note | ✅ |
| DELETE | /api/notes/:id |
Delete a specific note | ✅ |
Contributions are welcome!
- Fork the project.
- Create your Feature Branch (
git checkout -b feature/AmazingFeature). - Commit your changes (
git commit -m 'Add some AmazingFeature'). - Push to the Branch (
git push origin feature/AmazingFeature). - Open a Pull Request.
Distributed under the MIT License. See LICENSE for more information.