Xlance Collective · Client Project · Feb–Mar 2024
Lango Competition Dashboard
Create a responsive web destination for an inter-school English-speaking competition that could combine event information, stage timing, student and school rankings, participating-school discovery, public school voting, and moderated community comments.
Role
Sole App Developer
Timeline
Feb – Mar 2024
Scope
Web (Flutter Web) + Firebase
Status
Client Delivered
Challenge
Create a responsive web destination for an inter-school English-speaking competition that could combine event information, stage timing, student and school rankings, participating-school discovery, public school voting, and moderated community comments.
Role & Collaboration
I was the sole application developer for this dashboard, working from an existing competition API and backend I did not build. The repository begins with my own project setup, and its entire recorded implementation history is mine.
Solution
I built student and school leaderboards with filters for competition level and several performance measures. I aggregated individual progress into school-level results, implemented searchable school participation and favorite rankings, added Firebase-backed likes and paginated comments, and created a stage countdown, media carousel, floating navigation, and section-aware scrolling.
Technical Contribution
This was my first Flutter web project. I adapted layouts and filter controls across browser widths, handled video autoplay and hosted media, configured web image rendering, optimized scroll performance by reducing expensive visual effects and unnecessary sorting, and managed deployment updates as competition data and stages changed.
- Combined REST-backed competition data with Firebase-powered live comments and school voting
- Multi-dimensional student/school leaderboards with duplicate-data handling and school-level aggregation
- Section-aware floating navigation with active-section detection and smooth scrolling
- Iterative deployment through Firebase Hosting across the competition’s live stages
Outcome
The dashboard shipped from initial setup through Firebase-hosted deployment and several rounds of production-data refinement, delivering live rankings, voting, and comments for the competition’s run. This was my first Flutter web project, and it required more than transferring a mobile layout to the browser — it meant learning browser-specific responsive layout, navigation, and performance concerns from scratch.
This was my first Flutter web project. I built the dashboard from initial setup through Firebase deployment, learning browser-specific responsive layout, navigation, media, performance, and hosting concerns while delivering live competition features.
Tech Stack
Web
Integration
Hosting