Before you continue, try the demo: https://ay-todoapp.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!!
Build a fully functional "Todo List" Application!
- Building an App using React!
- UI build using Styled Components!
- State Management with React Context Api and hooks!
- Local Storage for Offline Support!
- Animations made using Famer Motion Api!
- Animated icons and svg using lottie!
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
This repo is for anyone/everyone who wants to see how React Context Api and hooks works while viewing a "real world" Todo List Application.
Most beginners with basic and HTML knowledge should be able to follow this example without any prior experience. 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!
Start by cloning this repository to your localhost
so that you can follow the example/tutorial offline:
git clone https://github.com/Apoorvssj/TodoApp.gitInstall the devDependencies so you can run the tests:
npm installNow you have everything you need to start this Todo List !
npm start