{"id":51133751,"url":"https://github.com/maximcoding/driver-shield-mobile","last_synced_at":"2026-06-25T15:30:31.601Z","repository":{"id":365425896,"uuid":"1272035691","full_name":"maximcoding/driver-shield-mobile","owner":"maximcoding","description":"DriveShield mobile app + design reference — converting the design demo into React Native","archived":false,"fork":false,"pushed_at":"2026-06-17T08:46:40.000Z","size":3565,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-17T10:22:47.034Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maximcoding.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-17T08:22:51.000Z","updated_at":"2026-06-17T08:46:44.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/maximcoding/driver-shield-mobile","commit_stats":null,"previous_names":["maximcoding/driver-shield-mobile"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/maximcoding/driver-shield-mobile","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximcoding%2Fdriver-shield-mobile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximcoding%2Fdriver-shield-mobile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximcoding%2Fdriver-shield-mobile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximcoding%2Fdriver-shield-mobile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maximcoding","download_url":"https://codeload.github.com/maximcoding/driver-shield-mobile/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximcoding%2Fdriver-shield-mobile/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34781446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-25T02:00:05.521Z","response_time":101,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-25T15:30:31.082Z","updated_at":"2026-06-25T15:30:31.593Z","avatar_url":"https://github.com/maximcoding.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DriveShield Mobile\n\n**Tamper-proof drive recording that protects drivers when it matters most.**\n\n## 💡 The idea\n\nDriveShield is a mobile app that produces **tamper-proof evidence of how a driver actually drove**.\nWhen a driver turns **Protection ON**, the app records GPS + speed telemetry for the trip, scores\nhow complete that recording was (**coverage**), and generates an immutable **verdict** — e.g.\n\"No speeding events found (High coverage)\". If a dispute arises (an insurer, employer, or\nauthority claims the driver was speeding), the driver can run an **Evidence Check** for a vehicle\nand date/time and get a clear, verifiable answer backed by a session hash. The driver is protected\n**only by what was actually monitored** — no guessing, no smoothing, no after-the-fact edits.\n\n## ✨ Features\n\n**Product**\n- 🛡️ **Protection toggle** — start/stop tamper-proof recording per trip\n- 📍 **Drive sessions** — GPS + speed telemetry captured while protection is ON\n- 📊 **Coverage scoring** — HIGH / MEDIUM / LOW / NOT_MONITORED based on data completeness\n- ⚖️ **Verdicts** — immutable, canonical results (speeding / no speeding / insufficient coverage)\n- 🔎 **Evidence Check** — query by vehicle + date/time → matched session and verdict\n- 🧾 **Trip history \u0026 details** — sessions, segments, gap intervals, event details\n- 🚗 **Vehicles** — add/edit/select default vehicle\n- 💳 **Subscription** — paywall, free trial, checkout, invoices, manage plan\n- 🔐 **Evidence integrity** — finalized sessions are immutable; SHA-256 session hash\n\n**Engineering foundation** (from [react-native-bare-starter](https://github.com/maximcoding/react-native-bare-starter))\n- 🧱 Bare React Native 0.82 (no Expo) + React 19, **strict TypeScript**\n- 🧭 React Navigation 7 — stacks, tabs, modals\n- 📦 TanStack Query 5 — caching, retries, persistence\n- 🪶 Zustand 5 — light, hook-based state\n- ⚡ MMKV 4.3 storage via Nitro Modules (offline-first)\n- 📡 Offline-ready — query persistence, queue/replay, transport offline mode\n- 🔌 Pluggable transport — REST / GraphQL / WebSocket / Firebase adapters\n- 🎨 Theming — light/dark with semantic tokens + `useTheme()`\n- 🌍 i18next 25 — typed translations (EN/DE/RU) via `useT()`\n- 🖼️ SVG icons via `npm run gen:icons`; BootSplash 6\n- 🧪 Biome 2, Jest 29, Maestro E2E\n\nThis repository contains the DriveShield **mobile frontend** and its **design reference**. The\ncurrent goal is to **convert the design demo into the React Native app** — building real screens\non top of the existing foundation (theme tokens, UI kit, navigation shell).\n\n\u003e **Built on:** the React Native app in `client/DriveShield` is built on top of the\n\u003e [**react-native-bare-starter**](https://github.com/maximcoding/react-native-bare-starter)\n\u003e template (bare RN 0.82, TypeScript, React Navigation 7, TanStack Query, Zustand, MMKV,\n\u003e offline-ready transport, theming, i18next, Biome/Jest). Extend that foundation — do not rebuild\n\u003e theme, navigation, state, or folder structure from scratch. See the starter's README for the\n\u003e full architecture and conventions.\n\n## Repository layout\n\n```\ndriver-shield-mobile/\n├── client/              # React Native mobile app (bare workflow, TypeScript)\n│   ├── AGENTS.md        # ← READ FIRST before any client work\n│   └── DriveShield/     # The RN project\n└── uix-design/          # React + Vite design demo = visual source of truth\n    ├── AGENTS.md        # Design system rules\n    ├── demo/            # Runnable demo (all screens, UI kit, tokens)\n    └── src/             # theme/, ui/, screens/, data/\n```\n\n## The task\n\nConvert the `uix-design` demo screens into real React Native screens in `client/DriveShield`.\n\n- **`uix-design`** is the **design source of truth** — every screen, the UI kit, tokens, and\n  states already exist there as a runnable React/Vite demo.\n- **`client/DriveShield`** is the **target** — a React Native starter with theme tokens, a shared\n  UI Kit, an i18n setup, and a navigation shell already in place. Screens are currently\n  placeholders.\n\nYour job is to implement the real screens in the client so the mobile app matches the demo.\n\n**Deliverable: a fully clickable prototype.** No real backend in this phase — the whole app must\nbe **clickable, with working navigation and changing states, fully driven by mock data** behind a\nservice layer that mimics backend integration (loading/empty/error/content included). It should\nfeel indistinguishable from the finished app, except the data is mocked — so when the real API\narrives, only the mock layer is swapped and screens/navigation stay untouched.\n\n👉 **Start here: [BUILD_GUIDE.md](BUILD_GUIDE.md)** — step-by-step instructions for reusing the\ndesign system, tokens, theme, and UI Kit so the app looks and behaves exactly like the demo,\nincluding token/component mapping tables and a per-screen Definition of Done.\n\n### Ground rules (see `client/AGENTS.md` for the full list)\n\n1. **Tokens only** for styling — no raw hex/rgb, no magic spacing/size/radius values.\n2. **i18n for all visible text** — no hardcoded strings in JSX.\n3. **No duplicate UI** — repeated UI becomes a shared component/variant.\n4. **Alias imports only** (`@/features/...`, `@/shared/...`, `@/navigation/...`, `@/i18n/...`) — no `../../../`.\n5. **Strict TypeScript** — no `any`.\n6. **No new dependencies** without approval.\n7. **`uix-design` is the visual reference** — the mobile app must match the demo.\n8. After each phase: run iOS, run Android, run lint, commit a checkpoint.\n\n## Getting started\n\n### Design demo (React + Vite)\n\n```bash\ncd uix-design/demo\nnpm install\nnpm run dev          # http://localhost:5173\n```\n\n### Mobile app (React Native)\n\n```bash\ncd client/DriveShield\ncp .env.example .env          # fill in values\nnpm install\nnpx pod-install ios           # iOS only (macOS)\n\nnpm start                     # Metro bundler\nnpm run ios                   # build + run on iOS simulator\nnpm run android               # build + run on Android emulator\n\nnpm run lint                  # Biome\nnpm test                      # Jest\n```\n\n\u003e **Note:** `.env` is gitignored. Use `.env.example` as the template. Never commit secrets.\n\n## Mobile stack\n\n- React Native 0.82 + React 19, TypeScript (strict)\n- Navigation: React Navigation 7 (native-stack + bottom-tabs)\n- State/data: Zustand + TanStack Query, MMKV (offline-first)\n- Theme + i18n: custom token theme + i18next (EN/DE/RU)\n- Reanimated 4, Gesture Handler, SVG, Vector Icons\n- Tooling: Biome, Jest, Husky\n\n## React Native project structure (`client/DriveShield`)\n\nFeature-first architecture inherited from the boilerplate. **Build new screens inside\n`src/features/\u003cfeature\u003e/screens/` and shared UI inside `src/shared/components/ui/` — do not\nintroduce a new architecture.**\n\n```\nclient/DriveShield/\n├── App.tsx                  # Root: providers (theme, query, i18n, nav)\n├── index.js                 # RN entry point\n├── app.json                 # App name / config\n├── babel.config.js          # Babel + module-resolver (@/ aliases)\n├── metro.config.js          # Metro + SVG transformer\n├── tsconfig.json            # Strict TS + path aliases\n├── biome.json               # Lint/format config\n├── jest.config.js           # Test config\n├── .env.example             # Env template (copy → .env, gitignored)\n│\n├── android/                 # Native Android project (Gradle)\n├── ios/                     # Native iOS project (Xcode workspace, Podfile)\n├── assets/                  # Fonts, images, bootsplash logo\n├── maestro/                 # E2E smoke flows (iOS + Android)\n├── scripts/                 # Icon/bootsplash/env generators\n│\n└── src/\n    ├── config/              # App constants + feature flags\n    │\n    ├── features/            # ⭐ Feature-first — each feature is self-contained\n    │   ├── auth/            #   sign-in / phone / OTP / terms\n    │   │   ├── api/         #   request builders\n    │   │   ├── hooks/       #   feature hooks (queries/mutations)\n    │   │   ├── screens/     #   ⭐ screens go here\n    │   │   ├── services/    #   feature service layer\n    │   │   └── types/       #   feature TypeScript types\n    │   ├── home/            #   home / feed / session entry\n    │   ├── settings/        #   settings + reusable settings rows\n    │   │   ├── components/  #   feature-local components\n    │   │   └── screens/\n    │   └── user/            #   profile / me\n    │\n    ├── navigation/          # React Navigation setup\n    │   ├── root/            #   root navigator + param lists\n    │   ├── tabs/            #   bottom tab bar (the \"Dock\")\n    │   ├── helpers/         #   typed navigation helpers\n    │   ├── persistence/     #   nav state persistence\n    │   └── routes.ts        #   route name constants\n    │\n    ├── i18n/                # i18next setup\n    │   ├── locales/         #   en / de / ru translation files\n    │   └── useT.ts          #   typed translation hook\n    │\n    ├── session/            # Drive-session domain (protection/telemetry)\n    │\n    └── shared/             # ⭐ Cross-feature building blocks\n        ├── components/ui/   #   ⭐ shared UI Kit (Button, Card, Sheets, …)\n        ├── hooks/           #   generic hooks (useForm, useDebouncedValue, …)\n        ├── stores/          #   Zustand global stores\n        ├── theme/           #   ⭐ design system\n        │   ├── tokens/      #     brand, spacing, radius, typography, elevation, fonts\n        │   ├── light.ts     #     light theme\n        │   ├── dark.ts      #     dark theme\n        │   ├── ThemeProvider.tsx\n        │   └── useTheme.ts  #     useTheme() hook → theme.colors / spacing / radius / typography\n        ├── services/        #   infra\n        │   ├── api/         #     http client, query layer, offline, transport adapters\n        │   ├── storage/     #     MMKV wrapper\n        │   └── monitoring/  #     error/perf hooks\n        ├── types/           #   shared types\n        └── utils/           #   helpers (platform, formatting, …)\n```\n\n**Where things go**\n- New screen → `src/features/\u003cfeature\u003e/screens/MyScreen.tsx`\n- Reused UI (used by 2+ screens) → `src/shared/components/ui/`\n- Colors / spacing / radius / fonts → `src/shared/theme/` (tokens + `light.ts`/`dark.ts`)\n- Visible text → `src/i18n/locales/` (use `useT()`)\n- Routes → `src/navigation/`\n- Import with aliases only: `@/features/...`, `@/shared/...`, `@/navigation/...`, `@/i18n/...`\n\n## Design demo stack\n\n- React 18 + Vite 5 (JSX), Framer Motion\n- Custom design system — tokens (`T`, `L`) + hand-built UI kit (no UI library)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaximcoding%2Fdriver-shield-mobile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaximcoding%2Fdriver-shield-mobile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaximcoding%2Fdriver-shield-mobile/lists"}