Frontend Mentor - Todo app

Live link: https://fm-todo-app-phi.vercel.app/

The challenge

The challenge is to build out this todo app and get it looking as close to the design as possible.

• Figma and Sketch files are provided
• There is also a style-guide.md file, which contains information such as color palette and fonts.

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

Installation

This project was bootstrapped with Create React App.

In the project directory, you can run: npm start to run the app in development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Features I added

• Drag and drop to reorder items on the list
• Local storage of todos

Technologies I used

• React with hooks including a custom hook for viewport width
• styled-components
• react-beautiful-dnd library for drag and drop
• Adobe XD for the design files
• PerfectPixel

Learning outcomes

My focus for this project was to:

• One of the overarching lessons for me in developing this app was project structure as it is the most complex React app I've worked on.
• Style a React app with styled-components for the first time.
• Utilized local storage for the first time.
• Implement color themes in a React app for the first time.
• A few things I could improve that I wasn't able to address before submission:
  • The todo items flicker sometimes after dropping them in the drag and drop
  • Improve accessibility practices

My profile at Frontend Mentor

En-Jen