NoteSpace is a modern, full-stack notes management web application that allows users to securely create, edit, organize, and manage notes with a beautiful and responsive UI. The project focuses on clean UX, secure authentication, and scalable backend architecture.
🔗 Live Website: LINK
- User Signup & Login using JWT Authentication
- Protected routes (Dashboard & Profile)
- Secure password hashing using bcrypt
- Token-based session handling
- Create, Edit, Delete notes
- Search notes by title
- Add tags to notes
- Notes are user-specific
- Colorful, aesthetic note cards
- Displays all notes of the logged-in user
- Responsive grid layout (Mobile, Tablet, Desktop)
- Smooth hover & transition effects
- Floating “Add Note” action button
- Modal popup for creating/editing notes
- View user details
- Update profile name
- Display total notes count
- Profile protected via authentication
- React (Vite)
- Tailwind CSS
- React Router DOM
- Axios
- Lucide Icons
- Node.js
- Express.js
- MongoDB (Mongoose)
- JWT (jsonwebtoken)
- bcryptjs
- CORS
- Frontend: Vercel
- Backend: Render
- Database: MongoDB Atlas
NoteSpace/
│
├── frontend/
│ ├── src/
│ │ ├── api/
│ │ ├── components/
│ │ ├── pages/
│ │ ├── App.jsx
│ │ └── main.jsx
│ └── vite.config.js
│
├── backend/
│ ├── models/
│ ├── routes/
│ ├── middleware/
│ ├── config/
│ └── server.js
│
└── README.md
- User signs up → credentials stored securely
- User logs in → JWT token generated
- Token stored in browser storage
- Protected routes verify token before access
- User logs in → redirected to Dashboard
- Notes fetched using authenticated API call
- Create/Edit/Delete operations update database
- UI updates in real-time
- Fetch logged-in user details
- Display profile info
- Update profile name
- Navigate back to dashboard
Priya Gupta 🔗 GitHub: Click here 🔗 LinkedIn: Click here