A fundamental to-do application, Memo serves as a portfolio piece showcasing MERN stack development with an emphasis on **clean code, robust CRUD functionality, and JWT-based authentication**.
Please visit the site here -> (https://memo-one.vercel.app/)
This application is built with a powerful MERN stack, showcasing full-stack development skills from a responsive front-end to a secure, robust back-end.
- Front-end: A vibrant UI crafted with React.js for a smooth, dynamic user experience.
- Back-end: Powered by Express.js and Node.js, with a MongoDB database to handle all data efficiently.
- CRUD Operations: Seamlessly create, read, update, and delete tasks using clean RESTful API calls.
- Security: Robust JWT-based token authentication protecting all routes.
- Intuitive UI: A modern design that makes managing your tasks feel effortless.
Follow these steps to get Memo running on your local machine:
- Clone the repository:
git clone [Your Repo URL Here]
- Navigate to the project directory and install dependencies (for both client and server):
npm install
- Start the application (this command will typically run both the client and server concurrently):
(Note: You may need to create a
npm run dev
.envfile for MongoDB connection string and JWT secret.)
Effortlessly switch between a compact list view and a spacious grid layout.
A simple and straightforward way to add new tasks to your list, ensuring you never miss a beat.
Easily edit existing tasks with a slick, user-friendly popup interface.
Confirm and delete tasks with a clear, concise popup, keeping your workspace clutter-free.
Find any task in a flash with the powerful, case-insensitive search feature.
Navigate your tasks with an elegant and functional sidebar that keeps everything within reach.
The Filter Page allows users to quickly find tasks using a powerful, dynamic filter based on color, priority, and label.
A UI-rich Login page featuring encrypted security and JWT token authentication to protect user data and routes at every step.
| Grid View in Mobile | Sidebar in Mobile |
|---|---|
 |
 |
This project is a testament to my ability to build a full-featured application from the ground up. It demonstrates:
- Responsive UI/UX design and implementation.
- Mastery of React.js components and complex state management.
- Full CRUD functionality using RESTful API design.
- Implementing JWT-based authentication for secure route protection.
- Efficient data handling and modeling with MongoDB.
- Creating a cohesive and professional user experience.