Spike Series
Eén platform om een heel circuit te draaien.
Regionale VALORANT-circuits voor een Europese organisator: publieke website, beheerportaal en Discord-bot, vanaf nul gebouwd door VentuLabs met dezelfde stack en dezelfde garanties als onze eigen producten.
- 4.839
- automatische tests
- 8
- talen
- 197
- architectuurbeslissingen
- 67
- databasetabellen
- 1.200
- gelijktijdige kijkers, gemeten
In productie op spikeserieseu.es (Opent in een nieuw tabblad)
Eén platform om een heel circuit te draaien
Publieke website voor spelers en kijkers, beheerportaal voor de organisator en een Discord-bot die alles in realtime verbindt.
Complete competitie-engine
Single en double elimination, groepen, Zwitsers systeem, competitie en GSL. Genereert brackets en standen en herberekent ze vanzelf na elke uitslag.
Live map-veto's
Beide captains bannen en kiezen om de beurt maps met een countdown, in realtime en zonder herladen, met de geschiedenis van de serie in beeld.
Check-in en wedstrijdflow
Check-in voor het spelen, verplaatsingen met tijdsloten die captains onderling voorstellen en accepteren, en uitslagen melden per map.
Chat gekoppeld aan Discord
Team- en wedstrijdchat binnen de website, met automatische bewaartermijn, gesynchroniseerd met de Discord-kanalen van het circuit.
Geïntegreerde Discord-bot
Maakt automatisch teamrollen en -kanalen aan en stuurt een direct bericht over wedstrijden, uitslagen en deadlines, in de taal van de gebruiker.
Markt voor teams en spelers
Prikbord waar spelers en teams een oproep plaatsen en een plek vinden voordat de inschrijvingen sluiten.
Inloggen met Discord
Registreren en inloggen met het Discord-account van de speler, naast e-mail en wachtwoord met versleutelde sessie.
Acht talen
Website, portaal en content vertaald naar ES, EN, FR, PT, IT, DE, NL en TR, waarbij elke taal alleen het eigen pakket laadt.
Live scorebord
De score wordt uit de uitzending gelezen om live wedstrijden zonder handmatig ingrijpen bij te werken.
Onderhoud zonder onderbreking
Wordt ingeschakeld vanuit het portaal en bereikt meteen iedereen die aan het browsen is, zonder de pagina te herladen.
Geauditeerde support
Het supportteam kan als een gebruiker inloggen om die te helpen, met een zichtbare melding en volledige logging van de sessie.
Mobile-first ontworpen
Elk scherm wordt eerst bedacht en getest op 390 px breed, van bracket tot chat, voordat het wordt aangepast voor desktop.
Technische architectuur
Dezelfde stack en dezelfde garanties als onze eigen producten: tests, automatische deployment en meerdere organisatoren per instantie vanaf dag één.
Frontend
- Next.js 16 met App Router
- React 19
- TypeScript in strict mode
- Tailwind CSS 4
- 8 talen, elk met een eigen pakket
- Mobile-first, getest op 390 px
Backend
- Server components en API-routes
- Versleutelde sessies en bcrypt
- Validatie met Zod op alles wat data wijzigt
- Live via server-sent events
- CSRF-bescherming en rate limiting
- Inloggen met Discord
Data
- PostgreSQL 16 met Drizzle ORM
- 67 tabellen en 99 migraties
- Isolatie per organisator en per circuit
- Foreign keys met gecontroleerd verwijderen
- Triggers voor wijzigingsdatum
- Geversioneerde SQL-migraties
Competitie-engine
- Pure library, zonder framework of database
- Single en double elimination, Zwitsers systeem, competitie en GSL
- Deterministisch: hetzelfde toernooi geeft dezelfde bracket
- 100 % regeldekking
- Configureerbare standen en tiebreakers
- Alleen de interface en het portaal gebruiken hem
Infrastructuur
- Ubuntu 24.04-server met Node 22
- Nginx en PM2 met meerdere instanties
- Let's Encrypt-certificaten met HSTS
- Deployment vanuit VentuHub met voorafgaande back-up
- Healthcheck en automatische rollback
- 1.200 gelijktijdige kijkers gemeten
Kwaliteit
- 4.141 tests met Vitest in 405 bestanden
- 698 end-to-end-tests met Playwright
- Drie projecten: mobiel Chrome, mobiel Safari en desktop
- Echte Postgres in de tests
- ESLint met kwaliteitsregels en ratchet
- Lighthouse 91, 100, 100 en 100 op mobiel
Duidelijk gescheiden rollen
Een captain kan niet aan een ander team komen. Een scheidsrechter controleert alleen de wedstrijden die aan hem zijn toegewezen.
Admin
Volledige toegang: gebruikers, auditlog, instellingen van de organisator en onderhoud.
Organisatie
Operationeel beheer van circuits, toernooien, inschrijvingen en teams.
Scheidsrechter
Controleert de uitslagen van de toegewezen wedstrijden.
Captain
Het eigen team: selectie, inschrijvingen, check-in, veto's en uitslagen melden.
Speler
Ziet het eigen team en de eigen wedstrijden en bewerkt het eigen profiel.
Niet zomaar een uitslagenwebsite
Engineeringkeuzes die je normaal niet ziet, maar die een live competitie stabiliteit geven.
Competitie-engine als pure library
Geen afhankelijkheid van het framework, de database of de systeemtijd: de tijd wordt geïnjecteerd en de loting gebruikt een seed, zodat hetzelfde toernooi in de tests altijd dezelfde bracket oplevert.
Alleen de actieve taal gaat naar de browser
Elk van de acht talen is een eigen pakket: de server kent de taal al voordat de pagina wordt gerenderd en de client downloadt alleen die ene.
Live wedstrijden zonder herladen
Eén enkele eventstream per tabblad meldt uitslagen, veto's en wijzigingen in de stand zodra ze gebeuren, met automatisch opnieuw verbinden.
Onderhoud zonder iemand halverwege te laten staan
Wordt ingeschakeld vanuit het portaal en bereikt meteen iedereen die aan het browsen is, zonder dat ze hoeven te verversen om het te merken.
Support met volledige traceerbaarheid
Het supportteam kan als een gebruiker inloggen om een incident op te lossen, met een permanente melding op het scherm en een log van wat er is gedaan.
Meerdere organisatoren vanaf dag één
Elke organisator en elk circuit zijn geïsoleerd in de database: dat maakt van het prototype een herhaalbaar product.
Gemeten capaciteit, niet geschat
Loadtests met live wedstrijden: 1.200 gelijktijdige kijkers met responstijden onder 350 ms in het 95e percentiel.
Deployment met automatische rollback
De build wordt apart voorbereid en gaat in één keer de server op; als het opstarten mislukt, keert het systeem vanzelf terug naar de vorige versie.
Duizenden automatische tests
Dekking van de competitie-engine tot de volledige flows van captain en organisator. Elke deployment wordt geblokkeerd als er iets faalt.
- 4.141
- tests met Vitest
- 405
- testbestanden
- 698
- end-to-end-tests
- 3
- projecten: twee mobiel en desktop
Competitie-engine
Brackets voor single en double elimination, Zwitsers systeem, competitie en GSL: correcte byes, stabiele standen en onmogelijke uitslagen die worden geweigerd.
Authenticatie en sessie
Inloggen met e-mail en met Discord, versleutelde sessie, CSRF, limiet op inlogpogingen en auditlog.
Isolatie per organisator
Scheiding per organisator en per circuit, gecontroleerd op query- en databaseniveau.
Wedstrijden en live
Check-in, verplaatsingen, map-veto's, melden en controleren van uitslagen en de live eventstream.
Talen en content
De acht talen laden wat ze moeten laden en niets meer: er wordt getest dat geen enkele client een taal downloadt die niet in gebruik is.
End-to-end, mobile-first
Volledige flows van captain en organisator op echte Chrome, in twee mobiele projecten en één desktopproject, met toegankelijkheidscontroles.
Volledige stack
Hetzelfde criterium als bij onze eigen producten: alleen moderne, onderhouden tools met een actieve community.
- Next.js 16
- React 19
- TypeScript 5
- Tailwind CSS 4
- Node.js 22
- PostgreSQL 16
- Drizzle ORM
- PGlite in de tests
- Versleutelde sessies
- Zod
- discord.js
- Vitest
- Playwright
- ESLint 9
- SQL
- Bash
- Nginx
- PM2
- Ubuntu 24.04
- VentuHub
- Let's Encrypt
Heb je zoiets nodig?
Spike Series is eigen code, op maat gebouwd voor een organisator van VALORANT-circuits: zonder templates, zonder diensten van derden en met dezelfde technische zorgvuldigheid die we in onze eigen producten stoppen.
Terug naar cases