Design Engineer

Vortex Arena

Tournament operations suffered from manual spreadsheet brackets, fragmented chat coordination, and slow dispute resolution.

End-to-end
Architecture & solo release
Auto-brackets
Automated progression & dispute triage
100-200ms
Real-time bracket sync latency
The Challenge & Context

Why this platform was created

Tournament operations suffered from manual spreadsheet brackets, fragmented chat coordination, and slow dispute resolution.

Role & Constraints

Design

Designed user flows for players (registration to bracket progression) and administrators (disputes, settings). Created Tailwind design tokens for competitive gaming vibes.

Build

Built with React and Firebase (Firestore, Cloud Functions). Implemented dynamic tournament brackets, real-time client state listeners, and screenshot uploads with verification pipelines.

ReactFirebaseFirestoreTailwind CSSCloud Functions
Key User Journey
01

1-Click Entry

Team selection and automatic seeding into the bracket

02

Match Center

Direct Telegram opponent contact and round stage timer

03

Result Submission

Leg 1 & Leg 2 score entry with compressed photo proof

04

Auto-Advance / Dispute

Instant progression to next round or referee triage

Key Design Solutions & Interfaces

User Problem → UI Solution → Effect

Match Result Submission & Aggregate Tiebreakers

Match score submission modal with aggregate score validation
Zoom
Problem

In two-leg cup fixtures, players struggled to track aggregate scores and frequently disputed when a deciding tiebreaker match was required.

UI Solution

Designed an intelligent score submission dialog that automatically calculates aggregate goals and schedules a Deciding Match when tied.

Effect

Eliminated manual math errors and removed the need for organizer intervention to trigger tiebreaker brackets.

Dispute Triage & Screenshot Evidence

Player dispute reporting panel with screenshot upload
Zoom
Problem

Complaints about opponent no-shows or rule violations flooded Telegram group chats with zero verifiable proof or timestamps.

UI Solution

Engineered an in-context dispute report modal directly on the match card requiring structured violation categories and compressed screenshot proof.

Effect

Transformed chaotic chat arguments into auditable incident tickets linked directly to the match record.

Tournament Director & Centralized Moderation

Tournament Director dashboard with real-time dispute queue
Zoom
Problem

Organizers previously balanced multiple parallel tournaments by constantly juggling spreadsheets, chat groups, and manual bracket drawings.

UI Solution

Built a unified admin console featuring real-time unread complaint badges, fullscreen proof inspection, and 1-click Technical Forfeit (TF) assignment.

Effect

Rapid incident resolution in seconds while keeping player trust and bracket integrity completely intact.

Interface Gallery

Interface States & Views

01/04
Live Tournament Standings & Stage Deadlines
Screen 01Zoom 🔍

Live Tournament Standings & Stage Deadlines

Match Result Submission & Verification Modal
Screen 02Zoom 🔍

Match Result Submission & Verification Modal

Player Complaints & Dispute Resolution Panel
Screen 03Zoom 🔍

Player Complaints & Dispute Resolution Panel

Tournament Admin Center & Stage Configuration
Screen 04Zoom 🔍

Tournament Admin Center & Stage Configuration

Outcome

Built a fully automated tournament platform from scratch for 24-40 players with parallel multi-bracket support. Automated bracket progression and dispute triage minimized manual organizer overhead to exceptional edge cases.

Let's build something great together.

Open to Design Engineer roles and select contract projects. Drop me an email or message on Telegram.

Next Project

YakVdoma