Frontend Mentor - Todo app solution

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.

But their syle-guide.md file (free version) is not that good, you will just get confused by their limited amount of information you need. 🤣

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

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

Links

• Solution URL: Github Repo
• Live Site URL: Femio Todo App

My process

Built with

• Semantic HTML5 markup
• Flexbox (everywhere)
• Mobile-first workflow
• Vercel - Host your React/Nextjs/Vue/Nuxtjs/Svelte/etc. for freeee
• Vite - JS build tool
• React - JS library
• Tailwindcss - For beautiful & veryveryvery great styling
• react-beautiful-dnd (rbd) - For easy, beautiful, & accessible drag n drop
• Prettier - We know we write messy code, Prettier do the heavy work
• Typescript - Again, we know we write untrusted code, TS do the heavy work
• Jotai - Use Recoil before? Or Redux? Zustand? Or use the context & reducer hooks? Try Jotai 🎉

What I learned

A lot! But, to be add later if I have more time to write 🚀

Some of them are trying drag n drop, Jotai, and Vite for the first time.

It took me ~30 hours over 2 weekends to complete this project with all the experimentations, trial & error, refactoring, and etc.

Continued development

I still curious about the advanced implementation of render function. I use that in this project earlier but refactor it since the implementation of drag n drop feature. It's interesting and definitely love to explore more later.

Useful resources

To be add later, for now take a look at Built with section above

Author

• Website - dioilham.com
• Frontend Mentor - @Milkywayrules
• Github - @Milkywayrules
• Linkedin - @dioilham
• Instagram - @dioilham

Acknowledgments

idk, no one for this project

Screenshots

All of the screenshots are kinda HD, so try the app by yourself instead of waiting forever...

<style type="text/css"> img { width: 300px; } </style>