# Arcade Kit

> A games showcase app for iOS, Android and web that runs on the device, with no backend to set up.

The OTF **Arcade Kit** is a games discovery and storefront app: featured and trending rails, genre
browsing, a Top-10 chart, a store and a detail page per game. One codebase ships iOS, Android and
web. It is browse-first: no sign-in wall and no backend, so it runs as soon as you install it. Run
it live on [its kit page](/templates/arcade-kit#run-it-live) or at
[arcade-preview.otf-kit.dev](https://arcade-preview.otf-kit.dev).

## Stack

| Layer       | Choice                                                                 |
| ----------- | ---------------------------------------------------------------------- |
| Framework   | Expo SDK 54 + React 19 + Expo Router 6 (iOS · Android · Web)           |
| UI          | `@otfdashkit/ui-native`, wrapped by kit-local game blocks              |
| Data        | TanStack Query over an in-memory catalog (`lib/catalog.ts`)            |
| Covers      | Procedural gradient + SVG pattern per game, so there is no image hosting |
| Storage     | localStorage (web) / AsyncStorage (native) for preferences             |
| Backend     | Optional Hono drop-in under `server/`; the catalog shapes already match |
| Deploy      | Railway serves the web export; EAS Build ships the native apps         |

## Pre-built screens

The kit ships with **14 screens** across a 5-tab app (**Home · Browse · Instant · Store · You**):

- **Onboarding**: welcome and permission
- **Auth**: login and signup (a local demo session; no backend sign-in by default)
- **Home**: hero carousel, featured, trending and new-release rails
- **Browse**: genre rails and category pages
- **Instant**: a Top-10 chart, hidden gems and all-time hits
- **Store**: passes, coins and gift cards
- **You**: profile, library and the accent-palette picker
- **Game detail**, **search** and **new releases**

## Conventions

- **Catalog**: every screen reads `lib/catalog.ts` through its selectors. Add a game with one `g(...)` row.
- **Theming**: dark-first with five accent palettes. Surfaces are derived from the active primary,
  so the whole app re-tints when the palette changes. Add a palette in `lib/theme.ts`.
- **Blocks**: `<GameCover />`, `<GameCard />`, `<GameRail />`, `<HeroCarousel />`, `<StoreCard />` and
  more live in `components/blocks/`.

## Adding things

The kit's `ai/prompts/` folder has 20+ task prompts: add a game or genre, a leaderboard, a
wishlist, a paywall, a new palette, wire the Hono API, add sign-in, push notifications or in-app
purchases. `CLAUDE.md`, `AGENTS.md` and `.cursorrules` give your editor the same context.

## Deploy

No environment file is needed to run it: `bun install`, then `bun run dev:expo` for the web
preview or `bun run dev:native` for iOS and Android. Railway builds the web export from the kit's
`Dockerfile`; native apps ship through EAS Build. The deployment guide ships with the kit.

## Buy

<DocsBundleBuyButton source="docs_kit_page" />

[$99 on otf-kit.dev](https://otf-kit.dev/templates/arcade-kit) — or get the
[Everything Bundle](/docs/templates/starter-bundle) ($149 = 5 live kits + all 15 landing templates; $630 separately, save $481.)