Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shaifarfan/react-todo-app
A complete Todo application with all features.
https://github.com/shaifarfan/react-todo-app
framer-motion javascript reactjs redux webcifar
Last synced: 6 days ago
JSON representation
A complete Todo application with all features.
- Host: GitHub
- URL: https://github.com/shaifarfan/react-todo-app
- Owner: ShaifArfan
- Created: 2022-01-03T22:27:32.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-24T10:58:50.000Z (8 months ago)
- Last Synced: 2024-12-28T18:24:55.705Z (13 days ago)
- Topics: framer-motion, javascript, reactjs, redux, webcifar
- Language: JavaScript
- Homepage: https://wc-react-todo-app.netlify.app/
- Size: 354 KB
- Stars: 217
- Watchers: 4
- Forks: 234
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Todo App.
A complete todo application with all features.
**live demo: [https://wc-react-todo-app.netlify.app/](https://wc-react-todo-app.netlify.app/)**
**Watch On Youtube: [https://youtu.be/W0Uf_xu350k](https://youtu.be/W0Uf_xu350k)**
---
### Made with ❤️ by [Shaif Arfan](https://www.instagram.com/shaifarfan08/)
Like my works and want to support me?
---
## Project Description
In the project, we will be creating a Complete Todo Application with all features. We will do all the CRUD operations. We will use `React.js` and to manage our states, we will use `Redux`. Also we will learn to make simple animations using `Framer Motion`. This will be a complete `beginner` friendly app. Hope you enjoy it.
## What we are going to learn/use
- [React](https://reactjs.org/)
- [React Redux](https://redux.js.org/)
- [Framer Motion](https://framer.com/motion/)
- [React icons](https://react-icons.netlify.com/)
- [React Hot Toast](https://react-hot-toast.com/)
- More...
## Requirements
- Basic ReactJs knowledge
- Basic HTML, CSS knowledge
## Starter files
You can find all the starter files in `starter-files` branch. You can go to the `starter-files` branch and `download zip` the starter files or You can clone the project and git checkout to `starter-files` branch.
## Getting Started
The recommended way to get started with the project is to follow the [YouTube tutorial](https://youtu.be/W0Uf_xu350k). You will find all the step-by-step guides. Or you can start the project on your own by following the guide below.
After getting the starter files, you need to go the file directory and run
```shell
npm install
```
and after that start the dev server.
```shell
npm start
```
## Tools Used
1. Favicon: [Flaticon.com](https://www.flaticon.com/)
1. Code Editor: [VS Code](https://code.visualstudio.com/)
## Other projects
📚 [All Web Cifar Project Tutorials](https://github.com/ShaifArfan/wc-project-tutorials)
---
## FAQ
### Q: How can i get started?
You can get started by following the [YouTube tutorial](https://youtu.be/W0Uf_xu350k) of this project. Here is the full tutorial video link: [coming soon].
### Q: What i need to start the project?
Just open your favorite code editor and follow along with the [YouTube tutorial](https://youtu.be/W0Uf_xu350k).
### Q: What are the prerequisites?
basics of html, css, javascript and some basic knowledge of react is enough to start this project. Rest you will learn in the tutorial.
### Q: Who the project is for?
The project is for the people who wanna get more skilled in `ReactJs`.
---
## Feedback
If you have any feedback, please reach out to us at [@web_cifar](http://instagram.com/web_cifar)
## Support
For support, join our [Community Group](http://facebook.com/groups/webcifar).
## License
[MIT](https://choosealicense.com/licenses/mit/)
Happy Coding! 🚀