GameHub

GameHub is a modern video game discovery platform inspired by real-world gaming marketplaces and browsing experiences. Built with React, TypeScript, and Vite, the application integrates with the RAWG API to deliver rich game data, advanced filtering, responsive layouts, and a smooth user experience across desktop and mobile devices.

Screenshots

Features

• Real-time game search
• Genre filtering
• Platform selection
• Dynamic sorting
• Responsive layouts
• Dark mode support
• Reusable UI architecture
• Optimized API requests

Tech Stack

• React
• TypeScript
• Vite
• Chakra UI
• Axios
• RAWG API
• React Query
• Vercel

The project focuses on scalable frontend architecture, reusable UI components, and efficient data-fetching patterns while showcasing modern React development practices. Users can search games in real time, filter by genres and platforms, sort results dynamically, and explore detailed game information through an intuitive and visually polished interface.

Key highlights include responsive grid layouts, optimized API integration, reusable component patterns, dark mode support, and clean TypeScript-driven code organization designed for maintainability and scalability.

Code Highlight

One of the focuses of this project was creating reusable and scalable data-fetching patterns using React Query and TypeScript.

export const useGames = (
  selectedGenre?: Genre,
  selectedPlatform?: Platform,
  sortOrder?: string,
  searchText?: string
) =>
  useInfiniteQuery<GameResponse>({
    queryKey: [
      "games",
      selectedGenre?.id,
      selectedPlatform?.id,
      sortOrder,
      searchText,
    ],

    queryFn: ({ pageParam = 1 }) =>
      apiClient
        .get("/games", {
          params: {
            genres: selectedGenre?.id,
            parent_platforms: selectedPlatform?.id,
            ordering: sortOrder,
            search: searchText,
            page: pageParam,
          },
        })
        .then((res) => res.data),

    getNextPageParam: (lastPage, allPages) => {
      return lastPage.next ? allPages.length + 1 : undefined;
    },

    staleTime: 1000 * 60 * 5,
  });

Project Structure

src/
 ├── assets/
 ├── components/
 ├── data/
 ├── entities/
 ├── hooks/
 ├── pages/
 ├── services/
 └── stores/

Live Demo
GitHub Repository