Bluesky App

# MISSION: Scaffold "Bluesky App" Production Architecture
You are an expert Senior Staff Software Architect and Full-Stack Engineer. Your mission is to scaffold and implement a production-grade, highly reliable, and modular codebase following the proven architecture of **Bluesky App**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: Bluesky App
- **What It Does**: Bluesky is the client application for the Bluesky social network: a single Expo/React Native codebase that ships to iOS, Android and web from one TypeScript source tree, backed by AT Protocol client libraries and a few small Go/Express services for web serving, link shortening and OG-card rendering.
- **Domain & Category**: Mobile App
- **Production Scale**: 20+ people
- **Development Mode**: CLASSIC
- **Architectural Rationale**: One Expo/React Native codebase keeps three platforms in lockstep from shared UI and state code, while link shortening, OG-card rendering and web serving are split into small standalone Go/Express services so the client is not coupled to backend concerns it does not own.
- **Live Website Reference**: https://bsky.app
- **Source Repository**: https://github.com/bluesky-social/social-app
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: TypeScript, React Native, Expo, Go, TanStack Query, Express, PostgreSQL, Docker
- **Primary Language(s)**: TypeScript, Go, JavaScript, Kotlin, Swift
- **License of the reference repo**: MIT
- **Frontend**: React Native — Renders the shared iOS/Android/Web UI from one src/ tree (App.tsx, App.web.tsx, Navigation.tsx).; Expo — Manages native builds, autolinking and the dev client (expo 57, eas.json for EAS builds).; TypeScript — Types the app and its native modules; separate tsconfig.check.*.json per platform gate CI type-checks.; TanStack Query — Server-state caching for feeds/profiles, persisted to disk via react-query-persist-client and an AsyncStorage persister.; Tiptap — Rich-text post composer (mentions, hard breaks, placeholder extensions).; React Navigation — Stack and bottom-tab navigation (native-stack, bottom-tabs packages).
- **Backend & APIs**: Go — The bskyweb binary serves the built web bundle and the embedr/link HTML templates.; Express — bskylink (link resolver) and bskyogcard (Open Graph card renderer) are small standalone Express services.
- **Data & persistence**: PostgreSQL — bskylink persists shortened links; accessed through Kysely's pg driver.
- **Infrastructure & deploy**: Docker — Root Dockerfile is a 3-stage pnpm → Go → debian-slim build for bskyweb; separate Dockerfiles exist for bskylink, bskyogcard and embedr.; GitHub Actions — CI (lint, typecheck, Go tests), nightly builds/E2E, and per-service AWS/GHCR image publishing.; Sentry — Crash reporting and sourcemap upload for both native (sentry-expo) and web builds.
---
## 3. KEY ARCHITECTURAL DECISIONS (audited from https://github.com/bluesky-social/social-app @ 547b615)
1. **One repo builds native apps, a web SPA, and three small Go/Express services**: The workspace's src/ tree is the React Native app for iOS/Android/Web. Alongside it sit four largely independent projects with their own package.json and lockfile: bskyweb (Go, serves the web bundle and embed pages), bskylink (Express + PostgreSQL link shortener), bskyogcard (Express OG-card renderer), and bskyembed (a Preact micro-bundle for oEmbed cards).
2. **Web is not React Native Web running live — it is a static bundle served by a Go binary**: `pnpm build-web` runs `expo export:web`, then `scripts/post-web-build.js` copies the output into `bskyweb/static` and regenerates `bskyweb/templates/scripts.html` so Go`s `go:embed` can bundle it. The root Dockerfile builds the JS with the official pnpm image before compiling `bskyweb` with Go 1.26 in a second stage.
3. **Native dependency patches are pinned and reviewable, not forked silently**: `pnpm-workspace.yaml` lists 17 `patchedDependencies` entries (react-native, expo, expo-notifications, react-native-screens, etc.), each paired with a `.patch` file under `patches/` and often a companion `.patch.md` explaining why the patch exists.
4. **Server state and offline caching go through TanStack Query, not a custom store**: package.json depends on `@tanstack/react-query`, `react-query-persist-client` and `query-async-storage-persister` together, so cached feed and profile data survives app restarts without a bespoke local database layer.
5. **Feature flags run through GrowthBook rather than a homegrown system**: `@growthbook/growthbook` and `@growthbook/growthbook-react` are direct dependencies, giving the app remotely configurable flags and experiments independent of the AT Protocol client packages.
---
## 4. NON-NEGOTIABLE ARCHITECTURAL GUARDRAILS
1. **Monorepo & Modular Separation**:
   - Structure as a Turborepo monorepo with strict package boundaries:
     - `apps/web`: Application UI, routing, layouts, and server endpoints.
     - `packages/ui`: Shared design tokens, CSS variables, and Radix UI primitive components.
     - `packages/db`: Database schemas, client singleton, declarative migrations, and seed scripts.
     - `packages/config`: Shared TypeScript, ESLint, and build configurations.
2. **Strict Type Safety & Zero `any` Policy**:
   - Enable `strict: true`, `noImplicitAny: true`, and `strictNullChecks: true`.
   - Validate ALL external inputs, API request bodies, and query parameters with **Zod** schemas before execution.
3. **Frontend & Rendering Guidelines**:
   - Utilize Expo Router v4 with file-based navigation. Apply NativeWind for cross-platform styling and wrap screens with SafeAreaProvider for native iOS and Android gesture and notch support.
4. **Design System & Aesthetics**:
   - Keep every color, radius, shadow and font in a single token file (CSS variables) and consume tokens everywhere; never hardcode hex values in components.
   - Prefer crisp 1px borders and one subtle shadow scale over blurry default shadows. Pair one sans-serif for body/headings with one monospace for tags, badges, metrics, and code.
5. **Data Layer & Reliability**:
   - Write declarative schema definitions with foreign keys, composite indexes on queried filters, and automated timestamp triggers.
   - Use connection pooling and prepared statements for serverless database execution.
---
## 5. STEP-BY-STEP SCAFFOLDING ROADMAP
- **Phase 1: Workspace & Root Config**: Initialize package manager, monorepo configuration (`turbo.json`, `tsconfig.base.json`, `package.json`).
- **Phase 2: Database Schema & Client**: Set up the data layer (PostgreSQL): client, connection pool, models, and migration scripts.
- **Phase 3: Design Tokens & UI Primitives**: Build accessible `Button`, `Input`, `Card`, `Badge`, and layout wrappers inside `packages/ui`.
- **Phase 4: Core Application Routes & Handlers**: Implement primary authentication, user session handling, and application routes.
- **Phase 5: Quality Assurance & Build Verification**: Run `tsc --noEmit`, ESLint, Prettier, and smoke test suites to ensure zero compilation or runtime errors.
---
## 6. EXECUTION INSTRUCTIONS
1. Review all specifications, architectural guardrails, and stack choices above.
2. Present the full monorepo directory tree structure.
3. Systematically generate the complete, production-ready codebase according to the 5-phase roadmap above — starting with the root workspace setup, followed by the database schema, UI design system package, and full-stack application routes until the repository is fully scaffolded and ready to run.