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

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.

🎵 RhythmMech

🎵 RhythmMech

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.

📊 Regression Tester Pro

📊 Regression Tester Pro