Sunset Exchange

A board for the Outer Sunset, west of 19th, where neighbors hire neighbors.

Someone posts a fog study they painted. Someone lists birthday-party face painting. Someone asks for help getting their dad's phone working, and a neighbor two blocks over answers. Money stays on the avenues, and every exchange finishes in person — a doorstep handoff, a lesson at Ocean Beach, a table at market day.

Not a storefront. The corkboard at the corner store, with a working message thread behind it.

Editors: Josh (48th & Irving, steward) and the builder. Notes to each other go in the "Notes between us" section at the bottom of this file.

---

The one loop this app exists for

post or ask  →  message  →  both mark "arranged"  →  meet in person  →  vouch

Everything else is supporting cast. If a change makes that loop harder to walk, it's the wrong change.

What's built

Route	File	What it does
/	src/pages/Browse.tsx	Listings board — the first screen
/listing/:id	src/pages/ListingDetail.tsx	One listing, vouches, message the maker
/maker/:id	src/pages/MakerProfile.tsx	A neighbor: their work, asks, vouches
/requests	src/pages/Requests.tsx	Asks board — open / matched / mine
/post	src/pages/Post.tsx	Post an offer or an ask, behind the norms screen
/threads, /threads/:id	src/pages/Threads.tsx	Inbox, two-sided Mark as arranged
/workshops	src/pages/Workshops.tsx	Seats as commitments, named attendees
/about	src/pages/About.tsx	How it works, money, who tends it
/steward	src/pages/Steward.tsx	Josh only — reports, unanswered asks, introductions

Shared pieces: src/store.ts (all state and actions), src/data/seed.ts (people, listings, asks, workshops, threads, vouches, market day), src/components/ (ListingCard, AskCard, PersonLine, PhotoSlot), src/App.tsx (header, footer, nav, routes).

Rules baked into the design

• Nothing is pre-approved. You tap through five norms once, then you post. Cleanup happens after the fact: a Report link on everything, read by Josh.
• No money moves through the site. Four ways to price — set price, sliding scale, neighbor rate, open to trade. All four are normal.
• Borrowing lives elsewhere. Tools, gear and books lend at Community Supplies. This board is for hiring people and paying them.
• No stars, no scores. Vouches only, from named neighbors, and only after both sides marked an exchange arranged.
• Avenue bands are labels, not rankings. Nobody sorts higher for living closer.
• Language is a filter on purpose — finding a neighbor you can talk easily with is part of what makes this usable.
• Three posts per person per day (DAILY_LIMIT in Post.tsx) so nobody can flood the board.

Where this sits in the neighborhood

Deliberately does not duplicate what already works:

• Outer Sunset Today — calendar and daily digest. Workshops here are meant to feed it, not compete with it.
• Community Guide — local groups.
• Community Supplies — lending, on trust.
• Sunset Social Club — 4114 Judah St, market day.
• Cozy Corner — 48th & Irving block hub.
• Field Guide — walk the past, present and future.

The 90/10 part

The board is the 10%. The 90% is Josh's practice, and the app is shaped around it:

• New posts get a real reply from a person.
• An unanswered ask is the only urgent thing. The Steward page sorts them oldest-first, and Introduce someone opens a thread with both neighbors' names and Josh's note at the top. That hand introduction is the most useful feature here.
• Market day turns the board into a room: Wednesday, August 26, Sunset Social Club, 4114 Judah St — tables, cash boxes, everything on this board in one place.
• The first ten neighbors get invited in person, not by link.

Current state — read this before showing it to anyone

• Demo content. The people, listings, asks, workshops and threads are examples, not real neighbors. Josh can wipe them: Steward page → Clear all demo content.
• No accounts. The dropdown in the header switches who you are so one person at one laptop can post as themselves, switch, and answer as someone else. It stands in for sign-in.
• Nothing saves. State lives in memory — reload and you're back to demo data. Community Cloud is the fix when neighbors on their own phones should see the same board (one click in the Cloud tab, no keys to paste).
• No email. Nobody is notified when their ask gets answered. Resend later.

Editing the words

To change	Edit
Headline and market-day card on the first screen	src/pages/Browse.tsx
The five norms	NORMS in src/pages/Post.tsx
How-it-works steps, ecosystem list	STEPS, ECOSYSTEM in src/pages/About.tsx
Footer, nav labels, header chip	src/App.tsx
People, listings, asks, workshops, market day	src/data/seed.ts
Colors, fonts, corner radius	the tokens at the top of src/index.css

Colors and type are all tokens — retheming the whole app is a values-only edit in src/index.css.

Photos and the logo

Add photos in Files → Add photo, then reference them by name — PhotoSlot picks them up via data-asset, and the Post form has a photo-name field for the same reason. Real photos of the actual avenues beat anything else here.

The SE block in the header is a placeholder on purpose. The right move is a hand-painted mark from a Sunset artist whose lettering you already like — money stays in the neighborhood and the board ends up looking like the neighborhood.

Known gotcha: file encoding

src/App.tsx came back from a GitHub pull with — and · mangled into â€" and ·. If that reappears, the repo committed the file as something other than UTF-8. Fixed once already; check encoding before pulling.

Later

Real accounts, neighbor photo uploads, email when someone answers your ask, a market-day signup sheet, Community Cloud for shared data — and remixing this for another neighborhood, which is the point. The categories, avenue bands and norms screen are all meant to be rewritten for other streets and other languages.

---

Notes between us

Josh and the builder — leave notes here with your initials and a date. Anything in this section is for us, not for neighbors.

• [JN, Aug] —
• [ , Aug] —