© Made by Adam Bellanger
← ProjectsPersonal

Private photo album with an animated full-scroll public view and a free-form visual editor to lay out each page by hand.

Stack

Languages
  • TypeScript
Front-end
  • Next.js
Data
  • PostgreSQL
  • Drizzle
Infra
  • Docker
Tools & APIs
  • Playwright

Context

A digital album for two, designed as an object: every page is composed freely, with photos and text placed anywhere, no imposed grid.

Role

Full design and development: public view, admin editor, database, tests and deployment.

Architecture

  1. Visitor

    Token link, full-scroll view

    Admin

    Free-form visual editor

  2. Next.js

    App Router, TypeScript

  3. Drizzle ORM

    Schema and migrations

  4. PostgreSQL

    Albums, pages, elements

Playwright end-to-end tests driving a real Chromium.

Challenges

Building a free-form editor (drag and drop, resize, rotation, font choice) and a scroll view that stays faithful on desktop and in portrait. The Playwright end-to-end tests taught two rules: measure the rendered result rather than the document, and look at the pixels when appearance is at stake.

Outcome

An application with token-protected access, multiple albums, Drizzle migrations and a test suite that drives a real browser.

Highlights

  • Free-form visual editor: drag and drop, resize, rotation
  • Playwright E2E tests on the real rendering
  • PostgreSQL + Drizzle ORM
Next projectQR Code Generator →