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
| Mobile (375px) | Desktop (1440px) |
|---|---|
 |
 |
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- React - JS library
- React Query - For server-side state fetching and caching.
- React Beautiful Dnd - For drag & drop functionality.
- Supabase - For backend
This was a pretty challenging challenge! I learned how to separate fetching logic to a custom hook (useTodos), I also got to use Supabase for the first time which I found to be very interesting, I really like how it gives you access to the full Postgres database without limitations!
Another thing I struggled with at first is the drag and drop ordering of the todo items, which I almost gave on after trying with react-dnd. Luckily, the Slack community didn't fail to provide help! I was recommended to switch to react-beautiful-dnd which I found to be very easy to use, oh and I also like the animation when dragging an item!
- Website - Mohamed ELIDRISSI
- Frontend Mentor - @elidrissidev
- Twitter - @elidrissidev
Thanks to @MikeMT from the Slack community for his time, and to @Chamu for recommending to switch to react-beautiful-dnd for the drag & drop functionality.
This project is licensed under the MIT License.