Frontend Mentor - Todo app

This is a solution to the Todo app challenge on Frontend Mentor.

🎯 The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• 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
• Bonus: Drag and drop to reorder items on the list

🛠️ Built with

• React-Vite - JS library
• TypeScript - JavaScript with syntax for types
• Sass - CSS extension language
• react-beautiful-dnd - drag and drop for lists

🚀 How to clone

Clone the project and access its folder.

$ git clone https://github.com/pejamp/todo-app
$ cd todo-app

To run it, follow the steps below:

$ npm install
$ npm run dev

🌐 Project

• Solution URL: Frontend Mentor
• Live Site URL: Todo app

👨‍💻 Author

_{Pedro Rodrigues}

Contact me!