🎮 Game Hub

A modern, responsive web application for discovering and exploring video games. Built with React, TypeScript, and Chakra UI, Game Hub provides an intuitive interface to browse games, filter by genres and platforms, and view detailed game information.

✨ Features

• Game Discovery: Browse thousands of games with infinite scrolling
• Advanced Filtering: Filter games by genre, platform, and sort options
• Search Functionality: Find specific games with real-time search
• Game Details: View comprehensive game information including:
  • Screenshots and trailers
  • Game descriptions
  • Platform availability
  • Critic scores and ratings
  • Publisher information
• Responsive Design: Optimized for desktop and mobile devices
• Dark/Light Mode: Toggle between color themes
• Performance Optimized: Lazy loading and efficient data fetching

🛠️ Tech Stack

• Frontend Framework: React 18 with TypeScript
• UI Library: Chakra UI
• State Management: Zustand
• Data Fetching: TanStack Query (React Query)
• Routing: React Router DOM
• HTTP Client: Axios
• Build Tool: Vite
• Styling: Emotion (CSS-in-JS)
• Icons: React Icons

🚀 Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn package manager

Installation

1. Clone the repository:

git clone <repository-url>
cd game-hub

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

Build for Production

npm run build

Preview Production Build

npm run preview

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── GameCard.tsx    # Individual game card component
│   ├── GameGrid.tsx    # Grid layout for games
│   ├── GenreList.tsx   # Genre filtering sidebar
│   └── ...
├── entities/           # TypeScript interfaces
│   ├── Game.ts         # Game data structure
│   ├── Genre.ts        # Genre data structure
│   └── ...
├── hooks/              # Custom React hooks
│   ├── useGames.ts     # Games data fetching
│   ├── useGenres.ts    # Genres data fetching
│   └── ...
├── pages/              # Page components
│   ├── HomePage.tsx    # Main games listing page
│   ├── GameDetailPage.tsx # Individual game details
│   └── ...
├── services/           # API and utility services
│   ├── api-client.ts   # HTTP client configuration
│   └── image-url.ts    # Image optimization utilities
├── store.ts            # Global state management
├── theme.ts            # Chakra UI theme configuration
└── routes.tsx          # Application routing

🎯 Key Components

Game Discovery

• GameGrid: Displays games in a responsive grid layout with infinite scrolling
• GameCard: Shows game thumbnail, platforms, critic score, and rating
• GenreList: Sidebar component for filtering games by genre

Filtering & Search

• PlatformSelector: Dropdown to filter games by gaming platform
• SortSelector: Options to sort games by relevance, rating, release date, etc.
• SearchInput: Real-time search functionality

Game Details

• GameDetailPage: Comprehensive game information page
• GameTrailer: Embedded game trailers
• GameScreenShots: Image gallery of game screenshots
• GameAttributes: Platform, genre, and publisher information

🔧 Configuration

API Integration

The application uses the RAWG Video Games Database API. The API client is configured in src/services/api-client.ts.

Theme Customization

UI themes and color schemes can be modified in src/theme.ts. The application supports both dark and light modes.

State Management

Global application state is managed using Zustand in src/store.ts, handling:

• Search queries
• Genre filters
• Platform filters
• Sort preferences

🎨 Design Features

• Responsive Layout: Adapts to different screen sizes using Chakra UI's responsive props
• Skeleton Loading: Smooth loading states while fetching data
• Infinite Scrolling: Seamless browsing experience with automatic content loading
• Image Optimization: Automatic image cropping and optimization for better performance
• Accessibility: Built with accessibility best practices using Chakra UI components

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

🙏 Acknowledgments

• RAWG Video Games Database for providing the games API
• Chakra UI for the component library
• React Icons for the icon set

---

Built with ❤️ using React and TypeScript