Skip to content

Commit 283d036

Browse files
jnrahmejnrahme
committed
Add clickable video poster
1 parent 7e960ba commit 283d036

2 files changed

Lines changed: 25 additions & 23 deletions

File tree

‎README.md‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ feature branch.
2020

2121
## Demo Video
2222

23+
[![Watch the 67-second implementation walkthrough](docs/showcase/gametime-order-history-showcase-poster.jpg)](docs/showcase/gametime-order-history-showcase.mp4)
24+
2325
[Watch the 67-second implementation walkthrough](docs/showcase/gametime-order-history-showcase.mp4).
2426
It uses the native app screenshots below with ElevenLabs narration to cover the
2527
purchase timeline, receipt detail, Share with Friends flow, rotation-aware UI,
@@ -33,32 +35,32 @@ take-home prompt: order history, filters/search, detail receipt, calendar
3335
sharing, and rotation-aware layout. These captures come from the native Expo app
3436
running in the iPhone 16 iOS Simulator, not from the web preview.
3537

36-
| 1. Order history | 2. Receipt + Share with Friends | 3. Native iOS share |
37-
| --- | --- | --- |
38+
| 1. Order history | 2. Receipt + Share with Friends | 3. Native iOS share |
39+
| --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
3840
| ![Native iOS GameTime order history list](docs/screenshots/order-history-native-portrait.png) | ![Native iOS GameTime receipt detail with Share with Friends](docs/screenshots/order-detail-native-receipt-share.png) | ![Native iOS share sheet with generated calendar event text](docs/screenshots/order-detail-native-ios-share-sheet.png) |
3941

40-
| Search empty state | Past purchases filter | Shared confirmation |
41-
| --- | --- | --- |
42+
| Search empty state | Past purchases filter | Shared confirmation |
43+
| --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
4244
| ![Native iOS GameTime order history empty search state](docs/screenshots/order-history-native-empty-search.png) | ![Native iOS GameTime order history past filter](docs/screenshots/order-history-native-past-filter.png) | ![Native iOS GameTime detail after share completes](docs/screenshots/order-detail-native-shared-state.png) |
4345

44-
| Rotation-aware landscape layout |
45-
| --- |
46+
| Rotation-aware landscape layout |
47+
| ---------------------------------------------------------------------------------------------------------- |
4648
| ![Native iOS GameTime order history landscape layout](docs/screenshots/order-history-native-landscape.png) |
4749

4850
## Assessment Evidence
4951

5052
The attached PDF asks for an order history experience with these points. This
5153
repo proves each one directly in the product surface, source, and tests.
5254

53-
| PDF requirement | Where it is proven |
54-
| --- | --- |
55-
| Display a list of the user's past purchases | The order timeline is shown in the order history screenshots above. Implementation: [OrdersListScreen.tsx](src/features/orders/OrdersListScreen.tsx), [OrderCard.tsx](src/features/orders/OrderCard.tsx), and [mockOrders.ts](src/data/mockOrders.ts). |
56-
| Tapping a purchase opens a detail screen | The receipt detail screenshot shows the selected order path. Implementation: [OrdersExperience.tsx](src/features/orders/OrdersExperience.tsx) handles selection and back navigation; [OrderDetailScreen.tsx](src/features/orders/OrderDetailScreen.tsx) renders the detail view. |
57-
| Detail includes event name and information | The detail screen shows the event name, venue, date, category, confirmation, payment, and seats. Formatting is centralized in [formatters.ts](src/domain/orders/formatters.ts). |
58-
| Detail includes receipt with price breakdown | The receipt screenshot shows subtotal, fees, tax, discount when present, and total. Implementation: [ReceiptRow.tsx](src/components/ReceiptRow.tsx) and `getReceiptLineItems` in [formatters.ts](src/domain/orders/formatters.ts). |
55+
| PDF requirement | Where it is proven |
56+
| --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
57+
| Display a list of the user's past purchases | The order timeline is shown in the order history screenshots above. Implementation: [OrdersListScreen.tsx](src/features/orders/OrdersListScreen.tsx), [OrderCard.tsx](src/features/orders/OrderCard.tsx), and [mockOrders.ts](src/data/mockOrders.ts). |
58+
| Tapping a purchase opens a detail screen | The receipt detail screenshot shows the selected order path. Implementation: [OrdersExperience.tsx](src/features/orders/OrdersExperience.tsx) handles selection and back navigation; [OrderDetailScreen.tsx](src/features/orders/OrderDetailScreen.tsx) renders the detail view. |
59+
| Detail includes event name and information | The detail screen shows the event name, venue, date, category, confirmation, payment, and seats. Formatting is centralized in [formatters.ts](src/domain/orders/formatters.ts). |
60+
| Detail includes receipt with price breakdown | The receipt screenshot shows subtotal, fees, tax, discount when present, and total. Implementation: [ReceiptRow.tsx](src/components/ReceiptRow.tsx) and `getReceiptLineItems` in [formatters.ts](src/domain/orders/formatters.ts). |
5961
| Share with Friends generates a calendar event | The native receipt screenshot shows the CTA, the native iOS share sheet screenshot shows the generated event text, and the shared-state screenshot shows the completed action. Implementation: [calendar.ts](src/domain/orders/calendar.ts) builds the ICS payload and [shareCalendar.ts](src/services/shareCalendar.ts) sends it to native/web share surfaces with clipboard fallback. |
60-
| Simulate network calls with mock data | [ordersApi.ts](src/services/ordersApi.ts) simulates `GET /orders` and `GET /orders/:orderId` with latency, failure states, and Zod response validation from [schema.ts](src/domain/orders/schema.ts). |
61-
| Include test coverage | Tests cover selectors, formatting, calendar generation, mock API validation, query hooks, route containers, list/detail UI, share fallback, and the app shell. Run `make verify` for TypeScript plus Jest coverage gates. |
62+
| Simulate network calls with mock data | [ordersApi.ts](src/services/ordersApi.ts) simulates `GET /orders` and `GET /orders/:orderId` with latency, failure states, and Zod response validation from [schema.ts](src/domain/orders/schema.ts). |
63+
| Include test coverage | Tests cover selectors, formatting, calendar generation, mock API validation, query hooks, route containers, list/detail UI, share fallback, and the app shell. Run `make verify` for TypeScript plus Jest coverage gates. |
6264

6365
## Implementation Showcase
6466

@@ -153,15 +155,15 @@ flowchart LR
153155

154156
## Architecture Decisions
155157

156-
| Decision | Why it exists | Where to inspect |
157-
| --- | --- | --- |
158-
| Expo SDK 56 on Node 22 | Matches the current React Native stack while keeping setup repeatable with `nvm use`. | [.nvmrc](.nvmrc), [package.json](package.json), [app.json](app.json) |
159-
| React Navigation native stack | The prompt has two real screens. A navigator gives route params, Android hardware back, iOS swipe-back, and deep-link readiness without custom back-stack code. | [OrdersExperience.tsx](src/features/orders/OrdersExperience.tsx), [navigation.ts](src/features/orders/navigation.ts) |
160-
| TanStack Query for server state | Orders are fetched data with cache, retry, refetch, stale-time, loading, and error semantics. Query owns that; containers keep only local UI state. | [App.tsx](App.tsx), [queries.ts](src/features/orders/queries.ts) |
161-
| Containers separate behavior from rendering | Containers read routes and queries, derive filtered data, and pass plain props to screens. Screens stay testable and presentation-focused. | [OrdersListContainer.tsx](src/features/orders/OrdersListContainer.tsx), [OrderDetailContainer.tsx](src/features/orders/OrderDetailContainer.tsx) |
162-
| Zod at the mock API boundary | Mock data is treated like real backend data: it is validated before reaching the UI, and TypeScript types are inferred from the schemas. | [schema.ts](src/domain/orders/schema.ts), [ordersApi.ts](src/services/ordersApi.ts) |
163-
| FlashList for the timeline | Order history is a list surface that can grow. Virtualization is included now so the implementation scales beyond seed data. | [OrdersListScreen.tsx](src/features/orders/OrdersListScreen.tsx) |
164-
| Native share with web fallback | The primary experience is mobile. Web preview still behaves reasonably through `navigator.share` or clipboard fallback. | [calendar.ts](src/domain/orders/calendar.ts), [shareCalendar.ts](src/services/shareCalendar.ts) |
158+
| Decision | Why it exists | Where to inspect |
159+
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
160+
| Expo SDK 56 on Node 22 | Matches the current React Native stack while keeping setup repeatable with `nvm use`. | [.nvmrc](.nvmrc), [package.json](package.json), [app.json](app.json) |
161+
| React Navigation native stack | The prompt has two real screens. A navigator gives route params, Android hardware back, iOS swipe-back, and deep-link readiness without custom back-stack code. | [OrdersExperience.tsx](src/features/orders/OrdersExperience.tsx), [navigation.ts](src/features/orders/navigation.ts) |
162+
| TanStack Query for server state | Orders are fetched data with cache, retry, refetch, stale-time, loading, and error semantics. Query owns that; containers keep only local UI state. | [App.tsx](App.tsx), [queries.ts](src/features/orders/queries.ts) |
163+
| Containers separate behavior from rendering | Containers read routes and queries, derive filtered data, and pass plain props to screens. Screens stay testable and presentation-focused. | [OrdersListContainer.tsx](src/features/orders/OrdersListContainer.tsx), [OrderDetailContainer.tsx](src/features/orders/OrderDetailContainer.tsx) |
164+
| Zod at the mock API boundary | Mock data is treated like real backend data: it is validated before reaching the UI, and TypeScript types are inferred from the schemas. | [schema.ts](src/domain/orders/schema.ts), [ordersApi.ts](src/services/ordersApi.ts) |
165+
| FlashList for the timeline | Order history is a list surface that can grow. Virtualization is included now so the implementation scales beyond seed data. | [OrdersListScreen.tsx](src/features/orders/OrdersListScreen.tsx) |
166+
| Native share with web fallback | The primary experience is mobile. Web preview still behaves reasonably through `navigator.share` or clipboard fallback. | [calendar.ts](src/domain/orders/calendar.ts), [shareCalendar.ts](src/services/shareCalendar.ts) |
165167

166168
## AI-Assisted Delivery Model
167169

‎docs/showcase/gametime-order-history-showcase-poster.jpg‎

162 KB
Loading

0 commit comments

Comments
 (0)