https://github.com/mahmoud-abuyoussef/todo_list_web_application
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.
https://github.com/mahmoud-abuyoussef/todo_list_web_application
authentication figma front-end fullstack-development mahmoud-abuyoussef mahmoudabuyoussef maintainer-mahmoud-abuyoussef nextjs open-source productivity-tools project-management realworld-frontend realworld-project tailwindcss task-management team-repo todolist-application typescript vercel webapp
Last synced: about 1 month ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/mahmoud-abuyoussef/todo_list_web_application
- Owner: mahmoud-abuyoussef
- License: mit
- Created: 2025-07-26T19:29:10.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-10-01T21:23:59.000Z (about 1 month ago)
- Last Synced: 2025-10-01T22:25:07.157Z (about 1 month ago)
- Topics: authentication, figma, front-end, fullstack-development, mahmoud-abuyoussef, mahmoudabuyoussef, maintainer-mahmoud-abuyoussef, nextjs, open-source, productivity-tools, project-management, realworld-frontend, realworld-project, tailwindcss, task-management, team-repo, todolist-application, typescript, vercel, webapp
- Language: TypeScript
- Homepage:
- Size: 1.4 MB
- Stars: 5
- Watchers: 1
- Forks: 3
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
# 📝 Todo List Web App — Real-World Front-End Training Project
> 🧑🏫 **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.
---
## 📚 Table of Contents
- [Project Goal](#project-goal)
- [Tech Stack](#tech-stack)
- [UI & Design](#ui--design)
- [Core Functionalities](#core-functionalities)
- [API Documentation](#api-documentation)
- [Roadmap](#roadmap)
- [Project Board](#project-board)
- [Project Structure](#project-structure)
- [How to Contribute](#how-to-contribute)
- [Code of Conduct](#code-of-conduct)
- [Contributors](#contributors)
- [Project Manager](#project-manager)
- [Deployment](#deployment)
- [License](#license)
- [License Terms](#license-terms)
- [Attribution](#attribution)
## Project Goal
- 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!
---
---
## Tech Stack
- ### 🧠 Programming Language
- ### Frameworks
- #### CSS
- #### JavaScript
- ### 🧪 Testing (Coming Soon)
> We plan to add unit and integration tests using:
- 
> Tests will ensure UI and business logic behave as expected.
- ### Tools
- #### 💻 IDE/Code Editors
- #### Version Control System
- #### Package Managers
- #### Design
- #### Collaboration Tools
- ### Hosting
---
## UI & Design
### Design License
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](https://www.figma.com/design/GN707LPUS0ez58RygBmCFL/To-do-List-Web-App-Design--Community-?node-id=16-34&p=f&t=DTalImRlUljxSITz-0)
---
### Pages
- Register
- Login
- Dashboard
- My Tasks
- Vital Tasks
- Account Information
- Update Account Information
- Change Password
- Task Categories
- Create Categories
- View Task
---
### Popups
- Add New Task
- Edit Task
- Add Task Priority
- Edit Task Priority
- Edit Task Status
---
### Dropdowns
- Calendar
- Notifications
---
### Core Functionalities
- 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
---
## API Documentation
[API Documentation](https://todolistwebapplication.up.railway.app)
---
## Roadmap
> 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.
### Milestone: `v0.1 – Setup & Authentication`
- [x] Setup Project Structure.
- [x] Build Auth Layout (Shared Layout for Login/Register).
- [x] Build Register Page UI.
- [x] Build Login Page UI.
- [x] Integrate Register API.
- [x] Integrate Login API.
- [x] Persist User Session.
- [x] Protect Private Routes.
---
### Milestone: `v0.2 – Dashboard & Core UI`
- [x] 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.
---
### Milestone: `v0.3 – Task Management Features`
- [ ] Build Add Task Popup UI.
- [ ] Build Edit Task Popup UI.
- [ ] Integrate Add Task API.
- [ ] Integrate Edit Task API.
- [ ] Integrate Delete Task API.
---
### Milestone: `v0.4 – Task Metadata (Status, Priority, Category)`
- [ ] 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.
---
### Milestone: `v0.5 – Account Settings`
- [ ] Build Account Information Page UI.
- [ ] Build Update Account Information Page UI.
- [ ] Build Change Password Page UI.
### Milestone: `v1.0 – MVP Release`
- [ ] 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
> 🗂️ Project Board: [View on GitHub Projects](https://github.com/users/mahmoud-abuyoussef/projects/9)
## Project Structure
```
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
```
---
## How to Contribute
📌 See [CONTRIBUTING.md](.github/CONTRIBUTING.md) for full contribution workflow and commit standards.
---
## Code of Conduct
🤝 We expect all contributors to follow our [Code of Conduct](.github/CODE_OF_CONDUCT.md).
## Contributors
| Avatar | Name | GitHub | LinkedIn |
| ------------------------------------------------------------------------------ | -------------------- | -------------------------------------------------------- | ------------------------------------------------------------------- |
| 
| **Ahmed Samy** | [@AhmedSamyEid](https://github.com/AhmedSamyEid) | [LinkedIn](https://www.linkedin.com/in/ahmed-samy-454b72365/) |
| 
| **Mahmoud Abu Zaid** | [@Mahmoud-abu-zaid](https://github.com/Mahmoud-abu-zaid) | [LinkedIn](https://www.linkedin.com/in/mahmoud-abu-zaid-742bb2365/) |
| 
| **Wedad Osama** | [@wedadosama](https://github.com/wedadosama) | [LinkedIn](https://www.linkedin.com/in/wedad-elkammash-252418309/) |
---
## Project Manager
### Mahmoud Abuyoussef
**Role:** Senior Front-End Engineer / Project Manager
[](mailto:mahmoudabuyoussef5@gmail.com)
[](https://github.com/mahmoud-abuyoussef)
[](https://www.linkedin.com/in/mahmoudabuyoussef)
[](https://linktr.ee/mahmoudabuyoussef)
Feel free to reach out for collaboration, feedback, or questions.
---
## Deployment
- [Todo List Web App](https://todolistwebapplication.vercel.app)
---
## License
[](https://github.com/mahmoud-abuyoussef/Todo_List_Web_Application/blob/main/LICENSE)
## License Terms
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.
---
## Attribution
This project is led and maintained by **[Mahmoud Abuyoussef](https://github.com/mahmoud-abuyoussef)**
with valuable contributions from the development team.
Contributors:
- [Ahmed Samy](https://github.com/AhmedSamyEid)
- [Mahmoud Abu Zaid](https://github.com/Mahmoud-abu-zaid)
- [Wedad Osama](https://github.com/wedadosama)
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.