Flipps - het ultieme vakantiealbum
ReactTypeScriptViteTailwind CSSSupabasePostgreSQLZustandTanStack QueryIndexedDBPWAWeb WorkersVercelVitest

Flipps - het ultieme vakantiealbum

Een app om vakantiefoto's als album te delen. Elke foto kun je omdraaien om het verhaal erachter te lezen. Je deelt het album via één link en kijkers hebben geen account nodig.


Flipps is een mobile-first app om vakantiealbums te delen. De app draait om één idee: achter elke foto kan een verhaal zitten.

Het idee

Je importeert de foto's van een reis rechtstreeks van je telefoon. Flipps zet ze automatisch in een album, per dag en per moment ("dinsdagmiddag"), op basis van de tijd waarop ze genomen zijn en de EXIF-gegevens. De meeste foto's blijven gewoon foto's. Maar elke foto kun je omdraaien, met een echte 3D-kaartflip, en op de achterkant staat dan een kort verhaal: wat er gebeurde, waarom het grappig was, wie wat zei.

Het album deel je als één link. Familie en vrienden hebben geen account nodig. Ze scrollen door de vakantie en draaien de kaarten om waar een verhaal achter zit. Reisgenoten kunnen hun eigen foto's aan dezelfde reis toevoegen, zodat de foto's van iedereen in één gedeeld album komen.

Er zijn geen volgers, geen algoritmische feed en geen tellers: de reis is het enige sociale object. AI blijft op de achtergrond en verzint nooit verhalen.

Wat ik bouwde

  • Foto's importeren in de browser: EXIF uitlezen, roteren, schalen en encoderen gebeurt in Web Workers met OffscreenCanvas. Wordt een import onderbroken, dan gaat er voortgang verloren maar geen foto's.
  • Automatische indeling in momenten: voorspelbaar, op basis van tijd en metadata.
  • 3D-flipkaart in pure CSS, zonder animatiebibliotheek. Wie minder beweging wil (prefers-reduced-motion), krijgt een rustige crossfade.
  • Offline-first: foto's en albums staan lokaal in IndexedDB (Dexie), worden via Supabase tussen apparaten gesynchroniseerd en de app is als PWA te installeren.
  • Delen via één link: share-links die je kunt intrekken, een openbare viewer zonder account en Open Graph-previews via een Vercel edge function, zodat de link er in WhatsApp goed uitziet.
  • Samen: reisgenoten uitnodigen, reacties en opmerkingen, afgeschermd met Row Level Security in Postgres.
  • Accounts: inloggen met een code of link per e-mail, Google of Apple.
  • Privacy vanaf het begin: hosting in de EU, niets wordt geteld zonder toestemming, al je gegevens downloaden als ZIP, je account echt verwijderen, een formulier om een album te melden.
  • Tweetalig (Nederlands en Engels) zonder i18n-bibliotheek. De compiler controleert dat elke vertaling compleet is.
  • Licht en donker thema met semantische design tokens en gemeten contrast.

Stack

React 19, TypeScript (strict), Vite, React Router 7, Tailwind CSS 4, Zustand, TanStack Query, Dexie, Supabase (Postgres, Auth, Storage, RLS, Edge Functions), Vercel, Vitest en React Testing Library.

Status

De eerste mijlpaal is af: een echte reis gaat van de filmrol naar een link die iemand anders kan openen. Nu moet blijken of het idee werkt: draaien kijkers de kaarten echt om, schrijven makers de verhalen en delen mensen de link?

Interesse in een gelijkaardig project?

IT Service Pieters helpt KMOs en zelfstandigen in het Waasland met websites, IT ondersteuning en AI integratie.