A responsive game discovery app built with React, TypeScript, and Chakra UI. It integrates with the RAWG API to browse games, search titles, filter by genre/platform, sort results, and view game details.
- Browse games in a responsive card grid
- Infinite scrolling on the home feed
- Filter by genre and parent platform
- Sort by multiple RAWG ordering options
- Search from the navbar
- Dark/light color mode toggle
- Game details page with description, metadata, trailer, and screenshots
- React + TypeScript + Vite
- Chakra UI
- TanStack Query (React Query)
- React Router
- Zustand
- Axios
- Install dependencies:
npm install- Create a
.env.localfile in the project root:
VITE_RAWG_KEY=your_rawg_api_key- Start the development server:
npm run dev- Open
http://localhost:5173
To get an API key, create an account at RAWG API Docs.
npm run dev- Start Vite dev servernpm run build- Type-check and build for productionnpm run preview- Preview production build locallynpm run lint- Run ESLintnpm run format- Run Prettier
/- Home page (catalog with filters and infinite scroll)/games/:slug- Game detail page
src/
├── components/
│ ├── common/ # shared UI (navbar, search, loader, etc.)
│ ├── filters/ # genre/platform/sort controls
│ └── game/ # game cards, grid, detail helpers
├── data/ # static bootstrap data (genres, platforms)
├── entities/ # TypeScript entity models
├── hooks/ # query hooks for games, game details, screenshots, trailers
├── pages/ # route pages (layout, home, game detail, error)
├── services/ # API client and image utilities
├── routes.tsx # router definition
├── store.ts # Zustand game query state
└── theme.ts # Chakra theme config
- API base URL is configured in
src/services/api-client.ts. - The API key is passed as the
keyquery param through Axios default params. - React Query Devtools are enabled in development.