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
- HTML5 markup
- TailwindCSS and SCSS for dark mode functionality
- TypeScript - Personally call it an add-on JavaScript
- React - JS library
- Firebase - For the Backend
This is my first project with TypeScript and Firebase basically. I learnt a lot working with both technologies, type safety in TypeScript, which makes my code more strict and type safe. I also learned how to use TypeScript in React which was the most interesting part.
I learnt about Firebase's authentication process here. I also explored Firebase Cloudstore, which was the main feature that was the main composition of this project. I learnt about collections and documents and how to update the Firestore database real-time.
I looked forward to building more projects with TypeScript and more Firebase features, and also improve my web accessibility skills. Next project will be built in a Next.js environment. No pun intended, haha
- TypeScript's Documentation - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
- Firebase Documentation - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
- ChatGPT ofcourse!
- Website - Olasunkanmi Balogun
- Frontend Mentor - @SiR-PENt
- Twitter - @SiR_PENtt
I wanna thank me for putting in the work, for not giving up, bla bla... Yeah, that SnoopDogg video