📝 todo-app

Todo app challenge from frontendmentor.io. Built in React.js with Tailwindcss.

LINK TO CHALLENGE: https://www.frontendmentor.io/challenges/todo-app-Su1_KokOW

Getting Started

Install dependencies, then run the development server:

npm install
npm run dev

Open http://localhost:3012 with your browser to see the result.

Built with

Project is created with:

• React
• Tailwind CSS
• Netlify (hosting)
• react-beautiful-dnd
• Hero icons

Features

• Add new todos to the list
• Drag and drop to reorder items on the list
• Mark todos as complete
• Delete todo from the list
• Filter by all/active/complete todos
• Clear all completed todos
• Responsive layout
• Toggle light and dark mode

Screenshots

Dark mode

Light mode

Links

• Live Site URL: Todo app challenge

What I learned

• Great project for rehearsing the basics. Enforced knowledge of javascript methods like map, filter, find, some, every etc.
• Practicing responsive design.
• Drag and drop items with the help of react-beautiful-dnd library

Author

• Website - Peter