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.

• Drag and drop to reorder items on the list

• React
• Redux Toolkit
• CSS
• HTML5
• Mobile-first workflow
• Vite

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.

• Clone this repo:

git clone https://github.com/CodePapa360/React-Todo-App.git

• Install dependencies:

npm install

• Build command:

npm run build

• Live server:

npm run dev

👤 Alamin

• Twitter - @CodePapa360
• LinkedIn - @CodePapa360
• Frontend Mentor - @CodePapa360
• Github: @CodePapa360

Feel free to contact me with any questions or feedback!

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.

This project is licensed under the MIT License - see the LICENSE file for details.