SideQuest Game Hub

Category Full-Stack / Game Hub

Stack React, Phaser, Firebase, Netlify

Focus Playable UI, Game State, Auth, Leaderboards

Live Link sidequest.dseikou.co.za

Project Overview

A mini arcade built into the portfolio experience.

SideQuest is a custom-built, hyper-casual game hub that turns portfolio browsing into something playful. It centralizes small arcade-style games inside one branded web experience, using familiar mechanics, lightweight interaction loops, and a pixel-inspired interface.

SideQuest Game Hub pixel-style cover visual

SideQuest is a custom-built, hyper-casual game hub hosted at sidequest.dseikou.co.za. It was created as a playful extension of the D’SEIKOU portfolio: a small arcade that lets visitors take a break from scrolling and experience an interactive side of the brand.

The concept came from a very real creative problem: designers, developers, and multi-hyphenates are always doing side quests while trying to finish their main portfolio. Instead of fighting that habit, I turned it into the product idea. The result is a mini game hub that feels self-aware, useful for engagement, and aligned with my personality as a designer-developer.

Technically, the project combines React for the overarching interface, routing, reusable UI, and state handling, with Phaser for game-engine mechanics where canvas-based gameplay is needed. The wider system also uses Firebase-style thinking for user sessions, saved scores, personal bests, and leaderboard behaviour, then deploys through Netlify for fast web access.

The platform is designed to feel lightweight but complete: game cards, player identity, score submission, leaderboard logic, personal best tracking, and a visual design system that makes every screen feel like it belongs inside the same arcade.

Core idea: a branded arcade that extends the portfolio beyond static case studies.
Interaction layer: playable hyper-casual games with simple rules, quick rounds, and clear feedback.
System layer: reusable game cards, score handling, profile context, and leaderboard-ready structures.
Brand layer: retro pixel art language, custom icons, and a bold red, cream, and black palette.

React

Phaser

Firebase

Netlify

Game State

Leaderboards

Pixel UI

Responsive UX

Game Roster

Classic mechanics, rebuilt as a branded arcade layer.

The hub is structured around familiar retro-style games that users instantly understand, which keeps the learning curve low and the interaction loop fast.

1

Flappy Bird

A timing and rhythm challenge where the player navigates through obstacles and chases a higher score.

2

Snake

A classic grid-based arcade game that tests spatial planning, movement control, and survival.

3

2048

A number-combining puzzle game that brings slower strategy into the arcade mix.

Visual System

Retro pixel energy, but treated like a real interface system.

The aesthetic leans into nostalgia without becoming messy: crisp icon rules, limited colour, strong contrast, and readable UI hierarchy.

SideQuest game roster visual — The game roster gives the hub a clear arcade structure while leaving room for future games.

SideQuest architecture visual — React handles the app shell and UI state, while Phaser supports game-engine behaviour for playable canvas games.

SideQuest leaderboard visual — Leaderboards and personal bests add replay value beyond the first interaction.

Build Notes

What I focused on while building it.

Playable First

The project needed to feel like a real arcade, not a decorative portfolio gimmick. Each game has to be quick to understand, easy to restart, and satisfying enough to replay.

8x8 Icon Logic

The custom pixel icons are built around an 8x8 logical grid so they stay crisp, readable, and consistent even when scaled down inside buttons or cards.

Score Motivation

Leaderboards, saved bests, and streak-like mechanics make the experience feel persistent, giving users a reason to come back instead of playing once and leaving.

React App Shell

React controls the overall structure: navigation, game cards, user-facing UI states, profile surfaces, and reusable layout pieces across the hub.

Phaser Game Layer

Phaser handles game-specific mechanics where the project needs canvas rendering, collision, movement, scoring loops, and responsive game scenes.

Firebase-Ready Logic

The system is designed around authentication, personal bests, score saving, and leaderboard behaviour so the arcade feels persistent and competitive.

Netlify Deployment

The hub is configured for web deployment on Netlify, making the arcade accessible as its own live subdomain connected to the main portfolio ecosystem.

Play the side quest, then come back to the main quest.

SideQuest extends the portfolio into a playable space, showing how interface design, development, and brand personality can work together.

Play SideQuest