Introduction to Projects

Get an overview of all five React-based projects.

We'll cover the following

What you’ll learn

Let’s go through each project and learn about the topics they’ll cover.

My ToDo List

This ToDo app will allow us to manage a list of tasks. With it, we’ll view a list of tasks and add or delete tasks from the list.

We’ll learn the following main concepts while developing the project:

  • Folder structure: We’ll look at how different files are placed in particular folders.

  • Nanoid: We’ll use a third-party npm package to add unique ids to the key attribute.

  • Local memory storage: We’ll use localStorage to store data in local memory. This retains memory, even if the chrome tab refreshes or closes.

  • Hooks: We’ll use useState to track the state of the component and useEffect for side effects, like making API calls or setTimeout functions.

JavaScript Quiz

This app will test our understanding of JavaScript fundamentals. It consists of 10 questions, each with three options.

  • Folder structure: We’ll look at how different files are placed in particular folders.
  • Confetti: We’ll use a third-party package to show confetti at the end of the quiz if the user scores well.
  • Ternary operator: The ternary operator is a JavaScript operator that takes three operands, rather than the typical one or two. It provides a way to shorten a simple if-else block.

Pretty Sunny

This is a weather app that displays information about a city’s various weather factors and dynamically changes the background color based on the city’s temperature.

We’ll learn the following main concepts while developing the project:

  • Application Programming Interface (API): We’ll use a free weather API provided by the OpenWeather platform to receive the city’s weather data.
  • Dynamic background: We’ll change the background of the ShowWeather component dynamically and add this color to the background property.

Asia Explorer

This is a flip-the-card game that will have images of flags from different countries. We must predict the identical images from the flipped cards in the least number of turns.

We’ll learn the following concepts while doing this project:

  • Import images: We’ll use images of the national flags of Asian countries.
  • Folder structure: We’ll look at how different files are placed in particular folders.
  • Conditional adding: We’ll add className conditionally when the criteria are met to make our Card component flippable.

Personal Portfolio

This project is a personal portfolio that you can attach to your social media account and use to present to recruiters as proof of work.

We’ll create the following components:

  • The About component will give a brief introduction about ourselves.
  • The Skills component will provide a list of all technical skills we have, including knowledge of React, JavaScript, HTML, and so on.
  • The Project component will display the projects we’ve built throughout the course.
  • The Contact component will provide our contact details so that a person can contact us for more information.

GitHub README Profile

This project will help us create a beautiful README profile. This is important because GitHub is an important tool for developers.

  • README Profile Repository: This special repository lets us create the README profile.
  • Introduction: We’ll create a brief introduction about ourselves.
  • Performance graph: We’ll use external links to create the graph for our commits, total PRs, and so on.