This is a solution to the Todo app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
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
- Solution URL: https://github.com/wahabshaikh/todo-app
- Live Site URL: https://todo-app-wahabshaikh.vercel.app
Perhaps, the biggest lesson that I learnt is small wins matter! I used to drop working on personal projects if I could not finish it in one go, or if I got stuck somewhere. Basically, the change in mindset helped a lot to complete this one. I tackled one feature at a time (have a look at the commits and you'll understand 😉). Public commitment on Twitter also helped!
On the coding front, this was a good practice to test my React and Tailwind CSS skills. First time, I actually used the drag and drop feature. Practiced the JAMstack architecture.
- Code Refactoring: Spaghetti code all around this project. 😛
- Responsive Design
- Accessibility
- Introduction to the JAMStack course on Frontend Masters - The course that helped me with JAMstack architecture.
- JAMstack Todo App with Gatsby, Netlify Functions and Fauna - The base app this project is inspired from.
- How to Add Drag and Drop in React with React Beautiful DnD - Helped me implement the Drag and Drop functionality with ease.
- Website - Wahab Shaikh
- Frontend Mentor - @wahabshaikh
- Twitter - @wahabshaikh_