Local Stores & Their Stories

A people-first campaign by Pick at Store: share a memory of a neighbourhood store, pin it to the map of India, and pass the memory on.

Product and build plan: https://claude.ai/code/artifact/d75832d4-2701-4e44-9837-514ab263cf98

Stack

• Next.js (App Router, TypeScript, Tailwind CSS), deployed on Vercel while we build
• Firebase: Authentication (Google) and Cloud Firestore, on the free Spark plan
• Cloudinary (free plan) for story photos, private until approved, through src/app/api/photos
• Firebase projects: pas-dev-7786f (dev, default) and pas-prod-c8190 (prod)

Run it locally

Requires Node 22+ and Java 21+ (for the Firebase emulators).

npm install
cp .env.example .env.local   # fill in the dev web app config
npm run dev                  # http://localhost:3000

To work fully offline against local Firebase, set NEXT_PUBLIC_USE_FIREBASE_EMULATORS=true in .env.local and run npm run emulators in a second terminal (UI at http://localhost:4000).

Checks

Command	What it does
npm run lint	ESLint
npm run typecheck	TypeScript, with Next.js route types
npm run test:rules	Firestore and Storage security rules tests on the emulators
npm run build	Production build

All four run in GitHub Actions on every pull request.

Moderators

Every story waits for a moderator at /moderate before anyone else can see it. The app can't make anyone a moderator; that is done by hand in the Firebase console:

1. The new moderator signs in, opens /moderate and copies the code it shows.
2. In the Firebase console, open Firestore Database, then the moderators collection (choose Start collection the first time).
3. Add a document whose Document ID is that code, with one string field name holding their name.

Every decision is written to moderationLog, which nobody can edit or delete.

Moderators also see a Reports tab. Anyone signed in can report a memory from its page (or the flag on its Wall card); the memory stays up until a moderator hides it or keeps it. The Approved tab can feature a memory in the Wall's Featured row.

The Memory Wall

/wall shows every approved memory shared with everyone, and /memories/<id> shows one memory, including those shared by link only. Both are built on the server from what an anonymous visitor may read, then cached, so visitors don't each cost a Firestore read:

• They refresh every 15 minutes (memory pages every hour), and straight away when a moderator approves, hides or features a memory or an author deletes one (src/app/api/wall/refresh).
• Photos on the Wall use signed Cloudinary links made only for approved memories.
• Loves are private records in usersPrivate/<uid>/reactions plus a count on the story that only its author is shown. There are no public counters.

Security rules

firestore.rules and storage.rules deny everything by default (Firebase Storage is not used). Each build step opens only what its screens need, and adds tests under tests/rules proving the rest stays closed. Deploy rules with:

npx firebase deploy --only firestore:rules,storage --project dev

Launch basics

• Spam: each person can share one memory a minute and 10 in a rolling day (src/lib/post-limits.ts). The count lives in postLimits/<uid>, written in the same batch as each new story and checked by the rules; /api/photos checks it too before storing a photo.
• Cookies: the only third-party cookies would come from the Curator Instagram feed on Home, so it loads only after the visitor allows it (src/components/cookie-choice.tsx). Sign-in storage is essential.
• Analytics: Vercel Web Analytics (@vercel/analytics), cookieless. Turn it on in the Vercel project's Analytics tab.
• Search engines: src/app/sitemap.ts, src/app/robots.ts, canonical links and link previews use the production address Vercel reports (VERCEL_PROJECT_PRODUCTION_URL), so a custom domain needs no code change. Set NEXT_PUBLIC_SITE_URL only to override it. Test links are never listed.
• Headers: HTTPS-only (HSTS) and other security headers in next.config.ts.

Inside the Pick at Store app

Google blocks its sign-in page inside apps' web views, so the Pick at Store app signs in with Google itself and hands the page an ID token (src/lib/google-sign-in.ts). The contract, web view settings and examples for React Native, Flutter, Android and iOS are in docs/pick-at-store-app.md. In other apps' browsers (Instagram, Facebook) the sign-in pages explain how to open the site in the phone's browser instead.