A production-ready, full-stack web application featuring real-time analytics, automated content pipelines, and scalable architecture. This project demonstrates specific expertise in Next.js 15 App Router, Server-Side Rendering (SSR), and System Design. It is built to handle high-traffic loads (10k+ concurrent users) with a focus on SEO, performance, and monetization.
- Hybrid Rendering Strategy: Utilizes Server-Side Rendering (SSR) for game pages (SEO) and Client-Side Rendering (CSR) for interactive dashboards, managed via Next.js App Router.
- Database Design: Normalized PostgreSQL schema on Supabase with Row-Level Security (RLS) policies to enforce strict data isolation.
- Edge Optimization: Deployed with automatic edge caching; heavy assets served via global CDN.
- React Optimization: Extensive use of
useMemoanduseCallbackto prevent unnecessary re-renders, along with Zustand for global state persistence.
- Role-Based Access Control (RBAC): Custom middleware protection ensuring strict separation between User and Admin privileges.
- Type-Safe APIs: Server Actions integrated with Zod schema validation to ensure runtime type safety.
- Soft Delete Architecture: Implemented logic to archive games rather than delete them, preserving historical analytics integrity.
- ETL Pipeline: Built a custom ingestion engine to fetch, normalize, and import 3,000+ games from external APIs in bulk.
- Dynamic Metadata: Leverages the Next.js Metadata API to inject SEO tags (Open Graph, Twitter Cards) dynamically from the database at request time.
- Client-Side Caching: Uses LocalStorage for search history to reduce database read costs for guest users.
Focusing on Responsive Design, Theming, and Client Interaction.
A fully responsive interface featuring seamless theme switching.
| Light / Default Theme | Dark / Custom Theme |
|---|---|
 |
 |
| Tech Highlight: Demonstrates mastery of Tailwind CSS configuration and global state management. Ensures consistent design tokens (colors, typography) across the entire application. | Tech Highlight: Highlights attention to User Accessibility and modern UI standards. Implemented via CSS variables to prevent "flash of unstyled content" (FOUC). |
Leveraging Next.js App Router to create a scalable, reusable interface.
| Modular Dashboard Grid | Dynamic Category Navigation |
|---|---|
 |
 |
Tech Highlight: Displays a Component-Based Architecture. The dashboard reuses the same GameCard and Grid components across different data fetches (Featured, Trending), ensuring code maintainability. |
Tech Highlight: Utilizes Next.js Nested Layouts. The Sidebar persists across navigation while the main content area refreshes. The category pages use Dynamic Routing (/category/[slug]) to render content programmatically. |
Features focusing on user retention and browser-level performance.
| Smart Search & Local Caching | Community Engagement |
|---|---|
 |
 |
| Tech Highlight: Implements a Multi-Parameter Search Algorithm (matching tags, names, categories). Uniquely uses LocalStorage to persist search history on the client side, reducing database overhead. | Tech Highlight: A dynamic comments system allowing real-time user feedback. Integrates with the authentication system to verify user identity before posting, ensuring platform safety. |
Handling complex state management and native browser integrations.
| Dynamic Game Instance (Slug-Based) | Native Fullscreen Integration |
|---|---|
 |
 |
The Logic: Content is hydrated via a Dynamic Slug Strategy (/play/[game-id]). The sidebar features a Recommendation Engine that filters games sharing similar tags/categories. |
The Engineering: Direct interaction with the Browser Fullscreen API. The application manages iframe constraints and z-index layering to provide a distraction-free immersive environment. |
Focusing on Data Visualization, ETL Pipelines, and Config Management.
A centralized hub for operational metrics and content management.
| Real-Time Analytics & Oversight |
|---|
 |
| Why it matters: This isn't just a static page; it aggregates live data from the database to visualize user engagement and system health. It demonstrates proficiency in Data Visualization (ApexCharts) and complex SQL aggregation queries via Supabase. |
A custom-built pipeline designed to scale the platform from 10 to 10,000+ games efficiently.
| The Configuration Interface | The Integration Logic in Action |
|---|---|
 |
 |
| The Concept: A dedicated interface for managing third-party feed connections (GamePix, GameMonetize). Shows the ability to build Admin Tools that abstract complex API parameters into a user-friendly UI. | The Engineering: This showcases the Backend Integration logic. The system fetches external JSON feeds, normalizes the disparate data structures into our strict DB schema, handles asset uploads to Supabase Storage, and performs batch insertions—all in a single flow. |
Advanced management systems ensuring data integrity and administrative control.
| Game Availability Manager |
|---|
 |
| The Logic: Implements "Soft Delete" architecture. Instead of permanently deleting records (which breaks data integrity), admins can toggle visibility status. This ensures historical data remains intact for analytics while instantly hiding content from the frontend. |
A Wordpress-style injection system allowing dynamic site modification without code deployments.
| Ad Placement Strategy | Dynamic Script Injection |
|---|---|
 |
 |
| Why it matters: Configurable ad-tech integration. The system conditionally renders ad units based on route and frequency settings stored in the DB, optimizing Core Web Vitals (CLS) by reserving layout space dynamically. | The Engineering: A custom "Hook System" similar to CMS architectures. It parses the DOM structure server-side to identify injection points (anchors), allowing admins to insert third-party scripts/APIs precisely where needed. |
Leveraging Next.js 15's Server-Side generation to maximize search engine visibility.
| Asset Management (Favicons) | Global SEO Configuration |
|---|---|
 |
 |
| Tech Highlight: Bypasses static asset limitations by using Supabase Storage for brand assets. The app dynamically serves these assets across all routes, overriding default Next.js static file serving. | Tech Highlight: Fully utilizes the Next.js generateMetadata API. Site names and descriptions are fetched from the DB at request time and injected into the HTML <head> on the server, ensuring real-time SEO updates without rebuilding the app. |
- Framework: Next.js 15 (App Router, Server/Client Components)
- Library: React 18
- Styling: Tailwind CSS, Radix UI, Shadcn UI
- State: Zustand (Global State), React Hook Form (Forms)
- Database: PostgreSQL (Managed via Supabase)
- Authentication: Supabase Auth (JWT + OAuth/Google)
- Storage: Supabase Storage Buckets (Images/Assets)
- API: RESTful design with Next.js Server Actions
- Deployment: Vercel (CI/CD)
- Validation: Zod Schemas
- Version Control: Git
- Node.js 18+ and npm/yarn
- Supabase account
- Resend API key (Email service)
# Clone repository
git clone [https://github.com/Mohammed6903/GameWeb](https://github.com/Mohammed6903/GameWeb)
cd GameWeb
# Install dependencies
npm install
# Configure environment variables
cp .env.example .env.local
# (Add your Supabase/Resend credentials to .env.local)
# Start development server
npm run dev