🧑🏫 Note: This project is part of a professional front-end training program, supervised by a senior Engineer to simulate a real-world team workflow.
A professional training project for building a responsive and modern Todo List Web Application, developed by a team of front-end developers under the supervision of a Senior Front-End Engineer.
This project simulates a real-world development environment—from receiving designs in Figma to deploying the final product.
- Project Goal
- Tech Stack
- UI & Design
- Core Functionalities
- API Documentation
- Roadmap
- Project Board
- Project Structure
- How to Contribute
- Code of Conduct
- Contributors
- Project Manager
- Deployment
- License
- License Terms
- Attribution
- Practice converting Figma designs into fully functional web pages.
- Learn how to collaborate effectively on a team using Git and GitHub.
- Write clean, maintainable, and scalable code.
- Experience full software development workflow (from development to production).
💡 Want to start your own version or contribute? Fork the repo or open a new issue!
We plan to add unit and integration tests using:
Tests will ensure UI and business logic behave as expected.
The UI design used in this project is based on a free Figma template, licensed for personal and educational use.
Figma License: Free Figma Design Source
- Register
- Login
- Dashboard
- My Tasks
- Vital Tasks
- Account Information
- Update Account Information
- Change Password
- Task Categories
- Create Categories
- View Task
- Add New Task
- Edit Task
- Add Task Priority
- Edit Task Priority
- Edit Task Status
- Calendar
- Notifications
- User Registration
- User Login
- User Logout
- Add Account Information
- Update Account Information
- Change Password
- Add / Edit / Delete Task
- Add / Edit / Delete Categories
- Add / Edit / Delete Task Priority
- Add / Edit Task Status
- Search Task
This roadmap tracks the key milestones and progress of the Todo List Web App project. Each milestone groups related features and tasks to simulate a real-world agile workflow.
- Setup Project Structure.
- Build Auth Layout (Shared Layout for Login/Register).
- Build Register Page UI.
- Build Login Page UI.
- Integrate Register API.
- Integrate Login API.
- Persist User Session.
- Protect Private Routes.
- Build Dashboard Layout UI.
- Build Notifications Dropdown UI.
- Build Calendar Dropdown UI.
- Build Dashboard – To-Do UI.
- Build Dashboard – Task Status UI.
- Build Dashboard – Completed Task UI.
- Build Vital Task Page UI.
- Build My Task Page UI.
- Build Task Card Component UI.
- Build View Task Page UI.
- Build Add Task Popup UI.
- Build Edit Task Popup UI.
- Integrate Add Task API.
- Integrate Edit Task API.
- Integrate Delete Task API.
- Build Add Task Status Popup UI.
- Build Edit Task Status Popup UI.
- Integrate Add Task Status API.
- Integrate Edit Task Status API.
- Integrate Delete Task Status API.
- Build Add Task Priority Popup UI.
- Build Edit Task Priority Popup UI.
- Integrate Add Task Priority API.
- Integrate Edit Task Priority API.
- Integrate Delete Task Priority API.
- Build Task Categories Page UI.
- Build Create Task Category Page UI.
- Build Edit Task Category Popup UI.
- Integrate Add Task Categories API.
- Integrate Edit Task Categories API.
- Build Account Information Page UI.
- Build Update Account Information Page UI.
- Build Change Password Page UI.
- Final QA Testing.
- Test Responsive Design.
- Cross-browser Testing.
- Accessibility Review.
- Performance Optimization.
- Code Cleanup & Linting.
- Update Documentation.
- Prepare Production Build.
- Deploy to Vercel.
- Tag Release v1.0.
🗂️ Project Board: View on GitHub Projects
Todo List Web Applications
├─ public
│ ├─ favicon.ico
│ └─ images
│ ├─ auth-background.webp
│ ├─ login.webp
│ └─ register.webp
├─ src
│ ├─ app
│ │ ├─ api
│ │ │ └─ [...path]
│ │ │ └─ route.ts
│ │ ├─ auth
│ │ │ ├─ layout.tsx
│ │ │ ├─ login
│ │ │ │ └─ page.tsx
│ │ │ └─ register
│ │ │ └─ page.tsx
│ │ ├─ layout.tsx
│ │ └─ page.tsx
│ ├─ modules
│ │ └─ auth
│ │ ├─ login
│ │ │ ├─ components
│ │ │ │ └─ LoginForm.tsx
│ │ │ ├─ services
│ │ │ │ └─ loginServices.ts
│ │ │ └─ types
│ │ │ └─ loginTypes.ts
│ │ └─ register
│ │ ├─ components
│ │ │ └─ RegisterForm.tsx
│ │ ├─ services
│ │ │ └─ registerServices.ts
│ │ └─ types
│ │ └─ registerTypes.ts
│ ├─ providers
│ │ └─ Providers.tsx
│ ├─ services
│ │ └─ apiClient.ts
│ └─ styles
│ └─ globals.css
├─ tsconfig.json
├─ .prettierrc
├─ eslint.config.mjs
├─ LICENSE
├─ next.config.ts
├─ package.json
├─ pnpm-lock.yaml
├─ postcss.config.mjs
└─ README.md
📌 See CONTRIBUTING.md for full contribution workflow and commit standards.
🤝 We expect all contributors to follow our Code of Conduct.
| Avatar | Name | GitHub | |
|---|---|---|---|
 |
Ahmed Samy | @AhmedSamyEid | |
 |
Mahmoud Abu Zaid | @Mahmoud-abu-zaid | |
 |
Wedad Osama | @wedadosama |
Role: Senior Front-End Engineer / Project Manager
Feel free to reach out for collaboration, feedback, or questions.
You're free to use this project under the MIT license.
However, you must retain the license file and attribute the original author (Mahmoud Abuyoussef) when reusing or modifying the codebase.
⚠️ If you reuse or modify this codebase, you must retain the original license and give appropriate credit to the author.
This project is led and maintained by Mahmoud Abuyoussef
with valuable contributions from the development team.
Contributors:
You are welcome to contribute or reuse parts of the project under the terms of the MIT license.
Please retain proper credit when using this codebase.