A full-stack task management application designed with a focus on user experience and secure data handling. This project implements a modern MERN (MongoDB, Express, React, Node.js) architecture with a dynamic Kanban-style board for agile task tracking.
You can access the live application here: Task Manager App
- Secure Authentication: Implemented JWT (JSON Web Tokens) for user sign-up and login with password hashing.
- Full CRUD Operations: Users can create, read, edit, and delete tasks in real-time.
- Dynamic Views: Seamlessly switch between List View and Kanban Board view based on task priority.
- Priority Management: Categorize tasks by
Low,Medium, orHighpriority with visual color indicators. - Status Persistence: Tasks state (completed/pending) is persisted in a MongoDB cloud database.
- Protected Routes: Frontend routes are guarded to ensure only authenticated users can access task data.
- Frontend: React.js, TypeScript, Axios, CSS Modules.
- Backend: Node.js, Express.js.
- Database: MongoDB Atlas (Cloud).
- Authentication: JWT, bcryptjs.
- Deployment: Vercel (Frontend), Render (Backend).
- Separation of Concerns: The project is split into a clear
frontendandbackendstructure. - Middleware: Used custom Express middleware for authentication and error handling.
- State Management: Utilized React Context API to manage global authentication state across the application.
- RESTful API: Designed a clean RESTful interface for all resource operations.
-
Clone the repository:
git clone https://github.com/lmnst/task-manager-app.git
-
Backend Setup:
cd backend npm install # Create a .env file with: # MONGO_URI=your_mongodb_uri # JWT_SECRET=your_secret_key npm start -
Frontend Setup:
cd frontend npm install # Create a .env file with: # VITE_API_BASE_URL=http://localhost:5000 npm run dev
Developed by Zhuangyu Zhou - CS Master Student at Uni-Bonn