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
- Solution URL: frontendmentor.io
- Live Site URL: whoamihealay.github.io/todo-app-react/
- Semantic HTML5 markup
- TailwindCSS
- Mobile-first workflow
- React - JS library
- Redux
- Webpack 5
I re-learned Redux. I unsuccessfully used Redux in another project and used the Context API instead. This time I wanted to use Redux and, what better than a todo app for state management.
let isLoading = status === "loading";
let placeholder = isLoading ? "" : "Create a new Todo...";
let loader = isLoading ? <div>Adding...</div> : null;
Reading through the redux documentation, I discover the isBool syntax and will use it a lot more.
- React Docs
- Redux Docs
- Fireship.io - Awesome Youtube channel. Fireship.io has a "Concept/framework in 100sec" playlist to quickly learn the very basics of a Programming language, framework, or concept. There are also longer videos for more in-depth frontend mini-projects (CSS grid, flex...)
- Brad Taversy - Awesome Youtube Channel and Udemy course on react and the Context library. I followed his React Crash Course and Udemy course on React.
- Kevin Powell - Discovered on FrontendMentor with the partnership on the Space challenge and where my CSS game step up to all new level.
- Google - Last but not least, the ultimate bug solver!
- Website - whoamiandrew.com
- Frontend Mentor - @whoamihealay
- Linkedin - @andrewsouthern01