GameVault
Game catalog platform for Indonesian gamer community
Overview
GameVault is a modern, premium web-based game catalog platform designed for the Indonesian gamer community. Built as part of the Ariverse Studio Front End Developer Internship 2026 Technical Test, this MVP emphasizes a flawless, responsive frontend experience with fluid animations and a highly polished user interface. The platform serves as an interactive hub where users can discover new games, explore comprehensive game details with full metadata, curate a personal wishlist with local persistence, and enjoy premium gaming aesthetics with dark/light mode support.
Problems
Building premium UI within an MVP scope
The technical test required a game catalog platform that feels premium and polished despite being an MVP. Every interaction — from hover effects to page transitions — needed to convey a high-quality gaming experience without a backend or real data source.
No backend — managing state and data client-side
Without a dedicated backend, all game data, wishlist state, and filtering logic had to be handled entirely on the client. This required careful architecture for data persistence (localStorage), search/filter performance, and state synchronization across routes.
URL-synchronized filters with deep linking
Filters and search state needed to synchronize with URL parameters so users could share specific filtered views and use browser back/forward navigation. This required bidirectional sync between URL search params and UI filter components.
Accessibility and theme support in a gaming context
The platform needed dark/light mode, custom cursors, and gaming-themed aesthetics while maintaining keyboard navigation, ARIA labels, semantic HTML, and screen reader accessibility — balancing premium visuals with inclusive design.
Solutions
Static JSON datasource with localStorage persistence
Used a static games.json file with 30+ entries as the data source for blazing-fast performance. Wishlist state is managed via React Context and synchronized with localStorage for persistence across sessions without a backend.
URL-synchronized filtering with debounced search
All filter, search, and sort states are managed via URL Search Parameters enabling deep linking and browser history navigation. Debounced search prevents excessive re-renders while maintaining instantaneous feedback for client-side filtering.
Polished UI with skeleton loaders and empty states
Implemented detailed skeleton loaders for grid and detail views, high-quality empty states for zero search results and empty wishlists, and a custom 404 page — all themed to match the gaming aesthetic.
Dark/light mode with accessible gaming aesthetics
Full theme toggle with seamless CSS variable transitions. Custom cursor system enhances the gaming feel while ARIA labels, semantic HTML, keyboard navigation, and focus management ensure accessibility compliance.
Contributions
Developed the complete Next.js 15 application from scratch — Home, Discovery, Detail, Wishlist, and 404 pages with App Router architecture
Built the dynamic Hero Banner with auto-playing featured game highlights and a responsive featured game grid on the homepage
Implemented the advanced Discovery page with debounced search, multi-select category filters (Genre, Platform, Price, Rating), and sorting (Newest, Rating, Price) all synchronized with URL parameters
Created the interactive Lightbox gallery for game screenshots with full-screen overlay, keyboard navigation, and touch/swipe support
Built the Wishlist system with React Context + localStorage persistence, enabling add/remove operations and cross-session state retention
Implemented dark/light mode theme toggle with seamless CSS transitions and persisted user preference
Designed and built the custom cursor system for enhanced gaming aesthetics across the entire platform
Added Framer Motion page transitions, hover effects, scale animations, and micro-interactions for a premium feel
Features
Auto-Playing Hero Banner
Dynamic homepage banner showcasing featured games with auto-play transitions and prominent call-to-action
Advanced Filtering & Search
Debounced search, multi-select filters (Genre, Platform, Price, Rating), and sorting — all URL-synchronized for sharing
Game Detail Pages
Comprehensive metadata display including descriptions, genres, platforms, developer info, release dates, and pricing
Interactive Lightbox Gallery
Full-screen screenshot viewer with keyboard navigation, next/previous controls, and smooth transitions
Persistent Wishlist
Add/remove games with localStorage persistence across sessions via React Context state management
Dark/Light Mode
Full theme toggle seamlessly integrated with the design system and persisted user preference
Tech Stack
- Next.js
- TypeScript
- Tailwind CSS
- Framer Motion
- Vitest
Gallery
1 / 7
Results
100% Functional Requirements Met
All required features implemented: hero banner, filtering, search, sorting, pagination, detail pages, wishlist, and 404 page
All Bonus Features Delivered
Dark/light mode, Framer Motion page transitions, hover effects, accessibility, and 12+ unit tests fully implemented
Zero-Dependency Backend
Static JSON datasource + localStorage persistence eliminates backend dependency while maintaining full functionality
True Mobile-First
Seamless adaptation from 320px mobile to 1600px+ ultra-wide with responsive typography and adaptive grids