🎮 SIDEQUEST

A video game discovery app built with React Native and Expo, powered by the RAWG database.
Responsive from phone to desktop.

Where this project is heading: ARCADE (2021) is being resurrected and evolved into Respec — an app for time-poor gamers that answers "what can I actually finish?" The full product spec lives in docs/PRODUCT.md, and validation work in docs/validation/. This README covers the current codebase: a modernised version of the original game-discovery app.

Stack

• Expo SDK 57 / React Native 0.86 / React 19
• TypeScript (strict) · expo-router file-based navigation
• ESLint + Prettier · CI via GitHub Actions
• RAWG API for game data

Get started

git clone https://github.com/ginoleeswan/sidequest
cd sidequest
npm install

# API key (free): https://rawg.io/apidocs
cp .env.example .env   # then paste your key in

npx expo start

Open in Expo Go, an emulator, or press w for web.

Scripts

Command
npm run typecheck	TypeScript, no emit
npm run lint	ESLint
npm run format	Prettier write
npm test	Jest (unit and component)
npm run test:hydration	builds nothing — runs e2e/hydration.mjs over dist/
npm run test:a11y	axe (WCAG A/AA) over dist/, both widths
npm run test:icons	every named icon draws from the subset font
npm run test:perf	4G + 4x CPU: bytes, FCP, LCP, CLS against budgets
node scripts/subset-icons.mjs	regenerate the Ionicons subset (after adding an icon)
node scripts/duration-coverage.mjs	data-source validation (see docs/validation/)

test:hydration and test:a11y need a dist/ from npm run build, and a Chromium that Playwright can launch. Where the installed browser does not match the Playwright build (a sandbox with its own browsers, say), point at it:

CHROMIUM_PATH=/path/to/chrome npm run test:hydration

Deploy (Vercel)

The web build is a static export — vercel.json is already configured.

1. Import the repo at vercel.com/new (framework preset: Other — vercel.json supplies the build command and output directory).
2. Add environment variables in the project settings:
   • EXPO_PUBLIC_RAWG_API_KEY = your RAWG key.
   • STEAM_API_KEY = your Steam Web API key (steamcommunity.com/dev/apikey) — powers Steam connect on The Plan. Server-side only (used by api/steam.ts), never shipped to the browser. Optional: without it, Steam connect shows a friendly "not configured" message.
   • TWITCH_CLIENT_ID and TWITCH_CLIENT_SECRET = a Twitch application (dev.twitch.tv/console/apps) — IGDB authenticates through Twitch, and these power the reported time-to-beat figures the plan is built on. Server-side only (used by api/igdb.ts). Optional: without them every length falls back to RAWG's average, which is the behaviour before they are set.
3. Deploy. Dynamic game pages (/game/123) are served via the rewrite in vercel.json.

Or from the CLI: npx vercel --prod (after npx vercel env add EXPO_PUBLIC_RAWG_API_KEY).

Structure

src/
  app/          # expo-router routes (_layout, index, game/[id])
  api/          # typed RAWG client
  components/   # UI components
  styles/       # colors, typography
assets/         # fonts, icons, images
docs/           # product spec, validation, screenshots

Author

Gino Swanepoel — GitHub · Twitter · LinkedIn