Menu PLint-sites Webdesign en Webapplicaties
logo PLint-sites

PLint-sites

Webdesign - Webapplicatie klein pijltje

Online sporttoto voor grote wielerrondes

Het Cycling Story Koersspel is een spel waarbij jij ploegleider kunt zijn tijdens een of meerdere grote wielerrondes. Kies jouw 15 renners uit de Tour, Giro of Vuelta en sprokkel punten wanneer zij in een etappe bij de eerste 10 eindigen. Nodig je vrienden uit om ook mee te doen en maak subpools aan om het nog spannender te maken!

Onze rol

  • Idee en functioneel ontwerp
  • Design
  • Webdevelopment
  • Projectmanagement
Homepage van het Cycling Story Koersspel

Idee

Na de Tour de France in 2012 ontstond het idee om ook voor de andere grote wielerrondes een pooltje op te zetten. De webapplicatie werd opgezet en er werd contact gezocht met de jongens achter Cycling Story aangezien zij het wielrennen trouw volgen en elke dag de uitslag online zetten.

In 2013 zijn we begonnen met de eerste editie van het Cycling Story Koersspel. Vervolgens is het Koersspel regelmatig uitgebreid met nieuwe features op basis van de feedback van de gebruikers. Anno 2016 zijn we in de vierde jaargang belandt en hebben we het platform geheel vernieuwd: zowel op technisch vlak als op het gebied van design. Ieder jaar nemen de deelnemersaantallen toe. Met name de Tour de France is populair met ruim tweehonderd deelnemers.

Uitdaging voor de developers

Frontend

Mijn team in het Cycling Story Koersspel

In de week voordat een wielerronde start kunnen geregistreerde deelnemers een ploeg samenstellen. In een handige interface worden alle deelnemende ploegen en renners getoond: De reeds gekozen renners worden uitgelicht en het volledige team staat in een apart blokje overzichtelijk op het scherm. Uiteraard kunnen deelnemers hun team samenstellen op zowel desktop computers als touch devices.

Tijdens de ronde worden iedere dag de uitslagen ingevoerd en worden alle klassementen automatisch geüpdatet. Verschillende statistieken kunnen per deelnemer bekeken worden: Het puntentotaal in een grafiek, de beste renners in een taartdiagram. Daarnaast kan je jouw team vergelijken met dat van een andere deelnemer. Tenslotte kun je zien welke renners je had moeten kiezen voor een maximale score in het spel.

Backend

Puntengrafiek in het Cycling Story Koersspel

De organisatie kan het aantal deelnemers monitoren, gericht e-mails sturen en een nieuwe ronde aanmaken. Met name het bouwen van een gebruiksvriendelijke interface voor het aanmaken van een nieuwe ronde was een uitdaging. Niemand heeft immers zin om handmatig voor elke ronde alle renners opnieuw in te voeren. De interface is daarom in verschillende delen gesplitst. Eerst wordt de algemene ronde informatie toegevoegd, dan de etappes en tenslotte de deelnemende ploegen. Per ploeg kunnen de renners geselecteerd worden via handige interface.

Wanneer de ronde is gestart worden dagelijks de uitslagen ingevoerd. Ook hier wordt weer gewerkt met gebruiksvriendelijke interface om per etappe de renners in de top tien te selecteren. Na het opslaan worden alle uitslagen op de website automatisch bijgewerkt en wordt er een e-mail verstuurd naar alle deelnemers.

Daarnaast is er een eenvoudig CMS ontwikkeld waarin de inhoud van verschillende vaste pagina’s kan worden beheerd. Dit CMS is gekoppeld aan een gebruiksvriendelijke file-upload module zodat afbeeldingen gemakkelijk toegevoegd kunnen worden.

Techniek

Backend

  • Laravel Laravel
  • PHP
  • MySQL

Frontend

  • Javascript
  • LESS LESS
  • HTML5
  • CSS3
  • Bootstrap Bootstrap

Build pipeline

  • Gulp
  • Elixer
  • Browserify Browserify
  • Git
  • Bitbucket

Tools

  • Trello
  • Yammer Yammer
  • Google Analytics

Bekijk deze website op koersspel.cyclingstory.nl.

Reactie van Cycling Story

Pim heeft voor ons een exclusief wielerspel opgezet, waarbij hij zowel de ontwerp- als de ontwikkelingsfase van zowel het spel zelf als de website voor zijn rekening genomen heeft. Het Cycling Story Koersspel is een succes gebleken onder de deelnemers en groeit iedere editie weer. E-mails worden snel beantwoord en eventuele problemen worden snel verholpen. Een goede samenwerking!

Wil jij ook een webapplicatie?

Heb jij ook een fantastisch idee voor een webapplicatie of online platform? Wij bespreken graag vrijblijvend de mogelijkheden met je.