Case study
CssHub
CssHub è un'estensione Chrome open source che salva automaticamente le soluzioni CSSBattle direttamente in una repository GitHub sotto il tuo controllo. Elimina il copia-incolla, mantiene il progresso salvato ed è disponibile sul Chrome Web Store.
- Chrome Extension
- TypeScript
- GitHub API
- OAuth
- Manifest V3
Stato
Pubblicato sul Chrome Web Store
Ownership
Solo, end to end
Pubblico
Giocatori CSSBattle
Problema
I giocatori CSSBattle che volevano uno storico GitHub delle soluzioni dovevano copiare il CSS manualmente dopo ogni pass. Il flusso era lento, facile da sbagliare e semplice da abbandonare appena si interrompeva la streak.
Soluzione
CSSHub rileva automaticamente le soluzioni CSSBattle inviate e le committa su GitHub, trasformando ogni challenge completata in cronologia versionata senza copia-incolla extra.
Il mio ruolo
Solo builder su architettura dell'estensione, integrazione GitHub, UX del popup, listing dello store, privacy disclosure e release management.
Stack
8 strumenti
- Chrome Extension MV3
- React
- TypeScript
- Vite
- Zod
- GitHub API
- Vercel
- Upstash Redis
Architettura
Un'estensione Manifest V3 limitata alle pagine di gioco CSSBattle, affiancata da un backend Vercel per GitHub web OAuth così il client secret resta fuori dal dispositivo.
- Content script che rileva le soluzioni inviate su cssbattle.dev
- Service worker che coordina commit automatici tramite GitHub API
- Backend per callback OAuth e scambio token del login GitHub
- OAuth tramite helper leggero, con token mantenuto in session storage sul dispositivo
- Impostazioni e activity log nello storage locale dell'estensione
- TypeScript ovunque, open source su GitHub
Sfide
- GitHub OAuth dentro un'estensione senza esporre token
- Hook DOM affidabili mentre le pagine CSSBattle evolvono
- Review del Chrome Web Store, incluse permission, privacy policy e limited-use disclosure
- Spedire una UX curata in una superficie piccola come un popup
Risultati
- Pubblicato sul Chrome Web Store (v1.0.1)
- Privacy-first, senza analytics e senza storage delle battle lato CssHub
- Dimostra architettura extension, integrazione API e submission allo store
Prossimo case study
Dracania Archives
Web app archiviata per Drakensang Online: database oggetti, strumenti per build e funzionalità community usate da giocatori attivi.