Polish hosted showcase and image handling

Author: jnrahme

.github/pull_request_template.md

@@ -1,6 +1,6 @@
 ## Summary
 
-- 
+-
 
 ## Verification
 

.github/workflows/ci.yml

@@ -24,7 +24,10 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Typecheck and test
+      - name: Check formatting
+        run: npm run format:check
+
+      - name: Typecheck, lint, and test
         run: npm run verify
 
       - name: Expo dependency compatibility

.prettierignore

@@ -0,0 +1,7 @@
+node_modules
+.expo
+dist
+coverage
+docs
+package-lock.json
+*.hbc

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "semi": true
+}

AGENTS.md

@@ -1,5 +1,65 @@
-# Project Instructions
+# Agent Guide
 
-- Use Node 22 via `nvm use`; `.nvmrc` intentionally tracks the latest Node 22 line.
-- Use the Expo SDK 56 docs at https://docs.expo.dev/versions/v56.0.0/ before changing Expo or React Native behavior.
-- Keep the take-home focused: typed mock API boundaries, accessible React Native UI, and tests for order and sharing behavior.
+Instructions for AI agents and contributors working in this repository. Keep
+changes small, typed, tested, and consistent with the patterns described below.
+
+## Setup and commands
+
+- Use **Node 22** via `nvm use` (`.nvmrc` tracks the latest Node 22 line, and
+  `engines` pins `>=22.13.0 <23`). Install dependencies with `npm ci`.
+- Consult the **Expo SDK 56** documentation
+  (https://docs.expo.dev/versions/v56.0.0/) before modifying any Expo or React
+  Native behavior. Add native dependencies with `npx expo install` rather than a
+  bare `npm install`, so versions remain SDK-compatible.
+- Run the application with `npm run ios`, `npm run android`, or `npm run web`.
+- Keep the following commands green before every pull request or material change:
+  - `npm run verify` — strict `tsc --noEmit` followed by Jest with coverage.
+  - `make expo-check` — confirms installed versions match Expo SDK 56.
+- Coverage thresholds are enforced (branches 80, functions 90, lines and
+  statements 95). Add tests to meet them rather than lowering the thresholds.
+
+## Architecture and layering
+
+Dependencies point downward only; a layer must not reference the layers above it.
+
+```
+App.tsx (QueryClientProvider + error boundary)
+  OrdersExperience            navigation.ts — NavigationContainer + native stack
+    Container components       connect TanStack Query hooks and navigation params
+      Screen components        presentational, props-in, no data fetching
+  features/orders/queries.ts  server-state hooks (useOrders / useOrder)
+  services/ordersApi.ts       mock API boundary that validates with Zod
+  domain/orders/*             pure: schema, inferred types, selectors, formatters
+  components/ + theme/        UI primitives and design tokens
+```
+
+- The `domain/` layer is pure: it contains no React and no I/O, so business
+  logic remains unit-testable without a renderer.
+- Zod is the single source of truth. `schema.ts` defines the runtime contract
+  and `types.ts` infers the domain types from it. Edit the schema, not the types.
+- Validate at the boundary. `ordersApi` parses responses through the schema so
+  untrusted data never enters the domain untyped.
+- Server data is not component state. Fetching, caching, retry, and refetch are
+  owned by TanStack Query (`queries.ts`); screens receive data through container
+  props.
+- Screens are presentational. Containers own data and navigation, while screens
+  own layout and interaction, which keeps screens straightforward to test.
+- Pass identifiers as typed route params, not globals. `orderId` travels through
+  the navigation route defined in `navigation.ts`, which also enables `gametime://`
+  deep links.
+
+## Conventions
+
+- Use the design tokens in `src/theme/tokens.ts` rather than hardcoded
+  per-screen colors.
+- Store and pass monetary values as integer cents, and format them only at the
+  edge with `formatMoney`. Represent dates as ISO strings.
+- Accessibility is required: provide meaningful `accessibilityLabel` and
+  `accessibilityRole` values on interactive elements, and maintain touch targets
+  of at least 44pt.
+- Follow the testing pyramid: cover pure logic in `domain/` with unit tests for
+  each path, and cover hooks, containers, and screens with behavior tests using
+  React Testing Library. Mock only at the API and native-module boundaries, never
+  internal modules.
+- Keep the project focused on its purpose: typed mock API boundaries, accessible
+  React Native UI, and tests for order and sharing behavior.

README.md

@@ -92,8 +92,8 @@ make verify
 make expo-check
 ```
 
-`make verify` runs TypeScript in strict mode plus the Jest suite with coverage
-thresholds: 95% statements, 95% lines, 90% functions, and 80% branches.
+`make verify` runs TypeScript in strict mode, ESLint, and the Jest suite with
+coverage thresholds: 95% statements, 95% lines, 90% functions, and 80% branches.
 `make expo-check` verifies Expo SDK package compatibility.
 
 ## Architecture
@@ -147,7 +147,7 @@ and responsive layouts that also hold up in Expo's web preview.
 flowchart LR
   Rules[AGENTS.md + Node 22] --> Build[Expo React Native implementation]
   Build --> Verify[make verify]
-  Verify --> Coverage[43 tests + coverage gate]
+  Verify --> Coverage[46 tests + coverage gate]
   Coverage --> ExpoCheck[make expo-check]
   ExpoCheck --> Screens[Native iOS portrait + landscape screenshots]
   Screens --> CI[GitHub Actions CI]

app.json

@@ -23,6 +23,7 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "plugins": ["expo-image"]
   }
 }

docs/index.html

@@ -51,6 +51,7 @@
 
       img {
         display: block;
+        height: auto;
         max-width: 100%;
       }
 
@@ -726,8 +727,8 @@ <h1>Built like a production GameTime mobile feature.</h1>
               />
             </div>
             <div class="proof-row">
-              <div class="proof"><strong>41</strong><span>Passing tests</span></div>
-              <div class="proof"><strong>13</strong><span>Jest suites</span></div>
+              <div class="proof"><strong>46</strong><span>Passing tests</span></div>
+              <div class="proof"><strong>14</strong><span>Jest suites</span></div>
               <div class="proof"><strong>95</strong><span>Line coverage gate</span></div>
             </div>
           </aside>
@@ -753,9 +754,9 @@ <h2>Why this shape wins the review.</h2>
                 <h3>Mobile first, not web disguised as mobile.</h3>
                 <p>
                   The React Native app uses safe areas, React Navigation native
-                  stack behavior, native share APIs, accessible press targets,
-                  and orientation-aware layouts. The web preview exists only as a
-                  reviewer convenience.
+                  stack behavior, cached event artwork, native share APIs,
+                  accessible press targets, and orientation-aware layouts. The
+                  web preview exists only as a reviewer convenience.
                 </p>
               </article>
               <article class="card metric-card">
@@ -832,7 +833,7 @@ <h2>Layered to make tradeoffs obvious.</h2>
                   <div class="layer-nodes">
                     <div class="node">Runtime schemas with inferred TypeScript types</div>
                     <div class="node">Selectors, receipt formatters, and ICS generation</div>
-                    <div class="node">FlashList timeline, receipt detail, and GameTime tokens</div>
+                    <div class="node">FlashList timeline, cached event artwork, and GameTime tokens</div>
                   </div>
                 </div>
               </div>
@@ -985,9 +986,10 @@ <h2>Portrait and landscape are first-class.</h2>
               <div class="eyebrow"><span class="spark" aria-hidden="true"></span> Quality Gates</div>
               <h2>Evidence before claims.</h2>
               <p>
-                The implementation is backed by strict typing, tests around the
-                highest-risk business behavior, enforced coverage thresholds,
-                Expo compatibility checks, and native simulator screenshots.
+                The implementation is backed by formatting checks, linting,
+                strict typing, tests around the highest-risk business behavior,
+                enforced coverage thresholds, Expo compatibility checks, and
+                native simulator screenshots.
               </p>
             </div>
             <div class="grid grid-2">
@@ -1046,9 +1048,9 @@ <h2>Professional before the first file opens.</h2>
                 <span class="number">CI</span>
                 <h3>Verification is automated.</h3>
                 <p>
-                  GitHub Actions installs with Node 22, runs strict TypeScript,
-                  executes Jest with coverage thresholds, and checks Expo SDK
-                  package compatibility.
+                  GitHub Actions installs with Node 22, checks formatting, runs
+                  strict TypeScript, lints the source, executes Jest with
+                  coverage thresholds, and checks Expo SDK package compatibility.
                 </p>
               </article>
               <article class="card metric-card">
@@ -1119,9 +1121,9 @@ <h2>How Codex was used without losing engineering control.</h2>
                 <small>Verification</small>
                 <strong>Evidence before claims</strong>
                 <p>
-                  The workflow runs typecheck, Jest coverage gates, Expo package
-                  compatibility, native screenshots, CI, and Pages checks before
-                  presenting the work as review-ready.
+                  The workflow runs formatting checks, lint, typecheck, Jest
+                  coverage gates, Expo package compatibility, native screenshots,
+                  CI, and Pages checks before presenting the work as review-ready.
                 </p>
               </article>
             </div>

eslint.config.js

@@ -0,0 +1,17 @@
+// ESLint flat config (ESLint 9). Expo's rules + Prettier compatibility.
+const expoConfig = require('eslint-config-expo/flat');
+const eslintConfigPrettier = require('eslint-config-prettier');
+
+module.exports = [
+  ...expoConfig,
+  eslintConfigPrettier,
+  {
+    ignores: [
+      'node_modules/**',
+      'dist/**',
+      '.expo/**',
+      'docs/**',
+      'coverage/**',
+    ],
+  },
+];