Your Tech Club
SUCCESVERHALEN

Bar-4-Bar: van tracklink tot festivalpodium

Voor Bar-le-Duc bouwden we Bar-4-Bar: artiesten doen mee met een link naar hun muziek, op een platform waarop elke actie een eigen inrichting krijgt.

Muziekwedstrijd op een campagneplatform voor Bar-le-Duc

Deliverables

  • Campagnesite, van aankondiging tot eindpagina
  • Inzendformulier met tracklinks en socials
  • Campagneplatform voor meerdere acties
  • Beheeromgeving met statistieken en export
  • Leeftijdscontrole en bevestigingsmail
  • Bescherming tegen bots en dubbele inzendingen

Tech stack

  • React en TypeScript
  • Vite en Tailwind CSS
  • Laravel
  • SendGrid
  • Google Tag Manager met Consent Mode

Met Bar-4-Bar zoekt Bar-le-Duc opkomend muziektalent. Artiesten van 18 jaar en ouder kiezen een genre, delen een link naar hun muziek en vertellen in een korte pitch waarom ze erbij horen. Bar-le-Duc kiest er vier uit. Zij krijgen een traject in de studio en een optreden op een festivalpodium van het merk. Your Tech Club bouwde de campagnesite, de beheeromgeving en het platform waar de actie op draait.

Waarom kon het bestaande systeem dit niet?

Voor Bar-le-Duc bouwden we eerder de winactie met codes op de fles. Dat systeem kende één manier van meedoen: een code invullen en direct zien of je wint. Alles zat daarop vastgelegd, van de velden in het formulier tot de regel die bepaalt wie wint.

Bar-4-Bar werkt anders. Er is geen code en geen directe prijs. Artiesten sturen hun muziek in en Bar-le-Duc kiest achteraf. Voor 2026 stonden meer acties gepland, elk met eigen regels. Voor iedere actie een los systeem bouwen betekent steeds opnieuw bouwen, beveiligen en beheren.

Er lag ook een vaste datum: de aanmeldingen moesten op 1 maart 2026 open. Het werk aan de site begon begin februari, dat aan het platform half februari.

Eén platform, elke actie een eigen inrichting

We bouwden het bestaande systeem om tot een platform waarop een actie een instelling is. Beveiliging, opslag en beheer delen alle acties. Wat verschilt, staat in de inrichting.

Wat er in de inrichting van een actie staat

Een actie is op het platform een beschrijving in gewone termen: een naam, een looptijd en een status. Hoe de winnaar wordt bepaald: direct bij deelname, door loting of door het merk zelf. Hoeveel actiecodes iemand invult. En welke velden het formulier heeft, met per veld of het verplicht is, hoe lang het mag zijn en welke keuzes er zijn.

Daarnaast staat erin hoe vaak één e-mailadres mag meedoen, of een telefoonnummer verplicht is en wat er in de bevestigingsmail staat. Uit de velden maakt het platform zelf de controleregels. Een linkveld vraagt om een geldige link en een keuzeveld accepteert alleen de opgegeven keuzes.

Voor Bar-4-Bar komt dat neer op: geen code, geen uploads, selectie door het merk, één inzending per e-mailadres en een verplicht telefoonnummer. Het formulier heeft velden voor vier soorten tracklinks, Instagram en TikTok, de leeftijd, de pitch en het genre.

Dezelfde basis voor de 10K-actie

Op hetzelfde platform is ook de 10K-actie van Bar-le-Duc ingericht. Die werkt heel anders. Deelnemers vullen twee actiecodes in, geven aan welk product ze kochten en waar, en pitchen hun plan. De winnaar komt uit een loting. Voor het platform is dat een andere inrichting, geen ander systeem.

Een bestaande frontend als vertrekpunt

De campagnesite bouwden we op de frontend van een eerdere Bar-le-Duc-actie. Eerst ging eruit wat niet meer paste: de stappen met code-invoer, adres en telefoonverificatie, en de pop-ups voor winnen, verliezen en troostprijzen. Het prijzenoverzicht werd het genre-overzicht. De prijspagina met het codeformulier werd de genrepagina met het inzendformulier.

Wat al werkte, bleef: de kop en de voet van de site, de veelgestelde vragen, de lettertypen en het blauw van Bar-le-Duc. Oude links van de vorige actie sturen door naar de nieuwe pagina's.

Meedoen met een link

In het eerste plan konden artiesten audiobestanden uploaden. De keuze viel uiteindelijk op links. Wie al iets heeft uitgebracht, deelt een link naar Spotify, YouTube of SoundCloud. Wie dat nog niet heeft, deelt een Dropbox-link. Niemand hoeft grote bestanden te uploaden en het platform slaat geen audio op.

Drie schermen van Bar-4-Bar op een telefoon: de genres, de landingspagina en het formulier

Het inzendformulier

Het formulier staat op de pagina van het gekozen genre. Eerst de muziek: vier velden, één per platform, elk met het logo en een voorbeeld van de link. Minstens één is verplicht. Dan minstens één account op Instagram of TikTok. Een link mag, alleen de accountnaam ook: van @artiest maakt de site zelf de link naar het profiel.

Daarna volgen e-mail, naam, telefoonnummer en geboortedatum, en de pitch: "Waarom hoor jij bij Bar4Bar?" in maximaal 180 tekens. Wie jonger is dan 18, kan niet versturen.

Ontbreekt er iets, dan zegt het formulier wat. Heeft een e-mailadres al meegedaan, dan staat dat meteen in beeld.

De genrepagina met het inzendformulier voor tracklinks van Spotify, YouTube, SoundCloud en Dropbox

Wat hebben we gebouwd?

Een site die meegaat met de campagne

Bar-4-Bar loopt langer dan de aanmeldperiode. De site toont het jaar in drie fases: aanmelden in maart en april, van mei tot september het traject met de artiesten en de optredens op festivals, en van oktober tot december een terugblik.

Voor de start stond er een aankondiging met de startdatum. Tijdens de aanmeldperiode liep de hele route: landingspagina, genrekeuze, formulier en bevestiging. Na de sluiting leiden alle adressen naar één eindpagina. Die vulden we daarna aan met de winnaars, hun festivals, een video van een optreden en video's van Instagram.

De campagne in drie fases op een telefoon: de aankondiging, het formulier en de bevestiging

De aankondiging

De aankondiging zegt "Nog even geduld" en noemt de startdatum. Rond de tekst zweven de genres als ronde foto's, met een vinylplaat eronder.

De landingspagina

De landingspagina opent met "BAR4BAR is de next step in jouw muziekcarrière" en een knop om meteen mee te doen. Daaronder volgen de genres, de uitleg in drie stappen, de tijdlijn en de festivals waar gespeeld kan worden, elk met een pop-up met uitleg. De veelgestelde vragen sluiten af.

Bij binnenkomst bevestigen bezoekers dat ze 18 jaar of ouder zijn. Wie aangeeft jonger te zijn, gaat terug naar de site van Bar-le-Duc.

De landingspagina van Bar-4-Bar met de genres in cirkels en een vinylplaat

Zes genres

Artiesten kiezen uit zes genres: Nederlandstalig, Hardstyle, House/Electronic, Techno, HipHop/Urban en Overig. Het ontwerp ging uit van negen, de lijst die Bar-le-Duc goedkeurde telt er zes. Wie nergens in past, kiest Overig.

Het overzicht van de zes genres waaruit een artiest kiest

Na het versturen

Na een geslaagde inzending volgt een bevestiging met confetti en een draaiende vinylplaat. Daar kunnen artiesten hun deelname delen, op een telefoon via het eigen deelmenu, met een aparte route naar Instagram Stories.

Ook krijgt de artiest een bevestigingsmail: de inzending is binnen en doet mee in de selectie. Onder "Wat nu?" staat dat Bar-le-Duc vier artiesten bekendmaakt en hen per mail of telefoon benadert. De tekst van de mail staat in de inrichting van de actie, niet in de code.

De bevestigingspagina na een inzending, met een knop om de deelname te delen

Cookies en metingen

Bar-4-Bar draait onder bar-le-duc.nl. Wie via de site van Bar-le-Duc binnenkomt, heeft daar al een cookiekeuze gemaakt en die neemt de campagnesite over. Wie direct op Bar-4-Bar landt, kiest zelf: alleen noodzakelijk of alles accepteren. Metingen via Google Tag Manager gaan pas aan na toestemming.

Beheer dat zich aanpast aan de actie

Bar-le-Duc bekijkt de inzendingen in één beheeromgeving voor alle acties. Bovenin kies je de actie, daarna zie je alleen wat daarbij hoort. Een actie met genres krijgt een tabblad Genres. Een actie waarin het merk zelf kiest, heeft geen tabblad Prijzen. Kolommen en grafieken voor product en aankoopplek verschijnen alleen bij een actie die daarnaar vraagt.

Voor Bar-4-Bar ziet het team per inzending de tracklinks, de socials, het genre, de leeftijd en de pitch, te sorteren en te filteren. Statistieken tonen de aanmeldingen, de unieke deelnemers en de verdeling over genres en leeftijden.

Een export naar Excel kan ook per periode, met de pitch erbij. Na de start kwamen daar een deelname-ID, datum en tijd en het telefoonnummer bij.

Eerlijk meedoen

Het formulier haalt bij het openen een versleuteld tijdstip op. Wordt het binnen drie seconden verstuurd, of is een verborgen veld ingevuld dat mensen niet zien, dan behandelt het platform de inzending als van een bot. Die krijgt een gewone bevestiging terug, maar de inzending telt niet mee.

Het aantal pogingen per IP-adres is begrensd. Elk e-mailadres doet één keer mee, en varianten van hetzelfde Gmail-adres, met een punt of een plusteken, tellen als hetzelfde adres.

Voor de start ging er een interne beveiligingscontrole over de campagnesite. Daarna verdwenen onder meer de logregels uit de productieversie en staan er geen sourcemaps online.

Wat leverde het op?

De aanmeldingen gingen op 1 maart 2026 open. Uit de inzendingen koos Bar-le-Duc vier artiesten. Op de eindpagina staat per artiest een festival, een datum en een podium van Bar-le-Duc.

Voor elke fase van de campagne was dezelfde site genoeg, van de aankondiging tot de winnaars. Het platform eronder is ook ingericht voor de 10K-actie. Een volgende actie van Bar-le-Duc vraagt om een nieuwe inrichting en nieuwe pagina's, niet om een nieuw systeem.

Vragen of kennismaken

Neem direct contact met ons op. We komen zo snel mogelijk bij je terug

Joey van VlietYassine SeghrouchniHet team op kantoorJe bericht komt bij ons team in Amsterdam binnen.

We nemen zo snel mogelijk contact met je op.

Veelgestelde vragen

Wat is Bar-4-Bar?

Een muziekwedstrijd van Bar-le-Duc voor opkomende artiesten van 18 jaar en ouder. Artiesten kiezen een genre, delen een link naar hun muziek en schrijven een korte pitch. Bar-le-Duc kiest vier artiesten voor een traject in de studio en een optreden op een festivalpodium van het merk.

Wat heeft Your Tech Club voor Bar-4-Bar gebouwd?

De campagnesite met aankondiging, genrekeuze, inzendformulier, bevestiging en eindpagina, de beheeromgeving waarin Bar-le-Duc de inzendingen bekijkt en exporteert, en het campagneplatform in Laravel waar de actie op draait.

Waarom sturen artiesten een link in en geen bestand?

Een link naar Spotify, YouTube, SoundCloud of Dropbox is genoeg om de muziek te beluisteren. Artiesten hoeven dan niets te uploaden en het platform bewaart geen audiobestanden.

Kan hetzelfde platform ook andere acties draaien?

Ja. Op het platform is een actie een inrichting: welke velden het formulier heeft, of er een code nodig is, hoe vaak iemand mag meedoen en hoe de winnaar wordt gekozen. Ook de 10K-actie van Bar-le-Duc is erop ingericht, met actiecodes en een loting.

Hoe voorkom je dubbele of nep-inzendingen?

Met een verborgen veld en een tijdscontrole tegen bots, een limiet op het aantal pogingen per IP-adres en één inzending per e-mailadres. Varianten van hetzelfde Gmail-adres tellen als één adres. De keuze zelf ligt bij Bar-le-Duc, dat alle inzendingen beoordeelt.

Hoe gaat Bar-4-Bar om met cookies?

Metingen staan standaard uit. Wie via bar-le-duc.nl binnenkomt, neemt de cookiekeuze van die site mee. Wie direct op Bar-4-Bar landt, kiest zelf tussen alleen noodzakelijke cookies of alles accepteren.