Building the Command Center: GrabKey AI Admin Dashboard
Visual Showcase
Click any image to explore the gallery in full screen
About This Project
A production-ready admin dashboard for GrabKey AI — an AI-powered game key price intelligence SaaS platform that aggregates
prices from 50+ retailers with ML-based predictions and deal scoring.
What I Built
Designed and developed a comprehensive 7-page admin Command Center featuring a premium dark gaming aesthetic with
bento-style layouts, glassmorphism effects, and smooth spring-physics animations.
Pages & Features
Overview Dashboard — Real-time KPI cards with sparklines, revenue and traffic area charts, subscription donut charts, live
activity feed, top games leaderboard, and system health monitor with 30-day uptime bar.
Games Management — Dual view modes (table and grid), advanced filtering by platform and genre, deal score badges with tier
colors (Legendary, Excellent, Good), featured hero card, and full pagination.
Deals Management — Animated score rings (0-100), AI recommendation engine (Strong Buy, Buy, Wait, Avoid), 7 color-coded
deal categories, discount distribution breakdowns, and savings calculators.
Store Intelligence — Trust score visualization with animated rings, brand-specific color theming for 15+ stores, official
vs grey market classification, and payment method tracking.
Users Management — Engagement metrics with mini-charts, tier distribution tracking (Free, Pro, Ultimate), user spotlight
cards, and activity monitoring across alerts and wishlists.
Analytics Dashboard — Revenue and growth charts, weekly traffic visualizations, retention rings, MRR tracking with growth
targets, platform distribution donut charts, and metric-toggle leaderboards.
System Settings — Scraper engine configuration with live health monitoring for 15 stores, custom animated toggle switches
for security controls (2FA, rate limiting, maintenance mode), platform stack versions, and danger zone maintenance actions.
Design Highlights
- Bento card layouts with ambient hover glow and glassmorphism
- Framer Motion animations with spring physics
- Recharts data visualization (area, bar, donut, sparklines, ring progress)
- Custom color system — Orange Amber CTAs, Teal for growth, Purple for premium, Gold for legendary
- Outfit and Red Hat Display typography pairing
Tech Stack
Next.js 15 (App Router) · TypeScript · Tailwind CSS · Framer Motion · Recharts · Zustand · Lucide Icons · Sonner Toasts
Tech Stack
Key Highlights
Responsive Design
Pixel-perfect across all devices
High Performance
Optimized for speed
Scalable Architecture
Built for growth
Security First
Enterprise-grade security
Implementation Details
This project was built using modern development practices and industry-standard technologies. The implementation focused on creating a robust, maintainable, and scalable solution that meets current business needs while allowing for future growth.
The architecture emphasizes clean code principles, proper separation of concerns, and comprehensive testing to ensure reliability and performance.
const project = {
name: 'building-the-command-center-grabkey-ai-admin-dashboard',
status: 'completed',
quality: 'production-ready'
};
Project Details
Enjoyed this project breakdown?
A coffee fuels more open-source work, tutorials, and detailed case studies like this one.
Like What You See?
Check out more projects or let's discuss how I can bring your vision to life with the same attention to detail.
