Todo List Application

Live Demo: https://todo-app-abhi-na-jao.vercel.app/

Welcome to the Todo List Application! This is a comprehensive, full-stack web application designed to help you organize your daily tasks efficiently.

Whether you are managing personal chores, work projects, or grocery lists, this app provides a secure and user-friendly platform to keep track of everything you need to do. Each user gets a private, isolated workspace where they can create, manage, and filter their own tasks without worrying about data overlapping with other users.

Features

• Secure User Accounts: Sign up and log in with JWT-based authentication. Your data is entirely private and isolated.
• Task Management: Create, read, update, and delete (CRUD) your daily tasks easily.
• Search & Filter: Quickly find tasks by searching for keywords or filtering by their completion status (All, Pending, Completed).
• Responsive Design: Enjoy a seamless experience across desktop, tablet, and mobile devices thanks to a clean Bootstrap 5 interface.

Tech Stack

For developers interested in the architecture, the application is built using a modern stack:

Layer	Technology
Frontend	React (Vite), React Router, Axios, Bootstrap 5
Backend	Node.js, Express.js
Database	MySQL
Auth	JWT + bcrypt password hashing

Folder Structure

todo-app/
├── backend/
│   ├── config/
│   │   └── db.js                 # MySQL connection pool
│   ├── controllers/
│   │   ├── authController.js     # register / login / profile
│   │   └── todoController.js     # todo CRUD + toggle/search/filter
│   ├── middleware/
│   │   ├── authMiddleware.js     # JWT verification
│   │   └── validate.js           # express-validator rule sets
│   ├── routes/
│   │   ├── authRoutes.js
│   │   └── todoRoutes.js
│   ├── database/
│   │   ├── schema.sql            # CREATE TABLE statements
│   │   └── seed.sql              # sample data
│   ├── .env.example
│   ├── package.json
│   └── server.js                 # Express app entry point
│
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── api/
│   │   │   └── axios.js          # axios instance + JWT interceptor
│   │   ├── context/
│   │   │   └── AuthContext.jsx   # global auth state (Context API)
│   │   ├── components/
│   │   │   ├── Navbar.jsx
│   │   │   ├── PrivateRoute.jsx
│   │   │   ├── TodoCard.jsx
│   │   │   ├── EditTodoModal.jsx
│   │   │   ├── Loader.jsx
│   │   │   └── ToastMessage.jsx
│   │   ├── pages/
│   │   │   ├── Login.jsx
│   │   │   ├── Register.jsx
│   │   │   ├── Dashboard.jsx
│   │   │   ├── AddTodo.jsx
│   │   │   ├── EditTodo.jsx
│   │   │   └── NotFound.jsx
│   │   ├── App.jsx
│   │   ├── main.jsx
│   │   └── index.css
│   ├── .env.example
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
│
├── API_DOCUMENTATION.md
└── README.md

How to Run the Project Locally

Prerequisites

• Node.js 18+ and npm
• MySQL 8.x (or MariaDB equivalent) running locally or remotely

1. Database Setup

1. Start your MySQL server.

2. Run the schema file to create the database and tables:

   mysql -u root -p < backend/database/schema.sql

3. (Optional) Load sample data:

   mysql -u root -p < backend/database/seed.sql

   Note: the seed file's password hash is illustrative. To actually log in with seeded users, register them through the app's /api/auth/register endpoint instead (bcrypt will hash the password correctly), or generate a real bcrypt hash yourself before importing the seed file.

2. Backend Setup

cd backend
npm install
cp .env.example .env

Edit .env and fill in your MySQL credentials and a strong JWT_SECRET:

PORT=5000
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=your_mysql_password
DB_NAME=todo_app
JWT_SECRET=replace_this_with_a_long_random_secret_string
JWT_EXPIRES_IN=7d
CLIENT_URL=http://localhost:5173

Start the backend:

npm run dev      # with nodemon (auto-restart)
# or
npm start        # plain node

The API will be available at http://localhost:5000/api. Verify it's running by visiting http://localhost:5000/api/health.

3. Frontend Setup

Open a second terminal:

cd frontend
npm install
cp .env.example .env

Edit .env if your backend runs on a different URL:

VITE_API_URL=http://localhost:5000/api

Start the frontend dev server:

npm run dev

Visit http://localhost:5173 in your browser.

How to Use the App

1. Go to Sign Up, create an account (name, email, password ≥ 6 chars).
2. You'll be logged in automatically and redirected to the Dashboard.
3. Add todos, mark them complete/pending, search, filter, edit, and delete.
4. Log out — your todos remain saved. Log back in to see them again.
5. Register a second account to confirm each user only ever sees their own todos.

Security Notes

• Passwords are hashed with bcrypt (10 salt rounds) before storage; raw passwords are never stored or returned in API responses.
• All Todo routes require a valid JWT (Authorization: Bearer <token>).
• Every todo query is scoped to req.user.id (decoded from the verified JWT), never trusted from the request body/params — this guarantees users can't read or modify another user's todos.
• All SQL queries use parameterized placeholders (?) via mysql2, preventing SQL injection.
• CORS is restricted to the configured CLIENT_URL.

Production Notes

• Set NODE_ENV=production and use a process manager (pm2, systemd, etc.) for the backend.
• Run npm run build in frontend/ to produce a static build (in frontend/dist) that can be served via any static host or a reverse proxy (e.g. Nginx) in front of the Express API.
• Use HTTPS in production; store JWT_SECRET and DB credentials as secure environment variables, never commit .env files.