From a65bf53959329316352e0e4a9a640dc5ea04522a Mon Sep 17 00:00:00 2001 From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com> Date: Mon, 9 Mar 2026 08:41:38 +0000 Subject: [PATCH] docs: update d-sports-engage-native with expanded tech stack and architecture Generated-By: mintlify-agent --- repositories/d-sports-engage-native.mdx | 104 +++++++++++++++++++----- 1 file changed, 85 insertions(+), 19 deletions(-) diff --git a/repositories/d-sports-engage-native.mdx b/repositories/d-sports-engage-native.mdx index f3a816f..0b63a6d 100644 --- a/repositories/d-sports-engage-native.mdx +++ b/repositories/d-sports-engage-native.mdx @@ -1,28 +1,31 @@ --- title: "d-sports-engage-native" -description: "Native iOS and Android app for D-Sports Engage. Expo 54, React Native, Clerk, RevenueCat, Thirdweb." +description: "Native iOS and Android app for D-Sports Engage. Expo 54, React Native 0.81, Clerk, RevenueCat, Thirdweb." icon: "smartphone" --- ## Overview -**d-sports-engage-native** (package name: `engage-native`) is the native mobile app for D-Sports. It mirrors the core PWA experience on iOS and Android: wallet, shop, leaderboard, locker room, and profile. +**d-sports-engage-native** is the native mobile app for D-Sports. It mirrors the core PWA experience on iOS and Android: wallet, shop, leaderboard, locker room, and profile. -- **Run:** `bunx expo start` or `bun run start` — then press `a` for Android or `i` for iOS, or scan the QR code with Expo Go. +- **Run:** `bunx expo start` — then press `a` for Android or `i` for iOS, or scan the QR code with Expo Go. ## Tech stack -| Category | Technology | -| ---------- | ------------------------- | -| Framework | Expo 54, React Native 0.81, React 19 | -| Auth | Clerk (Expo) | -| Payments | RevenueCat (react-native-purchases) | -| Web3 | Thirdweb | -| State | Zustand | -| Storage | MMKV | -| UI | Lucide React Native | -| Navigation | Expo Router | -| Package | Bun | +| Package | Version | +| ------------ | ------- | +| Expo | 54.0 | +| React Native | 0.81.5 | +| React | 19.1.0 | +| TypeScript | 5.9.2 | +| Expo Router | 6.0 | +| Clerk | 2.19 | +| RevenueCat | 1.26 | +| Thirdweb | 5.118 | +| Zustand | 5.0 | +| MMKV | 4.1 | +| Reanimated | 4.1 | +| Lucide Icons | 0.562 | ## Features @@ -35,12 +38,75 @@ icon: "smartphone" ## Getting started -1. Clone the repository and run `bun install`. -2. Configure environment (Clerk, RevenueCat, Thirdweb, API base URL) per repo README. -3. Run `bunx expo start`. -4. For development builds: `bun run build:dev` (EAS) or run with Expo dev client. +```bash +# Install dependencies +bun install -The app targets both native and web (responsive) and uses the same backend (d-sports-api) as the PWA for API and checkout flows. +# Start development server +bunx expo start +# Press 'a' for Android, 'i' for iOS, or scan QR with Expo Go + +# TypeScript check +bun tsc --noEmit +``` + +Configure environment variables (Clerk, RevenueCat, Thirdweb, API base URL) per the repo README. For development builds use `bun run build:dev` (EAS) or run with Expo dev client. + +## Project structure + +```tree +app/ +├── (auth)/ # Login/signup screens +├── (onboarding)/ # New user onboarding flow +├── (tabs)/ # Main tab navigation (wallet, shop, leaderboard, locker-room, profile) +├── settings/ # Settings pages with nested modals/tabs +└── _layout.tsx # Root layout with providers + auth protection + +components/ +├── wallet/ # Wallet sub-components (TabButton, TokenRow, ActionModal, etc.) +├── shop/ # Shop sub-components (CartModal, CollectableCard, etc.) +├── locker-room/ # Locker room components +├── layout/ # AppScreen wrapper (responsive web max-width) +├── ui/ # Reusable UI primitives (Button, TextField, WebHoverWrapper, etc.) +└── Icon/ # Icon wrapper using lucide-react-native + +hooks/ +├── use-wallet-screen.ts # All wallet state, effects, and handlers +├── use-shop-screen.ts # All shop state, effects, and handlers +└── useScrollHandler.ts # Scroll-based navbar visibility + +lib/ +├── api/ # API client modules (wallet, shop, user, quests, checkout, etc.) +├── revenuecat/ # RevenueCat in-app purchases provider +└── utils.ts # Shared utilities + +context/ # React contexts (user, collectibles, navbar visibility) +services/ # Zustand store, MMKV storage, core types +theme/ # Brand colors, design tokens +types/ # TypeScript types (wallet, shop, checkout, api) +constants/ # App constants (tokens, coin bundles, etc.) +``` + +## Architecture patterns + +- **File-based routing** via Expo Router with route groups `(tabs)`, `(auth)`, `(onboarding)` +- **Modular screen architecture** — screen files contain only JSX; state/effects/handlers live in dedicated hooks +- **Extracted sub-components** — wallet and shop screens decomposed into `components/wallet/` and `components/shop/` with barrel exports +- **Zustand + MMKV** for global state with synchronous persistence +- **React Context** for auth, collectibles, navbar visibility +- **API client layer** in `lib/api/` with MMKV cache fallback +- **Crypto checkout** via Thirdweb SDK calling PWA backend for on-chain payments +- **PWA-ready** — responsive desktop layout, web hover states, keyboard nav + +## Branding + +| Token | Value | +|-------|-------| +| Base background (dark) | `#0a0e1a` | +| Accent gold | `#F5C842` / `#FFD700` | +| Primary blue | `#4169E1` | + +Default theme is dark mode. See how the native app fits with the PWA, site, and Mic'd Up.