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.
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
- Solution URL: Todo app challenge
- Live Site URL: GitHub Pages
- React - JS library
- React Context. React useState.
- Webpack
- Babel
- SASS & BEM
- Mobile-first workflow
- Progressive Web App
I learned to work with Webpack. I learned to use React Context (provider, consumer), React useState and handle the local storage. I also explored the use of BEM methodology.
For future projects I would like to practice writing comments while writing code because this time I forgot to do it. And I would like to explore the use of React Router for a next project.
- react-beautiful-dnd - This helped me to add the drag and drop feature. I loved this library.
- How to add DRAG and DROP in React using react-beautiful-dnd | Tutorial [english subtitles] - I followed this tutorial to use the library.
- Website - Yess
- Frontend Mentor - @ymbeltran
- Twitter - @ymbeltran
This might sound silly but I want to thank my friend that presented me with this challenge and encourage me to do it. I'm also grateful for Platzi where I've learned a lot. Additionally lots of thank yous to the sunbae (์ ๋ฐฐ) who got me out of some troubles I found while coding.