Todo app

Challenge from Frontend Mentor

🚀Live Site || 💡Frontend Mentor

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:

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

• Install dependencies:

npm install

• Build command:

npm run build

• Live server:

npm run dev

Author

👤 Alamin

• Twitter - @CodeWithAlamin
• LinkedIn - @CodeWithAlamin
• Frontend Mentor - @CodeWithAlamin
• Github: @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 - see the LICENSE file for details.