Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 71 additions & 18 deletions repositories/d-sports-engage-native.mdx
Original file line number Diff line number Diff line change
@@ -1,47 +1,100 @@
---
title: "d-sports-engage-native"
description: "Native iOS and Android app for D-Sports Engage. Expo 54, React Native, Clerk, RevenueCat, Thirdweb."

Check warning on line 3 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L3

Did you really mean '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.

Check warning on line 9 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L9

Did you really mean 'leaderboard'?

- **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.

## 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 |

Check warning on line 22 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L22

Did you really mean 'Thirdweb'?
| Zustand | 5.0 |

Check warning on line 23 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L23

Did you really mean 'Zustand'?
| MMKV | 4.1 |
| Reanimated | 4.1 |
| Lucide Icons | 0.562 |

Check warning on line 26 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L26

Did you really mean 'Lucide'?

## Features

- **Wallet** — Tokens, holdings, pack opening, crypto checkout (via PWA backend)

Check warning on line 30 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L30

Did you really mean 'crypto'?
- **Shop** — Collectibles, cart, coin bundles, checkout
- **Leaderboard** — Rankings and filters

Check warning on line 32 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L32

Did you really mean 'Leaderboard'?
- **Locker room** — Social feed and engagement
- **Profile** — User profile and settings
- **Theme** — Dark/light mode (default dark)

## 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

# 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) before running.

Check warning on line 51 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L51

Did you really mean 'Thirdweb'?

## Project structure

```tree
app/
├── (auth)/ # Login/signup screens
├── (onboarding)/ # New user onboarding flow
├── (tabs)/ # Main tab navigation
│ ├── wallet.tsx # Wallet screen (JSX only — logic in hook)
│ ├── shop.tsx # Shop screen (JSX only — logic in hook)
│ ├── leaderboard.tsx # Leaderboard screen
│ ├── locker-room.tsx # Social feed
│ └── profile.tsx # User profile
├── settings/ # Settings pages with nested modals/tabs
└── _layout.tsx # Root layout with providers + auth protection

components/
├── wallet/ # Wallet sub-components (TokenRow, ActionModal, etc.)
├── shop/ # Shop sub-components (CartModal, CryptoCheckoutModal, etc.)
├── locker-room/ # Locker room components
├── layout/ # AppScreen wrapper (responsive web max-width)
└── ui/ # Reusable UI primitives

hooks/
├── use-wallet-screen.ts # All wallet state, effects, and handlers
└── use-shop-screen.ts # All shop state, effects, and handlers

lib/api/ # API client modules (wallet, shop, user, checkout, etc.)
```

## Architecture patterns

- **File-based routing** via Expo Router with route groups `(tabs)`, `(auth)`, `(onboarding)`
- **Modular screen architecture** — screen files contain only JSX; all state/effects/handlers live in dedicated hooks
- **Zustand + MMKV** for global state with synchronous persistence

Check warning on line 86 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L86

Did you really mean 'Zustand'?
- **React Context** for auth, collectibles, navbar visibility

Check warning on line 87 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L87

Did you really mean 'navbar'?
- **API client layer** in `lib/api/` with MMKV cache fallback
- **Crypto checkout** via Thirdweb SDK calling PWA backend for on-chain payments (Arbitrum, Ethereum, Polygon)

Check warning on line 89 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L89

Did you really mean 'Crypto'?

Check warning on line 89 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L89

Did you really mean 'Thirdweb'?

Check warning on line 89 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L89

Did you really mean 'Arbitrum'?

Check warning on line 89 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L89

Did you really mean 'Ethereum'?
- **PWA-ready** — responsive desktop layout, web hover states, keyboard nav

## Branding

The app targets both native and web (responsive) and uses the same backend (d-sports-api) as the PWA for API and checkout flows.
- **Base background (dark):** `#0a0e1a`
- **Accent gold:** `#F5C842` / `#FFD700`
- **Primary blue:** `#4169E1`

<Card title="Ecosystem overview" icon="map" href="/repositories/ecosystem-overview">
See how the native app fits with the PWA, site, and Mic'd Up.

Check warning on line 99 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L99

Did you really mean 'Mic'd'?
</Card>