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!

Building an App using React!
UI build using Styled Components!
State Management with Redux Toolkit!
Local Storage for Offline Support with the help of Redux persist!
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:

git clone https://github.com/routayush1/redux-toolkit_redux-persist_ToDo-List.git

Install the devDependencies so you can run the tests:

 npm install

Now you have everything you need to start this Todo List !

 npm start