Build real-world React projects, from a to-do list and quiz app to weather dashboards and portfolios, while mastering components, state, props, API integration, and assessments at every level.

Become a React Developer

This module takes a project-oriented approach. We'll start by building a “My To-do List” application, using localStorage, useEffect, and useState hooks, as well as setTimeout and nanoid. Then, we will build a “Quiz” application while learning to use the confetti package and ternary operator. Next, we’ll cover the fetch API and build the “Pretty Sunny” project. Next, we’ll create the “Asia Explorer” memory game, creating catchy effects by dynamically adding class names. Then, we will implement a “Personal Portfolio” application. Finally, we will create a “GitHub Readme” profile to help us showcase our projects on GitHub.

Building Real-World Projects with React

## Overview 

The Asia Explorer game will put our muscle memory and luck to the test as we try to remember where the valid flag card is placed.

The game starts with a four-column, three-row card grid turned upside down. The flags of certain Asian countries are depicted on these cards. We flip the two cards simultaneously, keeping them face up if both cards have the same flag image. If they don’t, the cards flip back again, and our `Turns` increase by one.

The player who correctly guesses all cards in the least number of turns wins. After guessing the last card, we can click the `New Game` button, which reshuffles all the cards and resets the `Turns` to zero.

This is how our final app will look. You can experiment with it and explore the app’s features below:


# Overview 

The Asia Explorer game will put our muscle memory and luck to the test as we try to remember where the valid flag card is placed.

The game starts with a four-column, three-row card grid turned upside down. The flags of certain Asian countries are depicted on these cards. We flip the two cards simultaneously, keeping them face up if both cards have the same flag image. If they don’t, the cards flip back again, and our `Turns` increase by one.

The player who correctly guesses all cards in the least number of turns wins. After guessing the last card, we can click the `New Game` button, which reshuffles all the cards and resets the `Turns` to zero.

This is how our final app will look. You can experiment with it and explore the app’s features below:


Get a basic overview of how the Asia Explorer project will function.

Overview

Project—My ToDo List

React Fundamental Assessment

Project—JavaScript Quiz

React Beginner Assessment

Project—Pretty Sunny

React Intermediate Assessment

Project—Asia Explorer

Advance Level React Assessment

Project—Personal Portfolio

React Final Assessment

GitHub Readme Profile

Conclusion

Asia Explorer

Overview