TaskFlow

A clean, beginner-friendly full-stack task manager built with MongoDB, Express, React and Node, made for learning and first open-source contributions.

Live demo

👉 taskflow-plum-one.vercel.app: sign up with any email (it doesn't need to be real) and try it out.

⏳ The first load can take up to a minute. The API runs on a free hosting plan that goes to sleep when nobody is using it, and waking up takes a moment. After that it's fast.

Features

• Sign up and log in with secure password hashing and JWT (token-based) authentication
• Dashboard with task counts by status and your most recent tasks
• Tasks: create, edit and delete, with search and filters by priority and status
• Profile: update your name, bio and avatar, and change your password
• Protected pages: logged-out visitors are sent to the login page
• Each user only sees their own tasks, enforced by the API
• Clean, readable code split into small files, with a contributing guide that explains where everything lives

More screenshots

Dashboard

Tasks	New task

Login	Profile

Tech stack

Quick start

1. What you need

• Node.js 22.12 or newer (24 recommended). Check with node --version.
• Git
• MongoDB, either one of:
  • Local: install MongoDB Community Server. Nothing else to configure.
  • Cloud (free): create a cluster on MongoDB Atlas and copy its connection string (see step 1 of the deployment guide).

2. Clone and install

git clone https://github.com/KEX-03/taskflow.git
cd taskflow
npm run install:all

Planning to contribute? Fork the repository first and clone your fork instead (see CONTRIBUTING.md).

3. Create your settings files

# macOS / Linux / Git Bash
cp server/.env.example server/.env
cp client/.env.example client/.env

# Windows PowerShell
Copy-Item server/.env.example server/.env
Copy-Item client/.env.example client/.env

The defaults work with a local MongoDB. Using Atlas? Open server/.env and replace MONGO_URI with your connection string. Every setting is explained in the .env.example files.

4. Run it

npm run dev

This starts both parts together:

• API at http://localhost:5000 (health check: http://localhost:5000/api/v1/health)
• App at http://localhost:3000: open it and sign up for an account

Something not working? The server prints a ❌ message explaining what's wrong, for example a missing setting or MongoDB not running.

Project structure

taskflow/
├── server/                  Express REST API
│   ├── src/
│   │   ├── app.js           Entry point: middleware, routes and startup
│   │   ├── config/          MongoDB connection
│   │   ├── models/          Mongoose schemas (User, Task)
│   │   ├── controllers/     Request handlers: the logic for each endpoint
│   │   ├── routes/          Maps URLs to controllers
│   │   ├── middleware/      `protect`: checks the login token
│   │   └── utils/           Helpers for tokens, errors and query parsing
│   └── .env.example         Server settings, explained
├── client/                  React app (Vite)
│   ├── src/
│   │   ├── App.jsx          All page routes
│   │   ├── pages/           One file per page (Login, Dashboard, Tasks, ...)
│   │   ├── components/      Shared UI (Sidebar, Toast, Spinner, ...)
│   │   ├── context/         AuthContext: who is logged in
│   │   └── utils/           Axios API client and form validation
│   ├── vercel.json          Lets Vercel serve every page route
│   └── .env.example         Client settings, explained
├── docs/                    Architecture overview, deployment guide and images
├── postman_collection.json  Ready-made API requests for Postman
└── package.json             Helper scripts to run everything from the root

New to the code? How TaskFlow works is a five-minute tour of the request flow, login, data model and React app.

API overview

All endpoints start with /api/v1. Endpoints marked 🔒 need a login token in the header: Authorization: Bearer <token>. You get a token from signup or login.

Try it in Postman: import postman_collection.json. After you run Signup or Login, the token is saved and used by every other request automatically.

Deployment

TaskFlow runs on free plans of MongoDB Atlas, Render and Vercel. The deployment guide walks through every setting and environment variable.

Contributing

Contributions of all sizes are welcome, especially from first-time contributors! 🎉

1. Pick an issue labelled good first issue and comment that you'd like to work on it.
2. Follow the contributing guide: it covers setup, branches, commit messages, testing and opening a pull request, step by step.
3. Questions? Ask in Discussions.

Please follow our Code of Conduct. Found a security problem? See SECURITY.md. Changes are listed in the changelog.

License

MIT © 2026 KEX-03