Live link: https://fm-todo-app-phi.vercel.app/
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.mdfile, 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
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.
- Drag and drop to reorder items on the list
- Local storage of todos
- 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
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