Projects 🚀

Welcome to our collection of interactive projects and experiments! Each project is containerized and integrated into the dev environment.

Current Projects

🧩 Elemedals

An elemental puzzle game featuring octagonal gems, strategic objectives, and immersive gameplay. Built with modern web technologies and containerized for easy deployment.

Features:

• Match-3 gameplay with elemental themes (Earth, Fire, Water, Light, Dark)
• Octagonal gems with embossed 3D effects and elemental symbols
• Level-based objectives system with random goals
• Strategic power-ups: Landmine, Element Drain, Line Clear, Scramble
• Intelligent board scrambling when no moves are available
• Mobile-responsive design optimized for touchscreen play
• Muted color palette for reduced eye strain
• Combo system with visual feedback

Tech Stack:

• HTML5 Canvas with advanced graphics rendering
• Vanilla JavaScript game engine with object-oriented design
• CSS3 responsive design with mobile-first approach
• Docker + nginx for production deployment
• Traefik SSL integration with automatic certificates

🎮 Match’n Gacha

A professional mobile block-matching puzzle game that combines addictive match-3 mechanics with collectible trading card elements. Where Tetris meets Pokémon in the most satisfying way possible!

Features:

• Grid-based block matching with cascade physics and gravity system
• Multiple match types: lines (3+), squares (4), rectangles (6), and special formations
• Power-up system: Bombs, Rockets, Lightning, and Rainbow blocks
• Collectible system with 6 rarity tiers (Common to Mythic)
• Player-to-player marketplace with trading and auction system
• Modular theme system with hot-swappable visual styles
• Progressive Web App (PWA) optimized for mobile app stores
• Daily challenges and achievement system
• Persistent game state with local storage

Tech Stack:

• Phaser.js 3.70.0 game engine with component architecture
• Mobile-first responsive design with touch optimization
• Service Worker for offline capabilities and PWA features
• Modular asset system with JSON manifests and fallback generation
• Docker + nginx for containerized deployment
• Traefik SSL integration with automatic HTTPS certificates

🎵 RhythmMech

RhythmMech combines anime/kawaii aesthetics with mecha/sci-fi visual elements in an engaging rhythm game experience. Players tap, hold, and drag circular targets synchronized to music, featuring sophisticated scoring systems and combo mechanics.

Features:

• Touch Controls: Optimized tap, hold, and drag mechanics for mobile rhythm gaming
• Anime/Mecha Aesthetic: Deep teals and purples contrasted with pastel pinks, lavenders, and mint greens
• Advanced Scoring: Perfect/Great/Good timing windows with combo multipliers and shield forgiveness system
• Particle Effects: Mecha-styled visual feedback with hexagonal explosions, trails, and glow effects
• PWA Ready: Mobile-optimized with offline capabilities and home screen installation
• Haptic Feedback: Mobile vibration integration for enhanced immersion
• Progressive Difficulty: Multiple difficulty levels per track with adaptive scaling

Visual Design:

• UI Elements: Angular mecha panels, hexagonal shapes, holographic overlays with grid lines and scanning effects
• Color Palette: Deep teals (#2D1B69) and purples with pastel pink (#FFB3E6), lavender (#E6B3FF), and mint green (#B3FFE6) accents
• Typography: Orbitron font with holographic text effects and glowing animations

Tech Stack:

• Canvas Rendering: HTML5 Canvas with smooth 60fps animations and performance optimization
• Audio System: Web Audio API with precise timing, latency compensation, and system offset calibration
• Input Management: Multi-touch support with gesture prevention and touch history tracking
• State Persistence: Player progress and statistics with localStorage integration
• Infrastructure: Docker + nginx with Traefik SSL automation and Let’s Encrypt certificates

🏆 Tournament Manager

A comprehensive tournament management system built for the Playtopia Dev Lab infrastructure. Supports multiple tournament formats, real-time bracket updates, and integrates seamlessly with Authelia for authentication and user management.

Features:

• Multiple Tournament Formats: Single Elimination, Double Elimination, Round Robin, Swiss System
• Real-time Bracket Updates: Live match results and bracket progression via Socket.io
• Role-based Access Control: Admin, Tournament Organizer, and Participant roles with appropriate permissions
• Participant Management: Registration, seeding, and tournament capacity management
• Match Result Processing: Score validation, winner determination, and bracket progression
• Tournament Rules Engine: Customizable rule sets with category organization and priority levels
• User Statistics: Comprehensive performance tracking and historical data
• Mobile Responsive: Optimized for both desktop and mobile tournament management

Tournament Types:

• Single Elimination: Traditional knockout bracket with bye handling
• Double Elimination: Main bracket with losers bracket for second chances
• Round Robin: Everyone plays everyone format for smaller tournaments
• Swiss System: Skill-based pairing system for larger tournaments

Tech Stack:

• Backend: Express.js with TypeScript, comprehensive REST API with validation
• Database: PostgreSQL 16 with Prisma ORM for robust data management
• Frontend: React 18 + TypeScript with Material-UI component library
• Authentication: Authelia ForwardAuth integration with header-based user detection
• Real-time: Socket.io for live tournament updates and bracket changes
• Infrastructure: Docker multi-container setup with Traefik SSL automation

📊 MSR Generator

A comprehensive Monthly Service Review automation tool designed for Nexon-Ausgrid’s reporting workflow. Transforms manual Excel manipulation and PowerPoint creation into a streamlined, automated process with intelligent data processing and editable commentary fields.

Features:

• Automated Excel file parsing and data extraction from RSS, KPI, and outage reports
• Intelligent data processing with trend analysis and comparative metrics
• Interactive dashboard with real-time statistics and activity monitoring
• Drag & drop file upload with progress tracking and automatic categorization
• Editable commentary system with section-based narrative customization
• Multi-format export: PDF reports, PowerPoint presentations, Excel workbooks
• User authentication and role-based access control via Authelia
• Audit logging and compliance tracking for regulatory requirements
• Responsive design optimized for desktop and tablet workflows

Tech Stack:

• Frontend: React 18 + TypeScript + Vite + Tailwind CSS with Nexon branding
• Backend: Node.js + Express + TypeScript with comprehensive API design
• Database: PostgreSQL with Redis caching for optimal performance
• Authentication: Authelia integration with multi-tier access control
• File Processing: Excel parsing, PowerPoint generation, PDF export capabilities
• Infrastructure: Docker Compose + Traefik SSL + Let’s Encrypt automation
• Monitoring: Comprehensive logging and health checks for production reliability

More projects will be added as we continue building and experimenting in the dev labs!

🎮 Match'n Gacha

🎮 Match’n Gacha 🎲 Play Now 🚀 Launch Match'n Gacha Mobile-optimized block-matching puzzle with gacha mechanics Overview Match’n Gacha is a professional-grade mobile block-matching puzzle game that combines addictive match-3 mechanics with collectible trading card elements. Built with modern web technologies, it delivers a polished gaming experience with revolutionary risk/reward psychology. 🎯 Core Game Features Perfect Match-3 Mechanics: Flawless block-matching with zero bugs or crashes Power-up System: Bombs, rockets, and rainbow blocks created from special matches Revolutionary Token Economy: Earn tokens for objectives with persistent storage Double-or-Nothing System: Risk/reward choices after every level completion Smart Difficulty Scaling: Enhanced challenge progression with tougher goals Mobile-First Design: Optimized touch controls and responsive UI Theme System: 3 distinct visual themes (Classic, Neon Cyberpunk, Kawaii) 🎲 Addictive Game Loop Complete Objective → Earn 1 Token + Celebration Choice Modal → “Next Level” (safe) vs “Wager Token” (risky) Wager Path → New objective, same level, remaining moves, 2x reward Success → Double tokens + choice modal again (compound wagering!

🎵 RhythmMech

🎵 RhythmMech 🎵 Play Now 🚀 Launch RhythmMech Anime/Mecha rhythm game with synthesized audio Overview RhythmMech is a professional mobile-first rhythm game with anime/kawaii aesthetic and mecha-inspired visual effects. Built with Phaser.js and featuring a complete synthesized audio system, it delivers an immersive rhythm gaming experience with industrial blast door transitions and advanced note mechanics. 🎮 Core Game Features Complete Audio System: Synthesized background music and sound effects Mobile-First Design: Optimized touch controls and responsive UI Hold Note Mechanics: Long-duration notes with timing precision Industrial Blast Doors: Immersive transition effects between scenes Drag-Scrollable Track Selection: Smooth track browsing interface Custom Laser Sound Effects: Synthetically generated audio feedback Comprehensive Beatmap System: Multiple difficulty levels per track Professional Scoring: Combo system with performance metrics 🎵 Audio System Highlights 3 Background Music Tracks: Industrial, synthwave, and kawaii-style compositions 8 Sound Effects: Perfect, great, good, miss, combo, shield, and UI sounds ADSR Envelope Shaping: Professional attack/decay/sustain/release curves BPM Matching: Music tempo synchronized with track metadata Web Audio API: Low-latency playback for rhythm precision 🏗️ Technical Architecture Technology Stack Component Technology Purpose Game Engine Phaser.

📊 Regression Tester Pro

📊 Regression Tester Pro 🔧 Access Platform 🚀 Launch RTP Platform Full-stack testing template and instance management platform Overview Regression Tester Pro (RTP) is a comprehensive full-stack testing instance management platform that standardizes test case creation across teams. Built with Next.js 14 and Node.js, it provides dynamic testing template creation, systematic test execution tracking, and integrated file attachment management. 🎯 Core Platform Features Testing Template Builder: Create reusable testing templates with dynamic field types Testing Instance Management: Generate testing instances from templates with detailed test steps Step-by-Step Execution: Comprehensive test step tracking with status management File Attachment System: Upload and manage test artifacts via MinIO S3-compatible storage Tag Management: Full CRUD operations for organizing content with visual tag system User Management: Role-based access control (Admin/Manager/User) via Authelia Rich Text Editing: TipTap-powered editor for detailed descriptions and documentation 🔧 Updated Terminology Testing Templates: Reusable form structures for creating testing instances Testing Instances: Individual test cases created from testing templates Test Steps: Granular execution steps with status tracking and results recording 🏗️ Technical Architecture Technology Stack Component Technology Purpose Frontend Next.

🔬 Playtopia Dev Lab

🔬 Playtopia Dev Lab 🏗️ Infrastructure Portal 🚀 Explore Dev Lab Containerized development environment with enterprise-grade security Overview Playtopia Dev Lab is a comprehensive containerized development environment that enables rapid deployment of web services with enterprise-grade security, automatic SSL, and authentication. Built on Docker Compose with Traefik v3.0 and Authelia, it provides a production-ready infrastructure platform for hosting multiple applications under a unified domain. 🏗️ Core Infrastructure Features Automatic SSL Certificates: Let’s Encrypt integration with zero-configuration HTTPS Enterprise Authentication: Authelia with multi-tier access control and session management Reverse Proxy Routing: Traefik v3.