TaskFlow is a full-stack task management application built to help users organize their daily work, track progress, and manage tasks efficiently. The application provides a clean and responsive user interface along with a lightweight backend that stores tasks in a JSON file.
- Create new tasks with title, description, and due date
- View all tasks in a clean dashboard
- Mark tasks as completed or active
- Delete tasks
- Search tasks by title
- Filter tasks by status (All, Active, Completed)
- Overdue task indication
- Responsive and user-friendly interface
- Persistent storage using a JSON file
- React
- Vite
- Tailwind CSS
- Node.js
- Express.js
- JSON File (
tasks.json)
task-manager/
│
├── client/
│ ├── src/
│ ├── public/
│ └── package.json
│
├── server/
│ ├── data/
│ │ └── tasks.json
│ ├── server.js
│ └── package.json
│
└── README.md
git clone https://github.com/ShailendraS80/task-manager.git
cd task-managercd server
npm install
node server.jsThe backend server will run on:
http://localhost:5000
Open a new terminal:
cd client
npm install
npm run devThe frontend will run on:
http://localhost:5173
GET /api/tasksPOST /api/tasksRequest Body:
{
"title": "Learn React",
"description": "Practice hooks and state management",
"dueDate": "2026-06-20"
}DELETE /api/tasks/:idPATCH /api/tasks/:id/toggle- Users create tasks from the dashboard.
- Tasks are sent to the Express backend.
- The backend stores task data in
tasks.json. - Tasks are fetched and displayed on the React frontend.
- Users can search, filter, complete, or delete tasks.
- Changes are automatically reflected in the UI.
- User authentication
- Dark mode support
- Task categories and tags
- Drag-and-drop task management
- Database integration (MongoDB/PostgreSQL)
- Notifications and reminders
Shailendra Sharma
GitHub: https://github.com/ShailendraS80
This project was developed as a full-stack assessment project to demonstrate proficiency in React, Node.js, Express, REST APIs, state management, and modern frontend development practices.