Op maat gemaakte 3D-scènes
Interactieve doeken- en toestelscènes brengen het podiumwerk van de artiest naar het web, met adaptieve rendering en heldere statische weergaven.
Adele Deliss
Een meertalig platform voor een luchtacrobate, waarin op maat gemaakte 3D-scènes samenkomen met een verbonden studiowerkruimte voor lessen, abonnementen en e-mail.
Productontwerp en full-stack-engineering van begin tot eindVAN DIGITAAL PODIUM TOT STUDIOBEHEER
Studiolessen & abonnementen
Wekelijkse lessen, abonnementsplaatsen, aanwezigheidsregistratie en vakantieregels verbinden het leerlingengedeelte met de werkruimte van de artiest.
Ingebouwde Mailroom
Binnenkomende aanvragen, gespreksthreads, bijlagen en antwoorden in de huisstijl worden rechtstreeks vanuit de beheerwerkruimte beheerd.
HOE IK ER GEKOMEN BEN
Internationale optredens. Dagelijks lesgeven.
Evenementenorganisatoren hadden een duidelijke manier nodig om optredens te bekijken en contact op te nemen. Nieuwe leerlingen hadden een laagdrempelige manier nodig om een les aan te vragen, terwijl vaste leerlingen hun lessen en aanwezigheid wilden inzien. Voor Adele betekende het runnen van de studio: overzicht houden over aanvragen, planningen en berichten van leerlingen, zonder de controle over de details te verliezen.
Een expressief podium. Een praktisch studiosysteem.
Ik ontwierp en bouwde de publieke website rond interactieve 3D-acrobatiekscènes en een meertalige presentatie. Daarachter brengen speciale leerling- en beheeromgevingen lesgoedkeuringen, terugkerende lesschema's, abonnementen en studio-e-mail samen in één verbonden systeem.
Productontwerp, frontend- en backend-engineering, plannings- en abonnementslogica, leerling- en beheeromgevingen, e-mailinfrastructuur en op maat gemaakte 3D-scènes — waarbij door de klant aangeleverd artwork werd geïntegreerd in de visuele identiteit.
01 / 04LIVE SITE
AD / Op maat gemaakte 3D-scènes
Op maat gemaakte 3D-scènes
Interactieve doeken- en toestelscènes brengen het podiumwerk van de artiest naar het web, met adaptieve rendering en heldere statische weergaven.
02 / 04PRODUCTBEWIJS
AD / Lesaanvragen & leerlingaccounts
Lesaanvragen & leerlingaccounts
Leerlingen kunnen de beschikbaarheid inzien, lessen aanvragen en in hun eigen accountomgeving hun boekingen en aanwezigheid bijhouden.
Representatieve interface · voorbeeldgegevens
03 / 04PRODUCTBEWIJS
AD / Studiolessen & abonnementen
Studiolessen & abonnementen
Wekelijkse lessen, abonnementsplaatsen, aanwezigheidsregistratie en vakantieregels verbinden het leerlingengedeelte met de werkruimte van de artiest.
Representatieve interface · voorbeeldgegevens
04 / 04PRODUCTBEWIJS
AD / Ingebouwde Mailroom
Ingebouwde Mailroom
Binnenkomende aanvragen, gespreksthreads, bijlagen en antwoorden in de huisstijl worden rechtstreeks vanuit de beheerwerkruimte beheerd.
Representatieve interface · voorbeeldgegevens
PRODUCTBEWIJS
Op maat gemaakte 3D-scènes
Interactieve doeken- en toestelscènes brengen het podiumwerk van de artiest naar het web, met adaptieve rendering en heldere statische weergaven.
Luchtacrobatiek naar het web vertaald.
De uitstraling van de site komt rechtstreeks voort uit luchtacrobatiek: doeken, hoepel, paal en straps worden interactieve 3D-scènes in plaats van een statische fotogalerij. Lichte en donkere thema's en weergaven met verminderde beweging waren vanaf het begin ingebouwd.
Gebouwd rond hoe er in de praktijk les wordt gegeven.
Een eerste lesaanvraag vraagt om goedkeuring van de artiest, terwijl een doorlopend abonnement een vaste plek reserveert in de wekelijkse lessen. Ik heb deze trajecten als afzonderlijke stromen opgezet, waarbij beschikbaarheid, lesgeneratie, capaciteitsgrenzen, aanwezigheid en leerlingaccounts met elkaar zijn verbonden in plaats van elke boeking door hetzelfde generieke formulier te dwingen.
- Aanvraag van de leerling
- Goedkeuring van de artiest
- Bevestigde les
- Wekelijkse lessen
- Concrete lesdatums
- Gereserveerde plaatsen
- Aanwezigheid
Verzoeken kunnen ook worden afgewezen of alternatieve tijden worden ontvangen. Terugkerende abonnementsplaatsen volgen hun eigen reserverings- en aanwezigheidsregels.
Een studio-inbox rechtstreeks in de werkruimte.
Ik heb Mailroom gebouwd zodat aanvragen voor optredens, lesverzoeken en berichten van leerlingen direct naast het lesschema kunnen worden beheerd. Het brengt inkomende e-mail, gespreksthreads, zoekfunctionaliteit, bijlagen en antwoorden in de huisstijl samen in de beheerwerkruimte.
- Inkomende e-mail
- Ruwe mail & thread
- Veilige lezer
- Antwoord verzonden
Heldere bedrijfsregels. Zuivere infrastructuurgrenzen.
De publieke website, het leerlingengedeelte en de beheerwerkruimte communiceren met elkaar via type-safe servicecontracten. Doordat de studioregels gescheiden blijven van database- en e-mailcode, kan de planningslogica lokaal worden getest en betrouwbaar draaien op Cloudflare.
Eén systeem voor podium en studio
Bezoekers kunnen het werk van de artiest ontdekken en optredens of lessen aanvragen, leerlingen beheren hun boekingen in hun eigen account, en Adele beheert lessen, abonnementen, aanwezigheid en e-mail vanaf één centrale plek.
Next.js, React en TypeScript vormen de kern van de applicatie, terwijl Three.js, GSAP en Lenis de interactieve publieke ervaring aandrijven. OpenNext draait de Next.js-app op Cloudflare Workers, met D1 voor records en R2 voor ruwe e-mailopslag. Better Auth verzorgt de leerlingaccounts, Resend verstuurt uitgaande e-mail en Cloudinary levert de media.
Het mooiste aan dit project was het verbinden van twee totaal verschillende kanten: de artiest een expressieve manier geven om haar podiumwerk te tonen, en tegelijkertijd de praktische tools bouwen die het runnen van haar studio elke dag eenvoudiger maken.
Laten we iets bouwen dat ertoe doet.
Een nieuw product. Een beter systeem. Een moeilijk probleem dat de moeite waard is om op te lossen.
[email protected]