[Collections as Data] for Apps — Tweetsie (Live Cursor Build)

Welcome to our collaborative vibe coding session—an experiment in turning collections as data into bespoke webapps. This is a new way of sharing collections big and small, made possible by the rise of vibe coding platforms like Cursor, Loveable, GitHub Copilot, and Replit. We're building on the strong foundation of the collections as data movement to create a new paradigm: collaborative, accessible, and engaging ways to bring cultural heritage to life through modern web development. Join us in this exciting frontier where archivists, developers, and AI assistants work together to build beautiful, functional collections interfaces.

We're starting from a playful HELLO WORLD and, in ~60 minutes, will see how far a small group can build: site structure, a minimal items list & details page, maybe an image wall or a simple timeline—audience-led.

⏰

Run of Show (60 min + optional 30)

10' Orientation: Review this Staging doc—goals, constraints, and how we got here (easy, cheap, reproducible).
- Domain: tweetsie.app (Porkbun).
- Repo: GitHub → small Astro + Tailwind scaffold (client-only).
- Hosting: Netlify builds from GitHub and serves the static site over CDN.
- Data & images pre-staged locally (/data, /public/images).
- Costs: low now, predictable later (see Technology & Costs card).
- Collection context: JMU finding aid for the Tweetsie Collection.
15' Data wiring: Fetch /data/items.json and render a minimal list (title + thumbnail).
25' Core features (audience chooses): navigation & site structure; an Items control panel with Subject, Start Year, End Year, Sort (Title A–Z/Z–A, Year ↑/↓), and keyword search; item details page.
10' Visual polish: apply the mid-century "Tweetsie" theme; optionally add an image wall or simple timeline by year_start/year_end.
5' Ship: commit → build on Netlify → verify at https://tweetsie.app.

Optional +30': open build for extras (lightbox zoom/pan, CSV export later, URL state, etc.).

🎯

What's pre-staged

Images in /public/images/; metadata JSON in /data/ (copied to /public/data/items.json on build).
Netlify: connected to GitHub; each push triggers npm run build, publishes dist/, serves via CDN with auto-HTTPS (free tier for now).
Data extraction: images + metadata harvested from JSTOR via Python; some records have multiple images—for this workshop we use the first image only; metadata normalized (subjects, years, basic cleanup).
Domain: https://tweetsie.app (Porkbun).
Repo: github.com/KevinHegg/tweetsie-app.
Template-ready: to adapt for another collection, swap /public/images/ + /data/items.json, update site text—everything else stays the same.

💻

Technology & Costs (static-first, client-only stack)

We're using a static-first, client-only stack: Astro + Tailwind on the frontend, no backend, no database, built from GitHub and deployed on Netlify.

Domain (Porkbun): tweetsie.app — $5.99 first year, then $14.99/year.
Source (GitHub): tweetsie-app repo — free.
Hosting (Netlify): static site build & CDN — free tier (sufficient for this project).
Assistant (Cursor): AI pair-programmer — $20/month.
ChatGPT+ (optional): For building Cursor prompts and learning the tech stack — $20/month.

How GitHub & Netlify work together

We push changes to the GitHub repo (main branch).
Netlify sees the push, runs our build (npm run build), and publishes dist/.
Netlify serves the site globally over its CDN and auto-provisions HTTPS for tweetsie.app.
Every commit creates a new deploy; rollbacks are one click.

🚀

Considerations for Larger Collections

For collections with thousands of items, you often need a fuller stack with a discovery layer and admin tools—which changes the vibe-coding constraints.

Complications

Search & discovery: facets, relevance, typo tolerance, pagination.
Write paths: editing, bulk ingest, authority control, audit trails.
Access: roles/permissions, embargoes, sensitive items, preservation copies.
Images: derivatives, IIIF manifests/tiling, storage and egress costs.
Performance: API limits, caching strategy, index refresh, batch jobs.
Governance: metadata quality, rights at scale, PII, backups/restore.

Practical paths

Search: Algolia or OpenSearch with incremental indexing and clear facets.
Assets: IIIF server (e.g., Cantaloupe) + object storage (S3/R2) for tiles/derivatives.
CMS/Admin: Sanity/Strapi/Directus—or a lightweight Rails/Django admin.
Auth: Netlify Identity or GitHub OIDC with role-based access control.
Architecture: keep public pages static; call APIs for search/details only.
Ops: background workers for ingest/derivatives; staging → prod promotion.

Today we stay static-first and client-only; this card is a roadmap if the prototype grows.

🎨

Feature ideas (pick together)

Navigation & site structure: Home · Items · Item details.
List + details page: link /items → /item/[id], render image + core metadata.
Filters: subject chips/select, year min/max, text search (title/description).
Image wall: grid respecting orientation/aspect_ratio.
Timeline: simple year band by year_start/year_end.

✅

Guardrails & success

Replace the train animation landing page with an appropriate welcome message or introduction to the site.
Success: navigable items list, at least one working filter, a functional details page, something fun like a map, timeline, or wall of images, and a well-designed and engaging site look and feel.

🔨

Start Prompts in Build Order (reveal)

💡

Tip: When constructing prompts, modern LLMs like ChatGPT 5 and Copilot are very helpful—start simple, let them suggest steps, and refine with small follow-ups.

Create an "Items" page that lists our collection (title + thumbnail from /data/items.json) with each item linking to its own page.
When I click a title, show a details page with the large image, title, date, short description, rights note, subjects as tags, and a link back to the list.
Add simple site navigation with links for Home, Items, and Welcome/Notes, keeping the design clean, readable, and mobile-first.
Add a control panel at the top of the Items page with three filters (Subject, Start Year, End Year), a Sort selector (Title A–Z/Z–A and Year ↑/↓), and a keyword search across title, description, and subjects—everything client-side, fast, and debounced.
Add a toggle on the Items page to switch between a simple list and a responsive wall of images that looks good with tall and wide photos.
Add an accessible fullscreen lightbox for item images with zoom & pan (wheel/pinch to zoom, drag to pan), closing on ESC or backdrop click.
Add a lightweight timeline control that lets me filter by year ranges using year_start/year_end (fall back to a parsed year if needed).
Give the site a cohesive mid-century "Tweetsie" look (palette from our images, ticket-stub subject chips, subtle paper grain, "railroad track" dividers), mobile-first.
Create a Welcome page that briefly introduces the Tweetsie Collection using and citing the JMU finding aid and the Artstor landing page (clear links, no verbatim copying).

🚀

One-shot Mega-Prompt (reveal)

Be creative: build a **mobile-first**, dynamic, highly interactive prototype for the Tweetsie collection using our **static, client-only stack** (Astro + Tailwind), our pre-staged data (**fetch `/data/items.json`**) and images (`/public/images`), and **no servers or external APIs**; **keep the HELLO WORLD homepage animation intact**.

**Data assumptions (defensive):** each record may include:
`id, title, image, date, year_start, year_end, description, subjects[], rights, repository, local_identifier, source_url`. Treat fields as optional; don't crash.

**Do this in order (small, readable commits):**

1. **Items page:** create `src/pages/items.astro` that lists items with **title + small thumbnail**, each linking to `/item/[id]`.
2. **Details page:** create `src/pages/item/[id].astro` showing **large image, title, date, short description, rights note, subjects as chips**, and a **Back to Items** link.
3. **Navigation:** add a simple header nav (**Home / Items / Welcome**) and keep the design clean, readable, and mobile-first.
4. **Control panel (top of Items):** add **Subject**, **Start Year**, **End Year** filters; a **Sort** selector (**Title A–Z/Z–A**, **Date/Year ↑/↓** using `year_start/year_end` or parsed year); and a **keyword Search** that matches words anywhere in the record (title, description, subjects, etc.); combine filters with **AND**, debounce search, and show a small **"Showing X of N"** count.
5. **View toggle:** add a toggle to switch between a **simple list** and a **responsive image wall** that respects `orientation/aspect_ratio` when present.
6. **Lightbox:** add an **accessible fullscreen lightbox** for item images with **zoom & pan** (wheel/pinch to zoom, drag to pan, ESC/backdrop click to close); no prev/next needed; implement in **plain JS** or with a tiny helper (e.g., **Panzoom**) without adding a UI framework.
7. **Timeline (lightweight):** add a simple year slider/range to filter using `year_start/year_end`, falling back to parsing a single year from `date`.
8. **Theme ("mid-century Tweetsie"):** derive a small palette from an image (cream paper, brick-red, diesel-green, coal-black, sky-blue), define CSS variables in `src/styles/global.css`, use **slab-serif** headings + **system sans** body, add subtle paper-grain, style subject chips like **ticket stubs**, and use **railroad-track** dividers.
9. **Welcome page:** add `/welcome` that briefly introduces the Tweetsie Collection using and citing the JMU finding aid ([https://www.lib.jmu.edu/charles-grattan-price-jr-collection-on-tweetsie-and-the-shenandoah-central-railroad-is-now-open-for-research/](https://www.lib.jmu.edu/charles-grattan-price-jr-collection-on-tweetsie-and-the-shenandoah-central-railroad-is-now-open-for-research/)) and the Artstor landing page ([https://www.jstor.org/site/jamesmadisonuniversity/jamesmadisonuniversitycharlesgrattanpricejrcollectionontweetsieandtheshenandoahcentralrailroad/?so=item_title_str_asc](https://www.jstor.org/site/jamesmadisonuniversity/jamesmadisonuniversitycharlesgrattanpricejrcollectionontweetsieandtheshenandoahcentralrailroad/?so=item_title_str_asc)) **in your own words** with clear links.

**Implementation notes:**

* **Client-only**: no SSR, no external APIs; only `fetch('/data/items.json')`.
* **A11y**: semantic headings, alt text on images, focus trap + ESC for lightbox, keyboard support for filters.
* **Resilience**: handle missing fields; if an image is missing, show a pleasant placeholder.
* **Performance**: no heavy deps; keep code small; debounce search; avoid layout thrash in the wall.
* **UX niceties**: remember last filters during a session; optional URL query params if trivial.

**Output:** updated pages/components with Tailwind classes, tiny helpers as needed, **zero console errors**, and a **one-paragraph summary of changes** after each major step.

Tip: click inside, Ctrl/Cmd-A to copy.