FRONTEND MENTOR - TODO APP SOLUTION

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.

Table of contents

• 📖 Overview
  • 🧠 The challenge
  • 📸 Screenshot
  • 🔗 Links
• ♻ My process
  • 🛠 Built with
  • 🧐 What I learned
  • ⏩ Continued development
  • 📚 Useful resources
• 👤 Author
• 🙏 Acknowledgments

📖 Overview

🧠 The challenge

Users should be able to:

• View the optimal layout for the app depending on the 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

📸 Screenshot

🔗 Links

• Solution URL: Github Repo
• Live Site URL: Todo App Live

♻ My process

🛠 Built with

• Semantic HTML5 markup
• CSS custom properties
• Mobile-first workflow
• Javascript
• Typescript
• React
• Tailwind CSS
• Express & Node JS

🧐 What I learned

While developing this project, I gained a profound comprehension of prop drilling. Additionally, I improved my understanding of utilizing the useState(), useEffect(), and useMemo() hooks. I also became acquainted with employing ternary operators as conditionals within JSX elements. Moreover, I acquired knowledge about constructing databases for online app hosting, hosting web services, and establishing connections between the database and hosted web services. Below are some blocks of code I am proud of:

This code 👇🏾 was written to implement a background image and color change while switching themes

<div className={`absolute ${darkMode ? "dark-bg-color" : "light-bg-color"}`}>
        {darkMode ? <DarkBackground/> : <LightBackground />}
        <div className="content-container h-screen relative w-auto mx-4 md:mx-8 lg:mx-24 xl:mx-60 -mt-36 md:-mt-48 lg:-mt-32 xl:-mt-48">
</div>

This one 👇🏾 gave me a better understanding of how css position works

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(41, 41, 41, 0.5);
  z-index: 1;
}

.modal-form {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

While this 👇🏾 made me understand useEffect() and exposed me to javascript's window object

const [imageSrc, setImageSrc] = useState('images/bg-desktop-light.jpg');

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 768) {
        setImageSrc('images/bg-mobile-light.jpg');
      } else {
        setImageSrc('images/bg-desktop-light.jpg');
      }
    };

    window.addEventListener('resize', handleResize);
    handleResize();

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

⏩ Continued development

Armed with the limited expertise acquired from undertaking this project, my plan is to develop skills and engage in the following:

• Exploring the implementation of React's useContext() hook to reduce or even eliminate the need for prop drilling.
• Delving into the realm of CSS animations.
• Familiarizing myself with a non-relational database like MongoDB.
• Diving into the utilization of GraphQL.

📚 Useful resources

• Tailwind cheatsheet - This helped me in implementing tailwind commands easily(considering this was my first project using tailwind).
• Dave Gray explaining prop drilling - This was an amazing video that helped me finally understand prop drilling due to its step-by-step approach. I'd recommend it to anyone still learning this concept.
• ExpressJS Middleware - This was an amazing article from WebDev Simplified, a YouTuber. He goes into explaining how to set up an express server and express middleware.

👤 Author

• Website - David Olanrewaju
• Frontend Mentor - @dave-prog
• Twitter - @ola_dayve
• LinkedIn - David Olanrewaju

🙏 Acknowledgments

Special shout out to the internet, for the inexhaustible solutions and resources. And also to the various YouTubers who put in the effort to explain in detail complex concepts in web development.