DROP is a spontaneity-first social web app:
- one random Drop per session
- timer starts immediately
- no retries, no feed, no scrolling logic
- post-drop memory is ephemeral and resets after 24h
- global shared Drops and ambient live responses over Socket.io
- Next.js App Router + TypeScript
- Tailwind CSS + Framer Motion
- Zustand for lightweight client state
- Socket.io (
server/socket-server.ts) - Redis-backed ephemeral storage with in-memory fallback
- Install:
npm install- Optional Redis:
export REDIS_URL=redis://localhost:6379- Start web + socket servers together:
npm run dev- App: http://localhost:3000
- Socket server:
http://localhost:4001
If your frontend runs on a custom origin, set:
export NEXT_PUBLIC_APP_ORIGIN=http://localhost:3000For the Nostalgia search engine (/), add either:
SERPSTACK_API_KEY(recommended now, broad web + easy setup)TAVILY_API_KEY(broad web alternative)SEARCH_API_KEYfor BingYOUTUBE_API_KEYfor YouTube fallback
cp .env.example .env.local- Landing (
/) with hero, ambient visuals, and “Receive Your Drop” - Drop screen (
/drop) with strict one-moment timer loop - Global Drops occasionally override local random selection
- Result state with aggregate participation pulse
- Today’s Chaos (
/chaos) poetic recap for the current day only - Manifesto (
/manifesto) anti-algorithm positioning
src/
app/
api/ # session + drop + chaos endpoints
drop/ chaos/ manifesto/
components/ # reusable UI and page experience modules
data/drops.ts # seeded 25+ drop prompts
hooks/ # timer + socket hooks
lib/ # engine, storage, session, types
store/drop-store.ts # Zustand client state
server/
socket-server.ts # realtime presence + global drop broadcast
public/drops/ # cursed visual assets for reaction drops
REDIS_URLis optional; app falls back to in-memory ephemeral storage automatically.- No auth is required for MVP; users are tracked via anonymous session cookies.