📝 Modern Note-Taking App

A beautiful, modern MERN stack note-taking application with glassmorphism design, dark/light mode toggle, and advanced features for organizing your thoughts.

✨ Features

🎨 Modern UI/UX

• Glassmorphism Design - Beautiful transparent cards with backdrop blur effects
• Dark/Light Mode Toggle - Smooth theme transitions with system preference detection
• Animated Components - Framer Motion animations throughout the app
• Responsive Design - Works perfectly on all screen sizes
• Interactive Elements - Hover effects, smooth transitions, and micro-interactions

📱 Note Management

• Create & Edit Notes - Rich text support with modern editor
• Pin Important Notes - Keep important notes at the top
• Search & Filter - Find notes quickly with advanced filtering
• Tags System - Organize notes with colorful tags
• Grid/List View - Toggle between different viewing modes
• Note Statistics - Dashboard with note counts and insights

🔐 Authentication

• Secure JWT Authentication - Login/signup with encrypted passwords
• Session Persistence - Stay logged in across browser sessions
• Route Protection - Secure pages that require authentication

🚀 Advanced Features

• Context Menus - Right-click actions for notes
• Copy to Clipboard - Quick content copying
• Like System - Mark favorite notes
• Empty States - Beautiful placeholders when no notes exist
• Toast Notifications - User-friendly feedback messages

🛠️ Tech Stack

Frontend

• React 18 - Modern React with hooks
• Vite - Fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library
• Redux Toolkit - State management
• React Router - Client-side routing
• Lucide React - Beautiful icons
• React Toastify - Toast notifications

Backend

• Node.js - JavaScript runtime
• Express.js - Web framework
• MongoDB - NoSQL database
• Mongoose - MongoDB object modeling
• JWT - JSON Web Tokens for authentication
• bcryptjs - Password hashing
• CORS - Cross-origin resource sharing

🚀 Quick Start

Prerequisites

• Node.js (v16 or higher)
• MongoDB Atlas account or local MongoDB
• Git

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd Note-App-Using-MERN-Stack--main

2. Install Backend Dependencies

   cd backend
   npm install

3. Install Frontend Dependencies

   cd ../frontend
   npm install

4. Environment Setup

   Create a .env file in the backend directory:

   MONGO_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret_key
   PORT=3000

   MongoDB Atlas Setup:

   • Create a free account at MongoDB Atlas
   • Create a new cluster
   • Create a database user with read/write permissions
   • Whitelist your IP address (or use 0.0.0.0/0 for development)
   • Get your connection string and replace <password> with your actual password
   • Important: URL-encode special characters in your password

5. Start the Application

   Backend (Terminal 1):

   cd backend
   npm run dev

   Frontend (Terminal 2):

   cd frontend
   npm run dev

6. Access the App

   • Frontend: http://localhost:5173
   • Backend API: http://localhost:3000

📁 Project Structure

Note-App-Using-MERN-Stack--main/
├── backend/
│   ├── controller/          # Route controllers
│   ├── models/             # Database models
│   ├── routes/             # API routes
│   ├── utils/              # Utility functions
│   ├── .env                # Environment variables
│   └── index.js            # Server entry point
├── frontend/
│   ├── src/
│   │   ├── components/     # Reusable components
│   │   ├── contexts/       # React contexts
│   │   ├── pages/          # Page components
│   │   ├── redux/          # Redux store and slices
│   │   └── utils/          # Utility functions
│   ├── public/             # Static assets
│   └── index.html          # HTML template
├── .gitignore              # Git ignore rules
└── README.md               # Project documentation

🎯 API Endpoints

Authentication

• POST /api/auth/signup - Create new user account
• POST /api/auth/signin - User login
• GET /api/auth/signout - User logout

Notes

• GET /api/note/all - Get all user notes
• POST /api/note/add - Create new note
• PUT /api/note/edit/:id - Update existing note
• DELETE /api/note/delete/:id - Delete note
• PUT /api/note/update-pinned/:id - Toggle note pin status
• GET /api/note/search - Search notes

🎨 Design Features

Glassmorphism Effects

• Transparent backgrounds with backdrop blur
• Subtle borders and shadows
• Layered visual hierarchy

Animations

• Smooth page transitions
• Hover effects on interactive elements
• Loading states and micro-interactions
• Staggered animations for lists

Theme System

• Automatic dark/light mode detection
• Manual theme toggle
• Persistent theme preferences
• Smooth color transitions

🔧 Development

Available Scripts

Backend:

• npm start - Start production server
• npm run dev - Start development server with nodemon

Frontend:

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build

Environment Variables

Backend (.env):

MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/notes-app
JWT_SECRET=your-super-secret-jwt-key
PORT=3000

🚀 Deployment

Frontend (Netlify/Vercel)

1. Build the frontend: npm run build
2. Deploy the dist folder to your hosting service

Backend (Railway/Render/Heroku)

1. Set environment variables in your hosting service
2. Deploy the backend folder
3. Update frontend API URLs to point to your deployed backend

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Framer Motion for beautiful animations
• Tailwind CSS for rapid styling
• Lucide React for clean icons
• MongoDB Atlas for cloud database hosting

📧 Contact

For questions or support, please open an issue in the GitHub repository.

---

Made with ❤️ using the MERN Stack