KCC Web App + Android Admin App
Eliminating Admin Fatigue through a Strava-Integrated Design Ecosystem
Vibe coding
ai design
app development
Context
This project was born out of a local cycling community in Malappuram, Kerala. What began as a simple observation during a weekend ride evolved into a comprehensive digital ecosystem designed to streamline community engagement and administrative workflows for a high-activity cycling club.
The Problem
Club admins were spending hours every week on a repetitive, low-value loop:
Manually screenshotting Strava leaderboards.
Importing data into Canva.
Manually typesetting the "Top 3 Achievers" posters.
Distributing static images via WhatsApp.
The Goal: Build a "Zero-Touch" system where data flows directly from the strava to a branded social asset.
The Solution
The Design-to-Code Workflow (The "Edge")
As a designer, I utilized an advanced AI-assisted workflow to bridge the gap between high-fidelity UI and production code:
System Foundation: Used Google Stitch to generate core UI logic and Design System tokens.
Figma Integration: Exported layouts to Figma to refine the Material 3 tokenization.
Claude Code + Figma MCP: Connected Claude Code directly to my Figma files. This allowed me to "vibe code" the Next.js frontend by referencing design specs in real-time, significantly accelerating the build-to-test cycle.
The "Poster Designer" Feature
The "Hero" feature of the admin dashboard is the Dynamic Poster Generator.
No more Canva: Admins select a template.
Live Data: The system pulls the top 3 riders directly from the DB.
Instant Sharing: Posters are rendered and ready for WhatsApp distribution in one click.
Impact & Current Status
Efficiency: Reduced weekly leaderboard reporting time from ~60 minutes to 0 minutes of manual effort.
Status: Currently in Beta testing with official club members.
Roadmap: Full production launch scheduled to coincide with the Official Club Jersey Reveal next month.
Casestudy - WIP 🔜
