React TS Game Hub

A web application built with React, TypeScript, and Chakra UI, to display information about games.

Features

• Display information about games, including their names, release dates, and ratings.
• Allow users to filter and sort games by different criteria.
• Use React Query to fetch data from the RAWG API.
• Use Chakra UI to style the application.

How to use

1. Clone the repository and navigate to the root directory.
2. Run npm install to install the dependencies.
3. Run npm run dev to start the development server.
4. Open a web browser and navigate to http://localhost:3000/.

API

The application uses the RAWG API to fetch data about games. The API is queried using the axios library.

Components

The application is built using the following components:

• GameCard: A component that displays information about a game, including its name, release date, and rating.
• GameCardContainer: A component that displays a list of GameCard components.
• Filters: A component that allows users to filter and sort games by different criteria.
• PlatformFilter: A component that allows users to filter games by platform.
• SortFilter: A component that allows users to sort games by different criteria.
• SortDirectionFilter: A component that allows users to sort games in ascending or descending order.

Hooks

The application uses the following hooks:

• useGamesQuery: A hook that fetches data about games from the RAWG API.
• useGenresQuery: A hook that fetches data about genres from the RAWG API.
• usePlatformsQuery: A hook that fetches data about platforms from the RAWG API.
• useGameQuery: A hook that fetches data about a single game from the RAWG API.
• useGameTrailersQuery: A hook that fetches data about game trailers from the RAWG API.
• useGameScreenshotsQuery: A hook that fetches data about game screenshots from the RAWG API.

Technologies Used

The application uses the following technologies:

• React: A JavaScript library for building user interfaces.
• TypeScript: A statically typed, object-oriented programming language.
• Chakra UI: A component library for building user interfaces.
• React Query: A library for managing data fetching in React applications.
• Axios: A library for making HTTP requests.
• React Icons: A library for using icons in React applications.
• React Router: A library for managing client-side routing in React applications.
• MS: A library for working with time intervals.
• Vite: A development server for building React applications.
• Zustand: A lightweight state management library that provides a simple and scalable way to manage global state without the need for context providers.

Set up your .env file

Before running the app, you need to modify your .env file to include your api key from RAWG.

This project uses Vite. To allow the client-side code to access the RAWG API key, create a .env file at the project root and include the key with a VITE_ prefix.

Example .env (development):

VITE_RAWG_KEY='your_rawg_api_key_here'

Notes and security:

• Vite only exposes environment variables to client code when they are prefixed with VITE_. That's why the key must be named VITE_RAWG_KEY.
• Any VITE_ variables are embedded into the client bundle and therefore visible to anyone who inspects the app; do NOT store secrets you consider private in these variables for production.
• For production or sensitive use, proxy RAWG requests through a backend server (so the real key stays on the server), or use server-side environment variables.
• After changing .env, restart the dev server so Vite picks up the new values.

Optional: add an .env.example (without the real key) to the repo so collaborators know what to add. Example:

# .env.example
VITE_RAWG_KEY='REPLACE_WITH_YOUR_KEY'

How to verify:

1. Start the dev server: npm run dev.
2. Open the browser console or the terminal where Vite runs — you should not see errors related to the API key.
3. If you added a console.log in src/services/api.ts, you can verify the key prints there (only for local debugging).

If you want, I can help add an .env.example file and a short script to validate that VITE_RAWG_KEY is present at startup.