# How Trackmint Is Built & Shipped — the complete guide

*Everything about how this product gets made: who does what, the tech stack, every environment, every key and token, and the exact journey code takes from an idea to your iPhone. Written so anyone can follow it.*

## 1. Who does what (the team model)

**You (Barry)** are the product owner: you describe features in plain words and make decisions. **Claude (Cowork/Claude Code)** is the designer AND the engineer: it designs the screens, writes the code, tests it, and ships it. **Claude is also a worker inside the product** (the AI employee on the board). Content tools (Higgsfield for video, this doc library for text) are the marketing department, also run by Claude under your approval. There is no human engineering team — that's the point, and the story.

## 2. The tech stack (what it's made of)

**One codebase, four products.** The app is written in **TypeScript** using **React Native + Expo** — write the screens once, and the SAME code becomes the iPhone app, the Android app, and the web app. **Firebase** is the backend: **Auth** (login accounts) and **Firestore** (the database — one record per workspace, plus the `config/billing` control record). There is deliberately **no server of our own** — the app talks straight to Firebase, which is why hosting costs $0 today. **Git** records every change (13+ commits); pushing to **GitHub** (waiting on your token) adds cloud backup and opens the door to automatic CI later. Quality is guarded by the **QA suite**: 15 robot-driven workflows / 94 checks that replay real business scenarios against every build.

## 3. The pipeline — how code becomes an app (the diagram)

<svg viewBox="0 0 900 330" xmlns="http://www.w3.org/2000/svg" style="max-width:100%;height:auto;font-family:system-ui,sans-serif;">
<style>.b{fill:#fff;stroke:#14213D;stroke-width:2;rx:10;}.g{fill:#FCA311;stroke:#14213D;stroke-width:2;}.t{font-size:13px;fill:#14213D;font-weight:700;}.s{font-size:10.5px;fill:#5a6275;}.a{stroke:#FCA311;stroke-width:2.5;fill:none;marker-end:url(#ar);}</style>
<defs><marker id="ar" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 z" fill="#FCA311"/></marker></defs>
<rect class="b" x="10" y="30" width="150" height="70" rx="10"/><text class="t" x="30" y="58">1 · You describe</text><text class="s" x="30" y="76">a feature (plain words)</text>
<rect class="b" x="200" y="30" width="170" height="70" rx="10"/><text class="t" x="218" y="52">2 · Claude codes it</text><text class="s" x="218" y="70">React Native + TypeScript</text><text class="s" x="218" y="86">then runs 94 QA checks</text>
<rect class="b" x="410" y="30" width="150" height="70" rx="10"/><text class="t" x="428" y="58">3 · Git commit</text><text class="s" x="428" y="76">(→ GitHub when ready)</text>
<rect class="g" x="600" y="20" width="130" height="44" rx="10"/><text class="t" x="615" y="47">4a · Web app</text>
<rect class="g" x="600" y="76" width="130" height="44" rx="10"/><text class="t" x="615" y="103">4b · EAS build</text>
<line class="a" x1="160" y1="65" x2="198" y2="65"/><line class="a" x1="370" y1="65" x2="408" y2="65"/>
<line class="a" x1="560" y1="50" x2="598" y2="42"/><line class="a" x1="560" y1="80" x2="598" y2="96"/>
<rect class="b" x="600" y="150" width="130" height="56" rx="10"/><text class="t" x="612" y="172">Your website</text><text class="s" x="612" y="190">apex.socialtokens.site</text>
<line class="a" x1="665" y1="64" x2="665" y2="148"/>
<rect class="b" x="770" y="20" width="120" height="56" rx="10"/><text class="t" x="782" y="42">TestFlight</text><text class="s" x="782" y="60">(builds 7…15)</text>
<line class="a" x1="730" y1="98" x2="768" y2="60"/>
<rect class="b" x="770" y="100" width="120" height="56" rx="10"/><text class="t" x="782" y="122">App Store</text><text class="s" x="782" y="140">(release when ready)</text>
<line class="a" x1="830" y1="76" x2="830" y2="98"/>
<rect class="b" x="770" y="180" width="120" height="56" rx="10"/><text class="t" x="782" y="202">Android APK</text><text class="s" x="782" y="220">(→ Play Store later)</text>
<line class="a" x1="730" y1="112" x2="768" y2="200"/>
<rect class="b" x="10" y="240" width="720" height="70" rx="10"/><text class="t" x="30" y="266">Firebase (the backend both apps talk to)</text><text class="s" x="30" y="286">Auth = accounts · Firestore = workspaces/{uid} data + config/billing (the monetization switch) · rules = who may read/write</text>
</svg>

**In words:** you describe → Claude writes React Native code and tests it → git commit → two outputs from the same code: (a) `expo export` produces the **web app**, copied to your website; (b) **EAS Build** (Expo's cloud build farm) compiles the real iPhone app on Apple hardware in the cloud, signs it with your certificates, and **auto-submits to TestFlight**. From TestFlight, promoting to the **public App Store** is a button in App Store Connect (add screenshots + description, submit for Apple review). Android takes path (b) too — the same EAS command with `--platform android` makes an APK now, an AAB for the Play Store later (doc 36).

## 4. The environments (where things live)

1. **Claude's cloud workspace** — where code is written and the QA suite + video generator run. Ephemeral; everything important is committed to git.
2. **Your VPS** (Hostinger, apex.socialtokens.site) — serves the website + docs + videos + admin console + web app; also the machine that runs EAS build/submit commands (it holds the signing credentials).
3. **EAS cloud** (expo.dev, account `bazdev0001`) — Expo's build farm; compiles iOS/Android, stores the Android keystore.
4. **Apple App Store Connect** — receives builds, runs TestFlight, and (later) the public App Store listing.
5. **Firebase project `trackmint-a8604`** (Spark plan, $0) — Auth + Firestore. This is production data.
6. **Your iPhone / any Android phone** — TestFlight app + APK installs.

## 5. Every key & token (what unlocks what)

| Credential | What it unlocks | Where it lives |
|---|---|---|
| **EXPO_TOKEN** | Runs EAS builds/submits without logging in | VPS (passed inline to each build command) |
| **Apple ASC API key** (.p8, ID K3DJLR35C6 + issuer ID) | Auto-submitting builds to TestFlight | Path configured in eas.json (submit profile) |
| **iOS distribution cert + provisioning profile** | Signing the iPhone app | Managed by EAS ("local credentials") |
| **Android keystore** | Signing the Android app | Generated & stored by EAS |
| **Firebase web config** (apiKey etc.) | Lets the app find your Firebase project — public by design, NOT a secret | Inside the app code |
| **Firestore security rules** | The real security: who may read/write what | Firebase Console (owner-only writes to config) |
| **Firebase service-account key** | The admin & agent CLIs (bypasses all rules) | ⚠️ NOT YET CREATED — you generate it (Console → Service accounts) |
| **GitHub Personal Access Token** | Pushing the 13 commits to a TrackMint repo | ⚠️ NOT YET PROVIDED |
| **Higgsfield API key** (ID 02bb2287-…) | AI video generation for marketing | Recorded; needs its paired secret to use |
| **Google Play service-account JSON** | Automated Play Store submissions | Later — after you create the Play Console account |

Rule of thumb: the Firebase *web config* is safe to publish; everything else in this table is a secret — never commit any of them (the repo's .gitignore already blocks the key filenames).

## 6. The admin tool — how it's delivered (decision)

Your instinct was right: **it's now a web app** — the **Admin Console** at `/admin.html` on your website. Sign in with your owner account and you get the billing master switch, tier prices, trial length, vertical pricing, and the paywall message — usable from any browser, nothing to install, and safe: database rules mean only YOUR account's writes are accepted (anyone else who finds the page gets "denied"). It is NOT a separate App Store product — that would be slower to update and overkill for one operator. The **CLI** (`trackmint-admin.js`, doc 30) stays as the deep tool for what browser rules rightly can't allow: managing OTHER users (create/delete/passwords) and editing other people's workspace records — that needs the service-account key. So: **web console for everyday control, CLI for surgery.** Both exist today.

## 7. Release checklist (the routine, every version)

Code + `tsc` clean → 94-check QA suite green → web export → deploy website/webapp → `eas build --auto-submit` (iOS; Android APK on demand) → verify "uploaded to App Store Connect" in the build log → commit → update docs. This exact routine has shipped builds 7 through 15.