Games-Hub

Description:

This project is a Game Catalog built using Chakra, TypeScript, and React. It allows users to filter games by genre and search for their favorite titles. The project was inspired by the layout of rawg api and was created for the sole purpose of practicing React and TypeScript concepts.

Live Demo

Check out the live demo of Games Hub on Vercel:

API Source:

The project utilizes the rawg API for fetching game data, including details, genres, and more.

Screenshots:

Dark mode:

Details page:

Light mode:

🚀 Technologies

• Axios
• Chakra UI
• Framer Motion
• Ms
• React
• React Infinite Scroll
• React Query
• React Router DOM
• Zustand

☕ How to use

To get started with this project, follow these simple steps:

1. Clone the repository::

git clone https://github.com/felipel7/react-games-catalog.git

2. Navigate to the project directory:

cd react-games-catalog

3. Install dependencies:

yarn

4. Generate a Rawg API key at rawg.io and insert it into the .env file as shown below:

VITE_BASE_URL=https://api.rawg.io/api
VITE_API_KEY=your_api_key_here

5. Run the app:

yarn dev

This will kickstart the development server, and you can access the application at http://localhost:5173.

Made with ♡ by Felipe Silva :)