Game Hub - Demo

A Modern Gaming Exploration Page

About the Project

Game Hub is a modern web application designed for gamers to explore, search, and filter games seamlessly. The platform features a sleek UI with both dark and light modes, loading skeletons for better user experience, and robust functionality for searching and filtering games.

Features

• Modern UI: Sleek, responsive design with Dark and Light modes.
• Game Exploration: Search and filter games based on different criteria.
• Smooth User Experience: Includes loading skeletons for data fetching and infinite scrolling for game lists.
• State Management: Efficient and lightweight state management using zustand.
• A synchronous Data Fetching: Leveraging @tanstack/react-query and axios for performant API requests.

Technologies Used

• React 18: For building user interfaces.
• TypeScript: For type-safe development.
• Chakra UI: For modern and responsive styling.
• React Query: For data fetching and caching.
• Zustand: For state management.
• Framer Motion: For smooth animations.
• React Icons: For beautiful and scalable icons.
• React Router: For client-side navigation.

How to Use

Prerequisites

1. Ensure you have Node.js installed (version 16 or later).
2. Install npm or yarn for package management.

Installation

Clone the repository:

git clone https://github.com/Sanzi87/game-hub
cd game-hub

Install dependencies:

npm install
# or
yarn install

Running the Development Server

Start the development server locally:

npm run dev
# or
yarn dev

Open http://localhost:3000 in your browser to view the Game Hub.

Building for Production

To build the project for production, run:

npm run build
# or
yarn build

To preview the production build:

npm run start
# or
yarn start

Dependencies

Core

• React 18: Framework for building the UI.

• TypeScript: Ensures type safety.

Styling and Animations

• @chakra-ui/react: Modern component library with Dark/Light mode support.
• framer-motion: Adds smooth animations to the interface.

Data Fetching and State Management

• @tanstack/react-query: For fetching and caching API data.
• axios: For making HTTP requests.
• zustand: Lightweight state management.

Additional Features

• react-icons: Provides beautiful, scalable icons.

License

This project is open-source and available under the MIT License.