TaskFlow - Full-Stack Task Management App

TaskFlow is a full-stack task management application built with React, Vite, Tailwind CSS, Node.js, Express, MongoDB, and JWT authentication. It provides secure user sign-up and login, protected task and profile pages, and a focused workspace for creating, organizing, filtering, and tracking tasks from a single dashboard.

• User registration, login, and current-user session restore
• JWT-protected routes with password hashing using bcryptjs
• Create, edit, delete, and mark tasks as pending or completed
• Task priorities, due dates, and comma-separated tags
• Search and status filtering for faster task management
• Dashboard statistics for total, completed, pending, and overdue tasks
• Responsive interface with dark mode support
• Profile page with authenticated user details

• Frontend: React, Vite, Tailwind CSS, React Router, Axios, Lucide React
• Backend: Node.js, Express, Mongoose, MongoDB, JWT, bcryptjs, dotenv
• Deployment: Render

https://task-management-app-wt2r.onrender.com

Demo Account:
Email: demo@example.com
Password: demo123

1. Install dependencies from the project root.

npm run install:all

2. Create a backend/.env file using the values below.

PORT=5000
MONGO_URI=mongodb://127.0.0.1:27017/task_management_app
JWT_SECRET=replace_with_a_long_random_secret
JWT_EXPIRES_IN=7d
CLIENT_URL=http://localhost:5173

3. Create a frontend/.env file if you want to point the app to a custom API URL.

VITE_API_URL=http://localhost:5000/api

4. Start the development servers.

npm run dev

task_management_app/
├── backend/
│   ├── config/
│   │   └── database.js
│   ├── controllers/
│   │   ├── authController.js
│   │   └── taskController.js
│   ├── middleware/
│   │   ├── authMiddleware.js
│   │   └── errorHandler.js
│   ├── models/
│   │   ├── Task.js
│   │   └── User.js
│   ├── routes/
│   │   ├── authRoutes.js
│   │   └── taskRoutes.js
│   ├── utils/
│   │   ├── asyncHandler.js
│   │   └── createToken.js
│   └── server.js
├── frontend/
│   ├── public/
│   └── src/
│       ├── api/
│       │   └── axios.js
│       ├── components/
│       │   ├── AppLayout.jsx
│       │   ├── EmptyState.jsx
│       │   ├── ProtectedRoute.jsx
│       │   ├── Sidebar.jsx
│       │   ├── StatsCards.jsx
│       │   ├── TaskCard.jsx
│       │   ├── TaskForm.jsx
│       │   ├── TaskToolbar.jsx
│       │   └── Toast.jsx
│       ├── context/
│       │   └── AuthContext.jsx
│       ├── pages/
│       │   ├── AuthPage.jsx
│       │   ├── Dashboard.jsx
│       │   ├── Login.jsx
│       │   ├── Profile.jsx
│       │   └── Register.jsx
│       ├── App.jsx
│       ├── index.css
│       └── main.jsx
├── package.json
├── README.md
└── render.yaml

• How to structure a full-stack app with a React frontend and an Express/MongoDB backend.
• How JWT authentication and protected routes work together to secure task data.
• How to keep API calls simple by centralizing Axios configuration and token handling.
• How to model task workflows with priorities, due dates, tags, and completion states.
• How to support both local development and single-service Render deployment from one codebase.