Skip to content

README.md

Latest commit

 

History

History
235 lines (184 loc) · 7.02 KB

README.md

File metadata and controls

235 lines (184 loc) · 7.02 KB

📝 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.

Modern Note App React Node.js MongoDB Tailwind

✨ 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

📁 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