Build Senja

The build, in order

1. 1

   Submission

   hideshow

   Store submissions as unapproved, exactly as typed, escaped only on the way out.

   1. 1.1Create the project and the testimonials table

      testimonials (id, name, role, company, avatar_path, rating 1-5, body, source_url, approved default false, created_at, approved_at, ip_hash). Build the approved flag now even though the wall arrives in Phase 4.

      Files server.mjsdb.mjs

      terminalcopy

      mkdir praise && cd praise && git init && npm init -y && npm pkg set type=module
      npm install sharp@0.35.3
      mkdir -p data/avatars && cp .env.example .env

   2. 1.2Build GET and POST /submit

      Name, role, company, rating, body. Cap body at 1500 characters, require rating 1-5, strip control characters. Store text as typed; escape at render time. Works with JavaScript disabled.

   done when · tick each as it passes

   • A submission stores one row with approved = 0
   • An over-length body is rejected with a readable message
   • A body containing <script> is stored verbatim and later renders as visible text

   watch out

   • Never sanitize on the way in. You will lose the ability to tell a real apostrophe from an attack. Escape on output, every time.

   next phase
2. 2

   Avatars

   hideshow

   Uploads that cannot hurt you: sniffed, resized, stripped, capped.

   1. 2.1Accept an optional avatar and inspect the decoded header

      sharp(buffer).metadata() throws on non-images; reject anything that is not a real image regardless of extension or declared type.

   2. 2.2Resize to 128px square WebP with a JPEG fallback, strip EXIF

      sharp(...).resize(128, 128, { fit: 'cover' }).webp(). Write under a generated filename; never reuse the uploaded name.

   3. 2.3Cap the upload while streaming and set a pixel limit

      Stop reading past MAX_UPLOAD_MB. sharp({ limitInputPixels }) so a decompression bomb cannot exhaust memory.

   done when · tick each as it passes

   • A 12 MP photo becomes a small square file
   • A renamed .txt is rejected
   • A 20 MB file is refused before being fully read
   • The stored file has no EXIF

   next phase
3. 3

   Moderation

   hideshow

   Approve, reject, un-approve, delete, with files cleaned up.

   1. 3.1Build /admin behind basic auth

      Pending list with approve, reject and delete; approved list with un-approve; a raw view per row.

   2. 3.2Delete the avatar file when deleting a row

   done when · tick each as it passes

   • Approving makes a row eligible for the wall
   • Un-approving removes it immediately
   • Deleting leaves no file behind in UPLOAD_DIR

   next phase
4. 4

   Public wall

   hideshow

   Approved testimonials only, responsive, with a designed empty state.

   1. 4.1Build GET /wall

      Masonry grid of approved rows: avatar, name, role, company, stars, body. Lazy-load avatars. Mobile-first, dark mode.

   2. 4.2Render an empty state when nothing is approved

   done when · tick each as it passes

   • The wall shows only approved rows
   • It reflows from 375px to 1440px
   • An unapproved submission is absent from the HTML source, not merely hidden with CSS

   next phase
5. 5

   Embeddable widget

   hideshow

   One script tag renders the wall into any page with no iframe and no style leaks.

   1. 5.1Serve GET /api/wall.json with CORS for EMBED_ORIGINS

      Cache-Control with a short max-age.

   2. 5.2Write /embed.js under 5 KB

      Finds a target div, fetches the JSON, renders cards with every text escaped on injection. Scope styles with a unique class prefix. Inherit the host font.

   done when · tick each as it passes

   • The widget renders on a different origin
   • It does not alter any host page style
   • A testimonial containing HTML displays as text in the embed

   next phase
6. 6

   Abuse controls and deploy

   hideshow

   Spam turned away, backups covering both database and files, live.

   1. 6.1Add a honeypot, a minimum fill time and a per-IP limit of 3 per hour in SQLite
   2. 6.2Add /healthz, systemd, Caddy and a backup covering data/ entirely

      Files deploy/praise.serviceCaddyfile

      terminalcopy

      tar czf /tmp/praise-$(date +%F).tgz data/

   3. 6.3Write the README

      The embed snippet verbatim, the statement that nothing appears until approved, and the note that avatars live outside the database and must be backed up with it.

      Files README.md

   done when · tick each as it passes

   • The honeypot silently discards while showing success
   • The fourth submission in an hour is refused
   • A restore from backup brings back both rows and images

   next phase