This implementation turns a compact order-history prompt into a brand-aligned React Native experience with real navigation, server-state caching, runtime API validation, rotation-aware layouts, and a native share-ready calendar flow.
A 67-second narrated pass through the native purchase timeline, receipt detail, Share with Friends flow, rotation-aware layout, and review-ready engineering decisions.
The prompt asks for past purchases, detail receipts, mock network calls, sharing, and test coverage. The implementation goes further by showing how those requirements would become a maintainable mobile feature inside a real ticketing product.
The React Native app uses safe areas, React Navigation native stack behavior, cached event artwork, native share APIs, accessible press targets, and orientation-aware layouts. The web preview exists only as a reviewer convenience.
The visual system follows the current GameTime language: near-black surfaces, white type, event imagery, and mint emphasis for state and action.
Mock endpoints live behind a validated service boundary, server state lives in TanStack Query, route state lives in React Navigation, and screens receive plain props.
The repo separates prompt-aligned entities, deterministic domain logic, mock networking, presentation state, and UI primitives. That keeps feature work local while making replacement paths clear.
The point of the mock layer is not to fake complexity. It is to define the same contract a real backend would satisfy later, while keeping navigation and server state in the libraries built for those jobs.
The implementation uses real libraries where they remove real risk, and simple local code where a library would be ceremony. This is the architecture review in plain English.
The detail screen is a route, not a boolean. That gives the app route params, native back behavior, iOS swipe-back, and deep-link readiness through `gametime://orders/:orderId`.
Orders have loading, retry, stale-time, cache, and refetch semantics. Query owns those concerns so screens do not hand-roll flags or duplicate async logic.
Mock responses are validated like real network responses. TypeScript types are inferred from the same schemas, so runtime contracts and compile-time contracts stay aligned.
Containers connect routes, queries, local search/filter state, and selectors. Screens receive plain props and stay focused on layout, accessibility, and user interaction.
A purchase history can grow. Virtualization keeps the timeline ready for larger data sets without changing the screen API.
Remote event images load through a shared CachedImageBackground: memory and disk caching, a blurhash placeholder, and a short fade. The heaviest content on the screen never re-downloads or flashes blank on scroll.
Large display text is capped with a maximum font multiplier so big accessibility text sizes never overflow fixed layouts, while body text stays free to scale.
The README uses iPhone simulator captures for the primary proof path: order history, empty search, past filter, receipt, native share sheet, shared state, and landscape layout.
The app is not locked to portrait. It uses viewport dimensions to change hero height, type scale, metric placement, and detail composition so the interface remains intentional after rotation.
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.
Coverage validates calendar generation, receipt formatting, selectors, TanStack Query hooks, container retries, mock API validation, share fallbacks, and list/detail interactions.
ESLint (expo config) and Prettier run locally and in CI. `npm run verify` chains strict typing, linting, and tests, and CI fails on any unformatted file.
Zod validates mock API responses at the trust boundary while TypeScript types are inferred from the same schemas to prevent contract drift.
Node 22, Expo SDK 56, React Native 0.85, React Navigation, TanStack Query, FlashList, expo-image, and SDK-matched packages are encoded in the repo and checked before push.
Buttons use roles and labels, status chips include text, native-stack back behavior is delegated to React Navigation, and an app error boundary prevents a blank failure state.
$ nvm use
$ npm run format
$ make verify
$ make expo-checkA strong GitHub page should make the quality bar visible: truthful badges, community health files, screenshots, diagrams, repeatable commands, and metadata that matches the implementation.
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.
Conduct, contribution, security, license, and CODEOWNERS files fill the public GitHub trust surface without making false claims.
The docs include a repository profile with description, homepage, topics, and public surface checklist for consistency.
$ make verify
$ make expo-check
$ gh repo edit jnrahme/GameTimeTest --description "GameTime-themed React Native order history take-home"The AI workflow was treated like a senior engineer with tools: read the repo first, obey project rules, use specialist skills for the work at hand, verify before claiming success, and keep public documentation tied to evidence.
The repo instructions require Node 22, Expo SDK 56 docs before RN/Expo changes, typed mock API boundaries, accessible mobile UI, and tests for order and sharing behavior.
SmartAssist was queried before edits and architecture decisions. Its local data directory was missing, so no hidden memory was used; the source, prompt, docs, and test output became the authority.
Brainstorming shaped scope, React Native guidance shaped mobile decisions, UI/UX guidance shaped this site, Playwright checked visuals, and GitHub guidance handled publishing.
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.
1. Read prompt, AGENTS.md, source, and existing docs
2. Check SmartAssist MCP for project memory
3. Apply relevant Codex skills: RN, UI/UX, GitHub, Playwright, verification
4. Implement with small architecture boundaries
5. Verify locally, push, watch CI, and confirm GitHub Pages