🦆 Donald Duck Tracker
Een kleine Progressive Web App om bij te houden welke nummers van
Donald Duck Weekblad, Katrien Duck Weekblad en Pockets je al
gelezen hebt, per jaargang en met een heatmap.
Live: https://donald-duck-tracker.vercel.app/
Wat kan de app
- Startscherm: teller van alle gelezen edities, voortgangsbalk per tijdschrift en snelkoppelingen naar Snel opzoeken en Backup.
- Donald Duck Weekblad: per jaargang, week 1 t/m 52, als heatmap. Tik op
een tegel om gelezen of ongelezen te wisselen.
- Katrien Duck Weekblad: per jaargang, maand 1 t/m 12.
- Pockets en Dubbel Pockets: lijst met nummer en thema of titel. Wisselen,
bewerken en verwijderen.
- Speciale edities toevoegen aan een jaargang.
- Jaargangen: vanaf 2017, met
+ jaar voor andere jaren.
- Snel opzoeken: controleer of een specifiek nummer al gelezen is.
- Backup: de knop 💾 bewaart alles als
donald-duck-tracker-backup-JJJJ-MM-DD.json. Op iPhone opent het
deelmenu (kies "Bewaar in Bestanden"), elders wordt het bestand gedownload.
Het startscherm toont hoe lang geleden je laatste backup was.
- PWA: op je beginscherm te zetten (iOS en Android), met eigen icoon.
Op iPhone schermvullend, met ruimte voor de notch.
De app-bestanden worden gecachet, maar zonder internet laadt de data niet.
- Je voortgang staat in een database, dus op elk apparaat hetzelfde.
Wijzigingen van een ander apparaat zie je na herladen.
Hoe het werkt
Browser (index.html + app.js) --fetch--> /api/magazines --HTTPS--> Neon Postgres
- Frontend: vanilla HTML, CSS en JavaScript. Geen framework, geen
build-stap, geen
package.json.
- API: één Vercel-functie (
api/magazines.js) die lezen, toevoegen,
wijzigen en verwijderen doet, zonder dependencies.
- Database: Neon Postgres, tabel
magazines
(zie schema.sql).
- Hosting: Vercel, automatisch gedeployed vanaf de
main branch.
- Er is geen inlogscherm. Wie de URL kent, kan lezen en schrijven. Maak daarom
af en toe een backup.
Zelf opzetten
- Maak een Neon-project en draai
schema.sql in de SQL-editor.
- Maak een Vercel-project gekoppeld aan deze repo. Zet de Neon connection
string als omgevingsvariabele
DATABASE_URL (production en preview).
- Zet Vercel Authentication uit voor het project, anders vraagt de app om een
Vercel-login.
- Push naar
main, Vercel deployt vanzelf.
Lokaal draaien kan met vercel dev (de pagina heeft /api nodig). Alleen
index.html openen werkt niet.
Bestanden
index.html Alle markup, één pagina met meerdere views
app.js Alle applicatielogica
style.css Styling (donker navy/goud thema)
api/magazines.js Serverfunctie: lezen en schrijven naar Neon
schema.sql Databaseschema voor Neon
sw.js Service worker (cache van de app-shell, nooit van /api)
manifest.json PWA-manifest
icons/ App-iconen (192, 512, 1024 en apple-touch-icon)
CLAUDE.md Technische uitleg voor AI-sessies
Versie: 2.2.0
