Casestudy · Progressive web app
Pixowall
Ontwerp, bestel en ontvang fotocollages via een slimme web-editor
Achtergrond
De klant
Pixowall is een online platform waarop consumenten fotocollages en posters ontwerpen en bestellen. Het concept combineert creatieve vrijheid met een eenvoudig bestelproces: van foto uploaden tot een afgewerkt product aan de muur. De oprichter zocht een technische partner die een volledig platform kon bouwen, van visuele editor tot bestelafhandeling, met de snelheid en het gevoel van een native app, maar bereikbaar via elke browser.
Uitdaging
De aanleiding
De markt voor fotoproducten is competitief en gedomineerd door grote spelers met logge desktop-applicaties. Pixowall wilde zich onderscheiden met een editor die intuitief werkt op elk apparaat, zonder installatie of download. De uitdaging was drieledig: een visuele editor bouwen die complexe grid-layouts ondersteunt met drag-and-drop, een naadloos bestelproces inclusief betalingen en promotiecodes, en een architectuur die schaalbaar is zonder eigen servers te beheren. Daarnaast moest het platform meertalig zijn en direct beschikbaar voor de Nederlandse en internationale markt.
Aanpak
De oplossing
Appec bouwde een progressive web app met React en TypeScript als frontend en Supabase als serverless backend. De kern is een stapsgewijze wizard die gebruikers begeleidt van instellingen naar layout, bewerking, bestelling en betaling. De flexibele grid-editor laat gebruikers foto’s slepen, schalen, bijsnijden en herschikken in verschillende layouts. Gebruikers kiezen tussen een collage-modus met meerdere tegels of een poster-modus voor een enkel groot beeld. Betalingen verlopen via Stripe met ondersteuning voor promotiecodes en cadeaucodes. Na bestelling wordt de collage als print-ready PDF gegenereerd en automatisch doorgestuurd naar de producent.
React + TypeScript
Supabase backend
TailwindCSS
Drag-and-drop editor
Collage + poster modus
Beeldcompressie
Stripe betalingen
Promotie- en cadeaucodes
PDF export
Meertalig (NL/EN)
Google + Facebook login
Serverless edge functions
Error monitoring
Redux state management
Modules
Wat het platform doet
Van configuratie tot aflevering: het platform begeleidt de gebruiker stap voor stap door het volledige creatieproces, met slimme validatie en real-time feedback.
01
Visuele grid-editor
Een interactieve editor met drag-and-drop waarmee gebruikers foto’s slepen naar een flexibel grid. Elk beeld kan worden bijgesneden, geschaald en gepositioneerd. Layouts zijn aanpasbaar in formaat, verhoudingen en aantal tegels.
02
Collage en poster modus
Gebruikers kiezen tussen een collage met meerdere foto’s in een grid, of een poster-modus voor een enkel groot beeld. Elke modus heeft eigen instellingen voor afmetingen, frames en montagepunten.
03
Slimme beeldverwerking
Foto’s worden automatisch gecomprimeerd voor snelle uploads zonder kwaliteitsverlies. DPI-validatie waarschuwt bij te lage resolutie, zodat het eindresultaat altijd print-ready is.
04
Passwordless login
Gebruikers loggen in via Google of Facebook, zonder wachtwoord aan te maken. Dit verlaagt de drempel en versnelt het bestelproces. De editor-status blijft bewaard na het inloggen.
05
Betalingen en promoties
Stripe verwerkt betalingen veilig en snel. Promotiecodes en cadeaucodes worden automatisch verrekend bij het afrekenen, met ondersteuning voor zowel vaste kortingen als percentages.
06
Geautomatiseerde orderflow
Na betaling wordt de collage als high-resolution PDF gegenereerd en automatisch per e-mail naar de producent gestuurd. De klant ontvangt een bevestiging met een preview van het eindresultaat.
Technologie
Onder de motorkap
De frontend is gebouwd met React en TypeScript, gestyled met TailwindCSS en SASS. Als progressive web app werkt het platform op elk apparaat zonder installatie. De backend draait volledig serverless op Supabase, met edge functions voor orderverwerking, beeldopslag en communicatie met de producent. State management via Redux zorgt ervoor dat de editor-status bewaard blijft, zelfs als de gebruiker de browser sluit en later terugkomt. Sentry monitort errors in real-time, zodat problemen snel worden opgemerkt en opgelost.
// Pixowall tech stack
frontend: “React + TypeScript”
styling: “TailwindCSS + SASS”
backend: “Supabase (serverless)”
database: “PostgreSQL”
betalingen: “Stripe”
auth: “Google + Facebook OAuth”
export: “High-res PDF generatie”
monitoring: “Sentry”
i18n: “Nederlands + Engels”
type: “Progressive Web App”
Impact
Het resultaat
Pixowall biedt een complete ervaring van ontwerp tot aflevering, zonder installatie en op elk apparaat. De serverless architectuur schaalt mee zonder operationele overhead.
PWA
Werkt op elk apparaat
2
Talen (NL + EN)
Serverless
Schaalbare backend
Volledig
Van editor tot productie