ToDo App

ToDo App is a simple and awesome app to organize your tasks with a very easy-to-use interface. ToDo can help you to make a list of your tasks.

Live demo 📺

Click here Todo App to get a nice experience by using the demo version.

Usage The App

1. Switch between light and dark mode by click on sun/moon icon.
2. Type you task description in the description input and click on the left button.
3. In the List of todos, you can switch the todo state to be complete or not by click on the button on the left side of the todo.
4. You can update the todo by double click on the todo to get the update form.
5. Delete the todos by click on the cross icon that appears when the mouse hovers on the todo.
6. You can find the item left in the footer, and you can filter the todos by click on the filter button that you can see three filter states.
7. Delete all completed todo by click on the clear completed button.

App Images

Dark Mode

Light Mode

Mobile Mode

Technologies 💻

1. React
2. Redux
3. Redux-Saga

Why Redux and Redux-Saga

Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test. While it's mostly used as a state management tool with React, you can use it with any other JavaScript framework or library.

redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures. Where as redux-saga is a library that mainly focuses on easy handling of application side effects and more efficient for execution.

Getting Started 📣

1. You can start by cloning the repository on your local machine by running:

git clone https://github.com/GSG-G9/ow-todo-app-muhammad.git
cd ow-todo-app-muhammad

2. Install all of the dependencies:

npm i

3. run the app locally:🔌

npm start

Now the app should be running at http://localhost:3000