📝 Notes App – MERN Stack

Deployed link :https://notes-app-03.netlify.app/

A modern Note-Taking Application built with the MERN stack (MongoDB, Express, React, Node.js) featuring JWT authentication, image upload, rich text editing, and tag/category filtering.

---

🚀 Features

• ✅ JWT-Based Secure Authentication (Login/Register)
• ✅ Create, Edit, Delete Notes
• ✅ Rich Text Editor (Tiptap)
• ✅ Add Tags / Categories to Notes
• ✅ Upload Image Attachments (Cloudinary)
• ✅ Filter Notes by Tags & Search Keywords
• ✅ Real-time Search by Title or Content
• ✅ Pagination (6 Notes per Page)
• ✅ Responsive & Dark Mode Support
• ✅ Toast Notifications (react-hot-toast)
• ✅ Protected Routes for Authenticated Users Only
• ✅ Clean Codebase & Folder Structure

---

📁 Folder Structure

notes-app/ ├── client/ # React Frontend │ ├── components/ # Reusable UI components (NoteCard, Navbar, SearchBar, etc.) │ ├── pages/ # Page components (Login, Register, Dashboard, etc.) │ ├── App.jsx # Routing setup │ └── main.jsx # React entry point │ ├── server/ # Node.js Backend │ ├── config/ # DB & Cloudinary config │ ├── controllers/# Logic for auth & notes │ ├── middleware/ # JWT auth, error handlers │ ├── models/ # Mongoose schemas (User, Note) │ ├── routes/ # API routes │ └── server.js # Main Express server

yaml Copy Edit

---

🛠️ Tech Stack

🔹 Frontend

• React
• React Router DOM
• Tailwind CSS
• Tiptap (Text Editor)
• React Hot Toast
• React Icons
• Axios

🔹 Backend

• Node.js
• Express.js
• MongoDB & Mongoose
• JSON Web Token (JWT)
• bcryptjs
• Cloudinary (Image Upload)
• dotenv

---

📦 Stretch Features (Implemented)

Feature	Description
🏷️ Tag Support	Add tags to notes and filter notes by tags using UI buttons or dropdown.
🖼️ Image Upload	Upload images (base64 or Cloudinary), display them inside notes.
🔍 Search Filter	Instant search by title or content in dashboard.
🔐 Private Routes	Only logged-in users can access protected pages.

---

🔢 Pagination Logic

• Displays 6 notes per page.
• Includes "Previous / Next" pagination controls.
• Tailwind CSS-styled pagination buttons are aligned bottom-right.
• Auto-disabled when no more pages.

---

⚙️ Installation & Setup

1. Clone the Repository

git clone https://github.com/your-username/notes-app.git
cd notes-app

# 2. Backend Setup (Server)

``` cd server
npm install

Create .env file in server/

PORT=8080
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

run dev

npm run dev

Authentication Flow Users register and login securely using hashed passwords.

JWT tokens are stored in localStorage.

Protected routes redirect unauthenticated users to the login page.

🧪 To Do / Enhancements Export notes to PDF

Shareable public link to a note

Collaborator support (via Socket.io)

Offline mode with local storage fallback

🖼️ Image Uploads – Why Useful? Helps users attach visual content (e.g., diagrams, screenshots).

Stored securely using Cloudinary.

Preview shown inside each note.

Makes the app more flexible for students, developers, designers.

👨‍💻 Author Made with 💙 by Your Name