Vlaggenschipproject

Valorcy

AI Website Builder SaaS-platform

Valorcy is een compleet SaaS-ecosysteem om websites te bouwen, lanceren en beheren met AI. Het is geen enkele site — het is één product dat wordt geleverd als drie productie-applicaties die een ontwerpsysteem, typedefinities, utilities en authenticatie delen binnen één monorepo.

Productie-applicaties: 3Productie-applicaties
Gedeelde monorepo: 1Gedeelde monorepo
Functiemodules: 40+Functiemodules
Ondersteunde talen: 3Ondersteunde talen

Bezoek live site

Eén product, drie applicaties

Elke applicatie wordt apart gebouwd en uitgerold, maar ze delen dezelfde basis — waardoor ze eruitzien en aanvoelen als één product.

MarketingwebsiteDe publieke voordeur

GebruikersdashboardDe applicatie waarin klanten leven

AdminpaneelHet platform draaiende houden

Gedeelde basisGedeelde monorepo

Eén componentbibliotheek die door alle drie de applicaties wordt gebruikt — een knop, dialoog of datatabel wordt één keer gedefinieerd en gedraagt zich overal identiek
Eén ontwerpsysteem van tokens, typografie en spacing, waardoor de marketingsite, het dashboard en het adminpaneel onmiskenbaar hetzelfde product zijn
Gedeelde TypeScript-types die het databaseschema, de API-contracten en de UI-props overspannen — een schemawijziging verschijnt als compileerfout, niet als runtime-bug
Gedeelde utilities voor formattering, validatie, permissies en datatoegang, wat gedupliceerde logica tussen apps wegneemt
Uniforme authenticatie en sessiebeheer — gebruikers gaan van de marketingsite naar het dashboard zonder tweede login
Gemeenschappelijke architectuur en codestandaarden die drie applicaties reviewbaar en onderhoudbaar houden voor een klein team

Marketingwebsite

De publieke voordeur

Bezoek live site

https://valorcy.com

Doel

Het publieke gezicht van het platform: landingspagina's, prijzen, templategalerij, de showcase van de AI-websitebouwer, blog, documentatie en SEO-gerichte content. Het is het eerste dat een potentiële klant ziet en het toegangspunt tot authenticatie, dus is het afgestemd op snelheid, vindbaarheid en conversie.

Belangrijkste functies

Content & pagina's

Landingspagina's
Prijzen
Templategalerij
AI Website Builder-showcase
Blog
Documentatie

Groei & performance

SEO-gerichte pagina's
Dynamische metadata
Core Web Vitals-optimalisatie
Server-side rendering
Authenticatie-ingang
Responsief ontwerp

Opgeloste uitdagingen

Voorkomen dat rijke animatie en zware visuele content de Core Web Vitals schaden — opgelost door het kritieke pad server-side te renderen en beweging uit te stellen tot na de eerste paint.
Template- en blogcontent indexeerbaar maken terwijl die uit dezelfde database komt waar het dashboard naartoe schrijft, met incrementele statische regeneratie in plaats van een aparte CMS-export.
Een AI-product visueel uitleggen zonder een videozware pagina die seconden laadtijd kost.

Mijn bijdragen

De marketingapplicatie end-to-end gebouwd, van pagina-architectuur tot de laatste animatieslag.
De dynamische metadatalaag geïmplementeerd zodat elke template, prijscategorie en blogpost correcte titels, beschrijvingen en Open Graph-tags meekrijgt.
Core Web Vitals geoptimaliseerd — beeldstrategie, font-loading en render-blokkerend werk — om de site snel te houden op mobiel.
Het authenticatie-toegangspunt gebouwd dat gebruikers met een bestaande sessie doorgeeft aan het dashboard.

Technologieën

Next.jsTypeScriptTailwind CSSFramer MotionSSR / ISR

Gebruikersdashboard

De applicatie waarin klanten leven

Gebruikersdashboard

Doel

De primaire SaaS-applicatie en degene waarmee klanten dagelijks werken. Hier genereren ze een site met AI, bewerken die visueel, beheren content en commerce, koppelen een domein en regelen hun abonnement. Elk ander onderdeel van het product bestaat om te ondersteunen wat hier gebeurt.

Belangrijkste functies

Bouwen

AI Website Builder
Drag & drop-editor
Thema's
Templates
Ontwerpsysteem

Content

CMS
Blogbeheer
Bestandsbeheer
Meertalige ondersteuning

Commerce

Producten
Bestellingen
Analytics

Platform

Websitebeheer
Domeinen
Integraties

Account

Teamleden
Abonnementsbeheer
Facturatie
Instellingen
Authenticatie

Opgeloste uitdagingen

Een drag-and-drop-editor moet responsief blijven terwijl hij een volledige siteboom in het geheugen houdt — opgelost met fijnmazige state-slices en gememoïseerde subbomen, zodat één blokbewerking niet het hele canvas hertekent.
AI-generatie is traag en niet-deterministisch; de interface moest voortgang streamen en bruikbaar blijven in plaats van te blokkeren achter een spinner.
Eén dashboard moet zowel een gebruiker met een eenpagina-portfolio bedienen als een gebruiker met een webshop, bestellingen en een team, zonder dat een van beiden een interface ziet die voor de ander is gebouwd.
Meertalig contentbeheer betekende vertalingen modelleren in de datalaag, niet een taalschakelaar op de UI plakken.

Mijn bijdragen

De kern van de bouwer- en editorervaring gebouwd, inclusief het blokmodel, het drag-and-drop-canvas en de onderliggende eigenschappenpanelen.
De AI-websitegeneratieflow end-to-end geïmplementeerd — promptinterface, streaming feedback en conversie van het AI-antwoord naar bewerkbare blokken.
De CMS-, blog-, product- en bestelmodules ontwikkeld bovenop een gedeeld relationeel schema.
Abonnements-, facturatie- en teamledenbeheer gebouwd, inclusief de plangebaseerde gating die bepaalt welke functies een workspace kan bereiken.
De herbruikbare componentlaag beheerd waaruit dit dashboard is samengesteld — dezelfde laag die het adminpaneel gebruikt.

Technologieën

Next.jsTypeScriptTailwind CSSShadcn UISupabaseDrizzle ORMTanStack Query

Adminpaneel

Het platform draaiende houden

Adminpaneel

Doel

De interne applicatie waarmee de SaaS wordt beheerd: gebruikers en hun abonnementen beheren, plannen definiëren, gepubliceerde websites modereren, templates en content cureren, de AI configureren en bepalen wie binnen het bedrijf wat mag doen.

Belangrijkste functies

Mensen

Gebruikersbeheer
Rollen & permissies
Supporttools

Omzet

Abonnementsbeheer
Planbeheer

Content

Websitemoderatie
CMS-beheer
Blogbeheer
Templatebeheer

Platform

Analytics-dashboard
AI-configuratie
Feature flags
Auditlogs
Instellingen

Opgeloste uitdagingen

Interne tools raken elk record in het systeem, dus toegang moest echt rolgebaseerd zijn — afgedwongen in de datalaag in plaats van door knoppen in de UI te verbergen.
Support moet de workspace van een klant kunnen zien om te helpen, zonder dat dit een ongelogd pad naar privédata wordt — opgelost met begrensde impersonatie en auditlogging.
Wijzigingen in plannen en feature flags werken direct door in het dashboard, wat betekende dat ze als configuratie moesten worden ontworpen die de andere app leest, niet als code-deployments.

Mijn bijdragen

Het adminpaneel gebouwd op de gedeelde componentbibliotheek, zodat het de ontwerptaal van het product erfde in plaats van eruit te zien als een aangeplakte interne tool.
Rollen en permissies geïmplementeerd samen met de auditlogging die elke bevoegde actie vastlegt.
Plan- en abonnementsbeheer ontwikkeld, inclusief het feature-flagsysteem dat het dashboard leest om functionaliteit te gaten.
De moderatie- en templatecuratie-workflows gebouwd waarmee het team gepubliceerde content en de galerij gezond houdt.

Technologieën

Next.jsTypeScriptTailwind CSSShadcn UIPostgreSQLDrizzle ORMRBAC

Wat dit aantoont

Een multi-applicatieproduct ontwerpen en opleveren in plaats van losstaande websites
Een schaalbaar componentsysteem bouwen dat standhoudt over drie zeer verschillende UI's
Features end-to-end bezitten — datamodel, API-laag, interface en afwerking
Marketingwaardige performance en SEO in balans brengen met dashboardwaardige interactiviteit
Werken met rolgebaseerde toegang, facturatie en moderatie — de SaaS-onderdelen die pas op productieschaal zichtbaar worden

Next.jsTypeScriptTailwind CSSShadcn UISupabasePostgreSQLDrizzle ORMFramer MotionTurborepo