To-Do List App
A To-Do List App is a task management application used to organize daily work, personal activities, shopping lists, projects in one place.
Users can:
- Add tasks
- Update tasks
- Delete tasks
- Mark tasks as completed
- Filter tasks by category or status
The main goal of a To-Do App is to help users stay organized, improve productivity, and manage time easily.
Technologies Used
Frontend
- React.js
- JSX
- CSS
- Axios
- React Router DOM
Backend
- Node.js
- Express.js
Database
- MongoDB
- Mongoose
Authentication
- JWT Token
- bcrypt password hashing
Correct File Flow for To-do List Project
Frontend Files
main.jsx
Starting point of React app. It loads App.jsx.
App.jsx
Controls routes like Login, Register, and Dashboard.
Login.jsx
Used for user login. Sends login data to backend authRoutes.js.
Register.jsx
Used for user registration. Sends user data to backend authRoutes.js.
Dashboard.jsx
Main page of the To-Do App. It handles adding tasks, viewing tasks, editing tasks, deleting tasks, searching tasks, categories, pending tasks, completed tasks, and overdue tasks.
App.css
Used for styling the application.
Backend Files
server.js
Main backend file. It starts the server, connects MongoDB, and uses routes.
User.js
Stores user data like name, email, and password.
Todo.js
Stores task data like title, description, category, status, and due date.
authRoutes.js
Handles register and login API routes.
todoRoutes.js
Handles add, get, update, delete, and complete task routes.
authMiddleware.js
Checks JWT token before allowing users to access tasks.
.env
Stores MongoDB URL, port number, and JWT secret.
Main Features of To-Do App
1. User Authentication
Users can create account and login securely.
Features
- Register account
- Login account
- Logout
- JWT token security
- Password encryption using bcrypt
Files Used
Register.jsxLogin.jsxauthRoutes.jsUser.jsauthMiddleware.js
2. Add Task Feature
Users can create new tasks.
Example
- Title
- Description
- Due Date
- Category
- Priority
Files Used
todoRoutes.js
Todo.js
3. View Tasks Feature
Displays all created tasks.
Features
- Tasks
Search
Categories
Task management
Pending and completed tasks
Files Used
Dashboard.jsx
4. Edit Task Feature
Users can update task details.
Example
Change:
- Title
- Due date
- Status
- Priority
Files Used
Dashboard.jsx
5. Delete Task Feature
Users can remove unwanted tasks.
Files Used
todoRoutes.js
6. Complete Task Feature
Users can mark tasks as completed.
Features
- Completed tasks section
- Status update
- Task movement
Files Used
Dashboard.jsx
Todo.js
7. Search Task Feature
Users can search tasks quickly.
Example
Search by:
- Task title
- Category
Files Used
Dashboard.jsx
8. Task Categories Feature
Tasks can be grouped into categories.
Example Categories
- Personal
- Shopping
- My Work
- Projects
Files Used
Dashboard.jsx
9. Pending Tasks Feature
Shows tasks not completed yet.
Files Used
Dashboard.jsxTodo.js
10. Overdue Tasks Feature
Shows tasks whose due date is crossed.
Files Used
Dashboard.jsx
Simple File Explanation
FRONTEND FILES
main.jsx
Purpose
Starting point of React app.
What it does
Loads full application.
Flow
main.jsx → opens → App.jsx
App.jsx
Purpose
Controls all pages and routes.
What it does
Decides which page to show.
Example
- Login page
- Register page
- Dashboard page
Login.jsx
Purpose
User login page.
What it does
Checks email and password.
Connected Files
authRoutes.js
Register.jsx
Purpose
New user registration page.
What it does
Creates new account.
Dashboard.jsx
Purpose
Main working page of app.
What it does
Shows:
- Tasks
- Sidebar
- Search
- Categories
- Task cards
Purpose
Displays single task.
What it contains
- Title
- Description
- Buttons
- Status
BACKEND FILES
server.js
Purpose
Main backend starting file.
What it does
- Starts server
- Connects MongoDB
- Uses routes
User.js
Purpose
Stores user database structure.
Stores
- Name
- Password
Todo.js
Purpose
Stores task database structure.
Stores
- Title
- Description
- Status
- Category
- Due date
authRoutes.js
Purpose
Handles login/register routes.
Example
/login/register
todoRoutes.js
Purpose
Handles task routes.
Example
- Add task
- Delete task
- Update task
- Complete task
authMiddleware.js
Purpose
Protects private routes.
What it does
Checks JWT token before accessing tasks.
DATA BASE
Correct database flow:
Todo.js and User.js are Mongoose models.
They define how data should be stored in MongoDB.
Correct flow:
Frontend
↓
Backend Routes
↓
Mongoose Models
↓
MongoDB DatabaseSimple Complete Flow
User opens app
↓
main.jsx starts React
↓
App.jsx opens Login/Register/Dashboard
↓
User login/register
↓
authRoutes.js handles authentication
↓
User.js stores user data in MongoDB
↓
After login, user enters Dashboard
↓
Dashboard sends task request to todoRoutes.js
↓
authMiddleware.js checks JWT token
↓
Todo.js stores task data in MongoDB
↓
Response comes back
↓
Dashboard updates tasksOutput Screens of To-Do List Application
Summary
The To-Do List App is a MERN Stack project used to manage daily tasks efficiently.
React.js is used for the frontend UI, Node.js and Express.js handle the backend APIs, and MongoDB stores task data. JWT tokens and bcrypt provide secure authentication.
The application follows full-stack architecture to perform CRUD operations smoothly between frontend, backend, and database.
Keywords
To-Do List App, MERN Stack Project, Task Management Application, React.js Project, Node.js Backend, Express.js API, MongoDB Database, CRUD Application, Full Stack Development, Task Tracking System, Daily Task Manager, JWT Authentication, bcrypt Password Hashing, React Router DOM, Axios API Calls, Web Development Project, MERN Stack CRUD App, Productivity Application, Task Organizer, Frontend Development, Backend Development.
