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.
- Overview
- The challenge
- Screenshot
- Links
- My process
- Built with
- What I learned
- Continued development
- Useful resources
- Author
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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Yarn - Node package manager
- Webpack - Module bundler
- Babel - JS code transpiler
- React - JS library
- React Router Dom - React Library to manage the routes of your App.
- Styled Components - For styles
- Framer Motion - For drag-n-drop animations
- Workbox - For managing the cache and service workers
- Prettier - For code formatting
Building this project helped me learn to use and improve my knowledge of some React and JS tools, such as:
- Styled components and theming.
- Framer motion and drag-n-drop.
- React-router-dom and route management.
- Webpack setup and code optimization.
- Managing my service workers with Workbox.
- Setting up a code formatter.
- Setting up Babel to transpile my React and JS code.
-
I used the components that Framer motion provides (
<Reorder.Group />
and<Reorder.Item />
) to create a list with draggable items. -
Webpack helped me start a development environment with DevServer and create bundles of code which are optimized for a production environment.
-
With Babel I could transpile my JavaScript code that uses new features into code that every browser can understand and run.
-
To manage my service workers, I used Workbox, a set of libraries that google provides to help you covert your apps into PWAs that can be installed like a native app and work even when offline.
-
I used styled components, an amazing CSS-in-JS library that lets you use all the JS features to easily write your style rules.
-
React-router-dom is a React library that provides a set of components to help you create SPAs (single-plage applications) very easily.
-
Implemented the
@media (hover: hover) {}
CSS media query, which is used to detect if the user's device has a cursor, to add hover transitions. -
Instead of using useState to handle my inputs' state, I used useRef because it won't re-render the whole component every time that the input's value change.
-
Theming with styled components - This helped me understand how I could use styled components to easily toggle the app theme.
-
How to integrate Workbox in your React App - These videos were really helpful as they helped me integrate all the workbox libraries into my existing application.
-
An example of a drag-n-drop list using framer motion - This is an example that I found in the documentation of framer motion
- Website - Jose Saúl Guerrero Serrano
- Github - @josesaulguerrero