Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/DavidCevallos15/Crucidrive---APP/llms.txt

Use this file to discover all available pages before exploring further.

The CruciDrive frontend is an Expo 57 / React Native 0.86 app built with TypeScript. It targets iOS, Android, and Web simultaneously through Expo Router’s file-based navigation system. State is managed with Zustand, real-time communication runs over Socket.io, and authentication is provided by Supabase Auth with phone OTP.

​
Prerequisites

Before installing, make sure the following tools are available on your machine:
  • Node.js LTS (v20 or later recommended)
  • Expo CLI — install globally if you haven’t already:
npm install -g expo-cli
  • A physical device with the Expo Go app installed, or a configured iOS Simulator / Android Emulator
  • Access to the backend .env values (Supabase URL, anon key, API base URL)

​
Installation

1

Navigate to the frontend directory

From the repo root, change into the frontend folder:
cd frontend
2

Install dependencies

npm install
3

Create your .env file

Copy the provided template and fill in your credentials:
cp .env.example .env
Then open .env and supply real values for each EXPO_PUBLIC_ variable. See Configuration for a full description of every variable.
4

Start the development server

expo start
Scan the QR code with Expo Go (Android) or the Camera app (iOS) to open the app on a physical device.

​
Key dependencies

PackageVersionPurpose
expo~57.0.1Managed workflow runtime
expo-router~57.0.2File-based navigation
react-native0.86.0Mobile framework
@supabase/supabase-js^2.49.0Auth & database client
socket.io-client^4.8.0Real-time WebSocket communication
zustand^5.0.0Lightweight state management
expo-blur~57.0.0Backdrop blur for glassmorphism UI
react-native-reanimated4.5.060 fps declarative animations
react-native-maps1.27.2Interactive map component
expo-location~57.0.1Device GPS access

​
App structure

CruciDrive uses Expo Router’s file-based routing. Routes are organized into two authenticated groups — (passenger) and (driver) — gated by an (auth) flow: 
frontend/app/
  _layout.tsx          # Root layout — fonts, splash screen, auth gate
  index.tsx            # Entry redirect → login or home
  (auth)/
    _layout.tsx        # Auth group layout
    login.tsx          # Phone OTP login screen
  (app)/
    _layout.tsx        # Authenticated layout — socket provider
    (passenger)/
      _layout.tsx      # Passenger tab/stack layout
      index.tsx        # Passenger map screen
      chat.tsx         # In-ride chat
      profile.tsx      # Profile screen
    (driver)/
      _layout.tsx      # Driver tab/stack layout
      index.tsx        # Driver console
      chat.tsx         # In-ride chat
      profile.tsx      # Profile screen
The app.json registers scheme: "crucidrive" for deep linking. This means external links like crucidrive:// will open the app directly and can route to specific screens. This scheme is also used by expo-linking when handling OAuth or notification deep links.

Build docs developers (and LLMs) love

Get started for freeTalk to us