https://github.com/routayush1/redux-toolkit_redux-persist_todo-list
Todo List App Using Redux Toolkit , Redux Persist, and React
https://github.com/routayush1/redux-toolkit_redux-persist_todo-list
Last synced: 3 months ago
JSON representation
Todo List App Using Redux Toolkit , Redux Persist, and React
- Host: GitHub
- URL: https://github.com/routayush1/redux-toolkit_redux-persist_todo-list
- Owner: routayush1
- Created: 2021-05-05T06:26:20.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-05-05T07:03:54.000Z (about 4 years ago)
- Last Synced: 2025-01-14T02:18:05.847Z (5 months ago)
- Language: JavaScript
- Homepage: https://redux-toolkit-redux-persist-to-do-list.vercel.app/
- Size: 635 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Todo List App Using Redux Toolkit ,Redux Persist and React
> Before you continue, try the demo: https://redux-to-do.vercel.app/
> Add a few items to the list.
Check-off your todos and navigate the footer to filter for Active/Completed.
Try and "break" it! Refresh the page and notice how your todo items
are "still there" (_they were saved to `localStorage`!_).
Once you have had a "play" with the demo, come back and _build_ it!!
## What?
Build a fully functional "Todo List" Application!
+ [x] Building an App using React!
+ [x] UI build using Styled Components!
+ [x] State Management with Redux Toolkit!
+ [x] Local Storage for Offline Support with the help of Redux persist!
+ [x] Animations made using Famer Motion Api!
### Todo List?
If you are _unfamiliar_ with Todo lists, simply put:
they are a way of keeping a list of the tasks that need to be done.
see: https://en.wikipedia.org/wiki/Time_management#Setting_priorities_and_goals
Todo Lists or "Checklists" are the _best_ way of tracking tasks.
Atul Gawande wrote a _superb_ book on this subject:
https://www.amazon.com/Checklist-Manifesto-How-Things-Right/dp/0312430000
Or if you don't have time to read,
watch: https://www.youtube.com/results?search_query=checklist+manifesto
## _Who?_
This repo is for anyone/everyone who wants
to see how Redux Toolkit and Redux Persist works
while viewing a "real world" Todo List Application.
### Prerequisites
Most beginners with basic and HTML knowledge
should be able to follow this example without any prior experience.
The code is commented and the most "complex" function is an event listener.
With that said, if you feel "stuck" at any point,
please consult the recommend reading (_and Google_)
and if you cannot find an answer,
please open an issue!
## _How?_
Start by cloning this repository to your `localhost`
so that you can follow the example/tutorial offline:
```sh
git clone https://github.com/routayush1/redux-toolkit_redux-persist_ToDo-List.git
```
Install the `devDependencies` so you can run the tests:
```sh
npm install
```
Now you have _everything_ you need to start this Todo List !
```sh
npm start
```