Frontend Mentor - Todo app solution

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

Table of contents

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

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

Screenshot

Links

• Solution: frontendmentor.io

• Live Site: netlify.app

My process

• Identify Components and structure App
• Working on Mobile design based on design folder - 375px
  • Install preflight.css, install fonts, set Title & favicon , working on resolution >= 375px
• Working on Todo functionality
  • add & delete item, mark as complete, clear completed item, filter by active & complete state
• Working on Light and Dark mode
• Working on Desktop design on design folder - 1440px
• Improving Components and app data flow by useContext
• Adding Drag & Drop to reorder items and animation to components with framer-motion

Built with

• React
• Framer-motion
• Css Module
• Flex, Grid, Custom variable
• Semantic HTML5 markup
• Mobile first workflow

What I learned

In this project I learned how work on:

• Dark & light mode
• Manage state usign useReducer
• Flowing data using useContext
• Drag & drop using framer-motion

Continued development

I think I must work on more logical project like this one to get more comfortable with handling larger project

Useful resources

• CSS Tailwind Preflight - A great CSS reset

• Hooks API Reference

Author

• github - @siavhnz

• Frontend Mentor - @siavhnz

Acknowledgments

Thanks To

Frontendmentor.io - for their Excitement challenges

Perfect Pixel - for such a great extension