https://github.com/codewithalamin/react-todo-app
Interactive Todo App built with React and Redux Toolkit.
https://github.com/codewithalamin/react-todo-app
frontend-mentor reactjs to-do-list-app todo-app todoapp todolist
Last synced: about 2 months ago
JSON representation
Interactive Todo App built with React and Redux Toolkit.
- Host: GitHub
- URL: https://github.com/codewithalamin/react-todo-app
- Owner: CodeWithAlamin
- License: mit
- Created: 2023-10-08T09:49:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-04T13:33:28.000Z (11 months ago)
- Last Synced: 2024-10-30T10:38:30.257Z (8 months ago)
- Topics: frontend-mentor, reactjs, to-do-list-app, todo-app, todoapp, todolist
- Language: JavaScript
- Homepage: https://todo-app-codepapa360.vercel.app
- Size: 689 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Todo app
Challenge from [Frontend Mentor](https://www.frontendmentor.io/challenges)
[🚀Live Site](https://todo-app-alamin.vercel.app)
||
[💡Frontend Mentor](https://www.frontendmentor.io/solutions/todo-app-with-react-and-redux-toolkit-S6OHXSKJQi)
## Key Features
Users should be able to:
- Add new todos to the list
- Mark todos as complete
- Delete todos from the list
- Filter by all/active/complete todos
- Clear all completed todos
- Toggle light and dark mode
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
**Bonus Feature:**
- **Data Persistence:** Implemented local storage functionality to ensure that user data is saved, even after a page refresh.
## Continued development
- Drag and drop to reorder items on the list
## Built with
- React
- Redux Toolkit
- CSS
- HTML5
- Mobile-first workflow
- Vite
## What I Learned
In the process of building my first React project, I gained valuable insights and skills:
- **React Fundamentals:** I grasped the fundamental concepts of React, such as components, state, and props, which formed the backbone of my application.
- **State Management:** I explored state management in React using Redux Toolkit, enabling me to efficiently manage and update the application's data.
- **Modular CSS:** I adopted modular CSS, a new approach that allowed me to create well-structured and maintainable styles for my components, enhancing code organization and reusability.
- **UI/UX Design:** I ventured into UI/UX design principles, striving to create an intuitive and visually appealing interface for the app.
Building this Todo app marked a significant step in my React journey, and I'm excited to continue learning and applying my newfound knowledge to future endeavors.
## Installation
- Clone this repo:
```sh
git clone https://github.com/CodeWithAlamin/React-Todo-App.git
```
- Install dependencies:
```sh
npm install
```
- Build command:
```sh
npm run build
```
- Live server:
```sh
npm run dev
```
## Author
👤 Alamin
- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)
- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)
- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)
- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)
Feel free to contact me with any questions or feedback!
## Acknowledgments
This project was inspired by the "Todo App" challenge from Frontend Mentor. Special thanks to Frontend Mentor for providing the design and specifications for this project.
## License
This project is licensed under the [MIT](./LICENSE.md) License - see the LICENSE file for details.