CircleOn.me è uno strumento nel browser per studenti-atleti che preparano video di reclutamento. Si incolla un link YouTube o si carica il video della partita, si clicca su sé stessi nelle azioni chiave e si riceve un MP4 con fermo immagine, cerchio animato e musica opzionale. C'è un piano gratuito, e i piani a pagamento passano da Stripe.
Chi lo usa e per cosa
- Un giocatore delle superiori si cerchia nella partita intera, così gli allenatori dei college lo seguono in ogni azione.
- Un genitore trasforma una stagione di partite su YouTube in un breve video di reclutamento, senza pagare un montatore.
- Un allenatore di club con il piano Pro esporta ogni mese le clip di più giocatori.
- I fondatori controllano iscrizioni, ricavi, attribuzione marketing e stato dei rendering nella dashboard di amministrazione.
Come è fatto
- Uno studio nel browser dove si posizionano e ridimensionano i cerchi con un clic su un video YouTube o caricato. Le bozze si salvano in locale e si sincronizzano su Firestore.
- Gli export vengono renderizzati su worker Modal che scaricano il video tramite proxy a rotazione e montano l'MP4 con FFmpeg. I listener di Firestore mostrano lo stato man mano che cambia.
- Le Cloud Functions applicano limiti dei piani, crediti e rimborsi, gestiscono i webhook di Stripe e bloccano chi si registra di nuovo per avere altri export gratuiti.
- Moduli di contenuto tipizzati generano una pagina per ogni sport, ruolo e divisione, pubblicata da CI su Firebase Hosting.
Tecnologie
In numeri
- About 78 Vue components and 29 composables
- 15 Cloud Functions: callables, Stripe webhook, Firestore triggers and scheduled jobs
- 4 plans (Free, Single credit, Plus, Pro) on Stripe subscriptions and one-time credits
- Serverless FFmpeg render pipeline on Modal: freeze-frames, circle overlays, music, watermark
- 81 programmatic SEO pages in the sitemap (sports, positions, divisions, how-to guides)
- Admin dashboard with 5 tabs: users, payments, proxies, growth attribution and activity
- 136 commits, about 78% by us
Website
Video studio
Athlete dashboard
Admin dashboard
Tutte le schermate mostrano dati dimostrativi inventati.