humor-hello-world → Captioned NYC
Weekly assignment app for COMS 6998 Design for Generative AI (Fall 2026).
Next.js (App Router) + Supabase + Google Gemini, deployed on Vercel.
Captioned NYC (week 4): post a photo or a one-line "moment" from your week in
the city, pick a vibe, and Gemini writes three captions. Everyone on campus votes
them up or down; the best themed post of the day tops the board.
| Week | What was added |
|---|
| 1 | Hello World page, Vercel deploy |
| 2 | Supabase jokes table, /jokes list page |
| 3 | Google login (Supabase Auth), profiles table + trigger, onboarding, /profile with photo upload, protected /jokes route |
| 4 | AI caption generation (Gemini) saved to posts / captions with the exact prompt, up/down votes table, daily theme + leaderboard, RLS on every table |
| 5 | Feedback iteration: complete captions (parser fix), one meme card per caption in a responsive grid, five subway-voice caption styles, up/down counts read back from the DB, Race to Columbia map + badges, daily Gemini limit, prompts hidden from the API, subway-sign redesign |
Design concept: the city's own wayfinding
Sam, our persona, is new to New York. The first system every newcomer has to learn
here is the subway, and its signage is the most widely shared visual language in the
city. The app is about New York moments, so instead of a generic social-app look it
borrows that language. Subway signs are also built to be read at a glance, which is
what a feed you scroll through between classes needs.
| Subway element | Where it shows up | Why |
|---|
| Black station-sign band with the thin white rule along the top | Header, today's theme, the "enter today's theme" switch, notices | Black means "the system is talking" (theme, status, navigation); white cards are what people posted. |
| Line bullets (letter in the line's official colour) | The five caption voices: 1 Conductor (red), G Service alert (lime), A Showtime (blue), L Overheard (grey), R Roast me (yellow) | A voice is a line: same destination (your moment), different ride. Each meme carries its voice's bullet. The 1 is Columbia's own line. Week-4 vibes stay on old posts but are no longer offered. |
| The official subway diagram (Vignelli's 1972 map, today's MTA map) | Race to Columbia (/race): an animated diagram of the five caption lines over Manhattan, the Hudson, the East River and Central Park, drawn the Vignelli way (straight runs, 45° turns, white transfer pills, line bullets at each terminal). The lines draw themselves in on load. Every rider is a train on the 1 that rides from South Ferry to their stop, with their photo and name on a dashed leader (yours is yellow, "You"); 116 St–Columbia has a pulsing yellow finish sign. Meme trains run back and forth on every line with a speed streak and a ripple at each stop, and each line gets one more train for every two memes written in that voice this week, so the map gets busier as people post. Tap a train to read the meme it carries; pick a line in the legend to light it up; "Replay the week" runs everyone's ride again. On phones the map turns upright (Columbia at the top). | Turns voting into travel: every vote is a stop, the destination is campus, and the traffic on the map is made by everyone posting. A flat diagram is quicker to read on a phone than a 3D scene. |
| Platform arrivals board (amber LED) | Above the map: "You at Houston · 17 stops to go", the riders ahead of you, and each line's trains, flipping every few seconds | The countdown clock is the first thing you look at on a platform. |
| Express-service diamonds | Badges | The MTA marks express service with a diamond; badges mark the riders who went further. |
| Ads in a subway car (a photo with one line of copy) | Meme cards: one photo + one caption, in a grid | Each caption competes on its own, and several fit on one screen. A post without a photo is set as a station sign so it still has an image. |
| MetroCard yellow | The one primary action on each screen (Post, Write 3 captions, Sign in, Try again), rank bullets, leading caption |
Type. One family, Geist Sans: a Swiss grotesk in the same lineage as the
Helvetica on MTA signs. Headlines are bold and tightly set like sign text. Everything
is sentence case (subway signs use mixed case because it reads faster). The caption is
the largest text on every card because the AI output is the product.
Colour tokens (app/globals.css): sign #000000, paper #ECEEEC (platform
concrete, cooler than white), card #FFFFFF, MetroCard #FCCC0A, upvote #00933C
(4/5/6 green), downvote #6D6E71 (L-train grey). Downvotes are grey, not red, so a
downvote reads as "not funny", not as a punishment.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
