Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/bikramai/react-game-hub-app

Built an app for discovering video games. Features and UI patterns you would expect from a modern app, toggle with the dark and light modes, search for games, filter by genre, platform. As we change filters, the title gets updated dynamically, sort games, load skeletons while fetched from backend.
https://github.com/bikramai/react-game-hub-app

components-library css fetch-api filtering forms handling-events hooks listgroup loading-indicator props react react-dev-tools rendering-lists state-management typescript vanilla-css vite zod

Last synced: 2 months ago
JSON representation

Built an app for discovering video games. Features and UI patterns you would expect from a modern app, toggle with the dark and light modes, search for games, filter by genre, platform. As we change filters, the title gets updated dynamically, sort games, load skeletons while fetched from backend.

Awesome Lists containing this project

README 

        
# React for Beginners



# React-Game-Hub-App ( React + TypeScript )



# Prerequisites



## What you should know to take this Project.



## You should have good understanding of



- HTML

- CSS

- JavaScript



## React:



React is a JavaScript library for building dynamic and Interactive user interfaces. It was created at Facebook in 2011, and is currently the most widely used JavaScript library for frontend development.



## Why React Created?



Well, as we probably know, when a web page loaded in a browser, the browser takes the HTML code and creates a tree like structure called the document object model or the DOM for short. This allows us to use Jasvascript and change the page content in response to user actions.



For Example, we can use JavaScript to hide an element when a button is clicked. This is called vanilla JavaScript, meaning plain JavaScript code without any third party tools. Now, as our applications grow, working with DOM can become quite complex and challenging to manage. This is where react comes into play. With react, we nolonger need to worry about querying and updating DOM elements, instead, we describe a webpage using small reusable components and react will take care of efficiently creating and updating DOM elements. So components help us write reusable, modular and and better organized code



We can build all these components individually, and then combine them to build page. Essentially, a React application is a tree of components with the app being the root, bringing everything together.



# Section-0: Getting Start with React



- What is React

- Setting Up the Development Environment

- Creating a my React App

- How React Works

- React Ecosystem



# Section-1: Building Components



- Building components

- Rendering markup with JSX

- Managing state

- Passing input via props

- Debugging React apps



# Section-2: Styling Components



- Vanilla CSS

- CSS Modules

- CSS-in-JS

- Using CSS Libraries



# Section-3: Managing Component State



- Understand State Hook

- Choosing the State Structure

- Keeping Components Pure

- Understanding the strict Mode

- Updating Objects

- Updating Nested Objects

- Updating Arrays

- Updating Array of Objects

- Updating Arrays

- Updatating Array of Objects

- Simplifying Update Logic with Immer

- Sharing State between Components



Section-4: Building Forms



- Building a Form

- Handling Form Submission

- Accessing Input Fields

- Controlled Components

- Managing Forms with React Hook Form

- Applying Validation

- Schema based Validation with Zod

- Disabling the Submit Button

- Prject-Expenses Tracker

- Building ExpensesList

- Building ExpensesFilter

- Building Expenses Form

- Integrating with React Hook Form and Zod

- Adding an Expense



# Section-5: Connecting to the Backend

- Introduction

- Understanding the Effect Hook

- Effect Dependencies

- Effect Clean Up

- Fetching Data

- Understanding HTTP Requests

- Handling Errors

- Working with Async and Await

- Cancelling a Fetch Request

- Showing a Loading Indicator

- Deleting Data

- Creating Data

- Updating Data

- Extracting a Reusable API Client

- Extracting the User Service

- Creating a Generic HTTP Service

- Creating a Custom Data Fetching Hook



# Project: Building a Video Game Discovery App

- What is Build

  This is a mini version of the ROG website, a popular video game discovery platform.

  We can search for games up here. We can filter them by genre. As the games are 

  loading, we can see loading skeletons. We can also filter by platform, like PC, 

  PlayStation, Xbox, and so on. We can sort the games. So we have several UI patterns 

  you see in modern applications.

  

- Up for  a Chellenge?

- Setting Up the Project

- Installing Chakra UI

- Creating a Respinsive Layout

- Building the Navigation Bar

- Implementing the Dark Mode

- Building the Color Mode Switch

- Fetching the Games

- Note: Secure API Key Mangement 

- Building Game Cards

- Displaying Platform Icons

- Displauing Critic Score

- Getting Optimized Images

- Improving User Experience with Loading Skeletons

- Refactor- Removing Duplicated Stu;es

- Fetching the Genres

- Creating a Generic Data Fetching Hook

- Displaying the Genres

- Showing a spinner

- Filtering Games by Genres

- Highlighting the Selected Genre

- Building Platform Selector

- Filtering Games by Platform

- Refactoring - Extracting a Query Objects

- Building Sort Selector

- Sorting Games

- Handling Games without an Images

- Fixing the Issue with Chakra Menus

- Building Search Input

- Searching Games

- Adding a Dynamic Heading 

- Cleaning Up the Genres

- Cleanig Up the Game Cards

- Addig Emojis

- Shipping Static Data

- Customizing the Chakra Theme

- Refactoring Game Grid

- Building for Production

- Deploying to Vercel