Project Now Korea
Warning
This post is more than a year old. Information may be outdated.
1.High‑level architecture
flowchart TD
%% === Clusters ===
subgraph Client["Browser / Next.js frontend"]
browser["Browser"]
end
subgraph EdgeFns["Vercel Edge Functions"]
edgefn["Edge Function"]
end
subgraph Cache["Upstash Redis (cache + pub/sub)"]
redis["Redis"]
end
subgraph Durable["Neon Postgres (event log)"]
neon["Postgres"]
end
%% === Flows ===
browser -- "GET /canvas" --> edgefn
edgefn -- "Read tile" --> redis
edgefn -- "Return image" --> browser
browser -- "POST /api/place" --> edgefn
edgefn -- "SETRANGE + PUBLISH" --> redis
edgefn -- "INSERT pixel event" --> neon
browser -- "SSE /api/updates" --> edgefn
redis -- "Publish updates" --> edgefn
edgefn -- "Stream deltas" --> browser
- Vercel hosts the static Next.js UI, Edge Functions, and scheduled (cron) jobs.
- Upstash Redis is the hot data‑plane:
- single‑bit/byte writes (
SETBIT/SETRANGE) keep the canvas in memory with O(1) latency(upstash.com) - native Pub/Sub plus Server‑Sent Events (SSE) push updates globally(upstash.com)
- atomic Lua scripts and the Upstash Rate‑Limit helper enforce "1 pixel /Nsec" per user.
- single‑bit/byte writes (
- Neon Postgres is the durable system‑of‑record. The edge‑compatible serverless driver lets Edge Functions upsert rows over HTTPS/WebSockets with 10ms cold‑start overhead(neon.com). Keeping history here enables time‑lapse, analytics, and roll‑back with Neon's cheap "branching" snapshots().