NotesApp is a professional, high-performance note-taking workspace designed for modern productivity. It features a stunning glassmorphic UI, lightning-fast search, and a robust MERN (MongoDB, Express, React, Node.js) architecture.
- PIN & Organize: Keep your most important thoughts at the top.
- Color Coding: Categorize notes using a vibrant, premium color palette.
- Priority Labels: Set Low, Medium, or High priority to manage your workflow.
- Instant Search: Search across thousands of notes in milliseconds using MongoDB Text Indexes.
- Dual Mode: Seamless transition between a sleek Light Mode and a deep, eye-pleasing Dark Mode.
- Glassmorphism: Modern UI aesthetics with blurred backdrops and subtle borders.
- Fully Responsive: Pixel-perfect experience on mobile, tablet, and desktop.
- Smooth Animations: Powered by
framer-motionfor a fluid, high-end feel.
- JWT Authentication: Secure user sessions with JSON Web Tokens.
- Profile Customization: Upload and change profile images directly from the dashboard (powered by
multer). - Performance Optimized:
- Zero-lag mobile menu interactions.
- Slashed bundle size (removed
moment). - Strategic database indexing for extreme scalability.
- Framework: React 19 (Vite)
- Styling: Tailwind CSS 4
- Animations: Framer Motion
- Icons: Lucide React
- Networking: Axios
- Server: Node.js & Express.js
- Database: MongoDB (Mongoose)
- File Handling: Multer
- Security: Bcrypt.js & JWT
For a successful MERN deployment on Vercel, follow this specific order:
- Create New Project on Vercel and point it to the
backendfolder. - Add Environment Variables:
MONGODB_URIACCESS_TOKEN_SECRETSESSION_SECRET
- Deploy. Once finished, copy the Production URL (e.g.,
https://your-api.vercel.app).
- Create New Project on Vercel and point it to the
frontendfolder. - Add Environment Variables:
VITE_API_BASE_URL: Paste your Backend Production URL here.
- Deploy. Your frontend is now connected to your live API.
- Node.js (v18+)
- MongoDB (Local or Atlas)
git clone https://github.com/shoriful-dev/Notes-App.git
cd Notes-Appcd backend
npm installCreate a .env file:
PORT=5000
MONGODB_URI=your_mongodb_connection_string
ACCESS_TOKEN_SECRET=your_secret_keyStart server:
npm run devcd ../frontend
npm install
npm run devThe application is built with a Mobile-First philosophy. Features like the sliding drawer menu, compact status indicators, and touch-optimized buttons ensure a great experience on the go.
Built with ❤️ by shoriful-dev
License: ISC