Discover, explore, and track your next favorite video game.
Arcadia is a modern video game discovery app built with React 19, Vite, and the RAWG Video Games API.
🌐 Live Demo: arcadia.devxsameer.me
| Home | Game Details |
|---|---|
 |
 |
Arcadia is a production-style video game discovery platform built using modern React architecture principles.
Designed as a production-style frontend application, this project was intentionally taken beyond tutorial scope — with a focus on scalability, maintainability, separation of concerns, and real-world frontend patterns, including feature-based architecture, centralized data fetching, and route-level code splitting.
- Feature-based frontend architecture for scalable growth
- Centralized data fetching with caching & pagination using TanStack Query
- Infinite scrolling with IntersectionObserver
- Persistent client-side state with cross-tab synchronization
- Route-level code splitting and performance-focused UX
- ⚙️ Powered by RAWG API — live video game data
- ♾️ Infinite Scroll for seamless discovery
- 🔍 Smart Search — find any game instantly
- ❤️ Favorites System with persistent storage & cross-tab synchronization
- 🧭 Genre-Based Browsing and curated Discover sections
- 🧩 TanStack React Query for caching, pagination, and request deduplication
- 🪶 Modern UI built with TailwindCSS v4
- 📜 Breadcrumb Navigation and clean route transitions
- 📱 Fully Responsive for all devices
| Category | Tools |
|---|---|
| Architecture | Feature-based frontend architecture |
| Frontend | React 19 + Vite |
| Routing | React Router v7 |
| Data Fetching | @tanstack/react-query |
| State Management | React Context + custom hooks |
| Styling | TailwindCSS v4 + Prettier Plugin |
| Icons | lucide-react |
| API | RAWG.io API |
| Utilities | date-fns, react-masonry-css |
| Deployment | Vercel |
- Adopted feature-based folder structure to improve scalability and maintainability
- Centralized API communication via a reusable API client
- Isolated shared UI and hooks from feature-specific logic
- Used provider composition (
AppProviders) for clean app bootstrapping - Implemented route-level code splitting for performance
This architecture allows features to evolve independently without increasing coupling.
src/
├── app/ # App bootstrap (router, providers)
├── features/ # Feature-based domains (games, genres, favorites)
│ ├── games/
│ │ ├── api/
│ │ ├── components/
│ │ ├── hooks/
│ │ └── pages/
│ ├── genres/
│ ├── favorites/
│ └── discover/
├── layout/ # App shell (Header, Sidebar, ScrollToTop)
├── shared/ # Reusable UI, hooks, and utilities
│ ├── components/
│ ├── hooks/
│ └── utils/
├── lib/ # App-wide infrastructure (API client, env, queryClient)
├── styles/ # Global styles & Tailwind setup
└── main.jsx # Application entry point
git clone https://github.com/devxsameer/arcadia.git
cd arcadiapnpm installVITE_RAWG_KEY = your_rawg_api_key_here;Get your key from RAWG.io
pnpm run devpnpm run buildPowered by React Query’s useInfiniteQuery:
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
useInfiniteQuery({
queryKey: gameKeys.list(params),
queryFn: ({ pageParam = 1 }) =>
fetchGames({ ...params, page: pageParam }),
getNextPageParam: (lastPage, allPages) =>
lastPage.next ? allPages.length + 1 : undefined,
});Query keys are centralized to ensure consistency and predictable cache behavior.
Lightweight local store synchronized across tabs:
| Page | Description |
|---|---|
| Home | Browse trending and top games |
| Discover | Curated sections: This Week, Upcoming, Top Rated, etc. |
| Genres | Explore games by category |
| Favorites | Manage and view favorited games |
| Search | Find games by title |
| Game Details | Full info — ratings, screenshots, genres, and description |
- Built entirely with TailwindCSS v4
- Dark aesthetic, subtle gradients, and modern typography
- Responsive grid via
react-masonry-css - Smooth transitions and hover animations
- Lazy loading for images
Deployed with Vercel
🔗 Live Demo: arcadia.devxsameer.me
- 🎓 The Odin Project — guidance & structure
- 🎮 RAWG.io Api — game data source
- 🧩 lucide-react — icons
Sameer Ali
Frontend Developer | React Enthusiast | Building modern web experiences
If you liked Arcadia, give it a ⭐ on GitHub — it helps support open-source learning and inspires more projects like this!
🎮 “Arcadia — where discovery meets design.”