This is a comprehensive React app that allows users to create and manage their to-do lists. The app is responsive and can be used on all devices.
- HTML
- CSS
- JavaScript
- React
- React Router DOM
- React Redux
- npm
- reduxjs/toolkit
- Local Storage
- Session Storage
- Font Awesome Icons
- Create to-do lists
- Add tasks to to-do lists
- Mark tasks as completed
- Delete tasks
- Filter tasks by status
- Responsive design
- Authentication with local storage
- Authorization with session storage
- Custom icons with Font Awesome
- Remove Current account from the settings
- Remove all users data from settings
To install npm and reduxjs/toolkit, you can run the following commands in your terminal:
- Install npm and reduxjs/toolkit.
npm install -g npm
npm install -g reduxjs/toolkit
-
Clone this repository.
git clone https://github.com/AhmedNasser1010/todo.git -
Run
npm installin the project directory.
cd todo
npm install
- Run
npm startto start the React app.
The app will be accessible at http://localhost:3000.
The app has two modes to display to-do lists:
- Category view: This mode displays all of the tasks in a selected category. You can scroll through the tasks to see them all.
- List view: This mode displays all of the to-do lists. You can click on a list to see the tasks in that list.
To switch between modes, click on the "Category" icon or "List" icon next of the greating of your name.
To create a categiry list, click the "+" button then add category plus button. Enter a name for the category, chose the category color, chose category icon, and click the "+ ADD CATEGORY" button.
To add a task to a to-do list, click the "Add Task" button. Enter a name for the task, chose category and click the "+ ADD TASK" button.
To mark a task as completed, click the checkbox next to the task.
To delete a task, click the trash can icon next to the task.
To signup, enter your first name, last name, email, password, chose user avatar, age, sex and click on "SIGNUP" button.
To login, enter your email and password in the login form and click the "Login" button.
To logout, click the "Logout" button from settings page.
To remove current user account, click on "Remove Current Account" button from settings page.
To remove all users data, click on "Remove All Users Data" button from settings page.
The app is deployed to https://todo-ahmed.vercel.app
From one unknown surface image to real website
The original image, i find it in google
Screenshot from my project
- Login / Signup
- Home page with the two modes
- Add Category / Add Task
- Tasks
- Settings
We appreciate contributions to improve our project. To contribute, follow these steps:
- Fork the repository.
- Create a new branch:
git checkout -b my-feature - Make your changes and commit them:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-feature - Open a pull request.
Please adhere to the coding conventions and standards followed in the project.
This project is licensed under the MIT License.