A responsive web app to browse and discover video games with filters, search, and infinite scrolling.
Built to deliver a smooth and engaging user experience while exploring a vast game database.
GameHub is a React + TypeScript web application I built to explore my passion for gaming and to practice building advanced web apps. It fetches real-time game data using the RAWG API and provides dynamic search, filters, and infinite scrolling for a smooth discovery experience. I designed it to be fully responsive, so you can enjoy browsing games on both desktop and mobile seamlessly.
-
🔎 Dynamic search: Quickly find games by name using React Query for optimized API calls
-
🎮 Advanced filters: Filter games by genre, platform, and rating to narrow down results
-
🔄 Infinite scroll: Keep scrolling to load more games without page reloads
-
⚡ Optimized data fetching: TanStack Query caches results to reduce API requests and improve performance
-
📱 Responsive design: Built with Chakra UI to look great on desktop and mobile
- Frontend: React, TypeScript, Vite, Chakra UI
- State Management: Zustand
- Data Fetching: TanStack Query (React Query)
- Routing: React Router
- API: RAWG API
- Node.js >= 18
- npm or yarn
git clone https://github.com/krishna-purohith/gamehub.git
cd gamehub
npm installnpm run dev-
Launch the app locally
-
Search for your favorite games in the search bar
-
Apply filters for genre, platform, or rating to explore games faster
-
Scroll to the bottom to load more games seamlessly — infinite scroll fetches additional results dynamically
Tip: Try combining filters and search for the quickest way to discover hidden gems!
- Live Demo: GameHub
- Code: GitHub Repo
Homepage with search and filters
Game details page with info, screenshots and a video clip
Additional game details and extended screenshots
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Distributed under the MIT License. See LICENSE for more information.
Krishna Purohith