Skip to main content

​
Overview

The Incidents App is a monorepo containing two main applications:
  • Mobile App: React Native mobile application built with Expo for iOS and Android
  • Web Dashboard: Next.js web dashboard for administrators
This guide will walk you through setting up both applications on your local machine.
The entire system uses Supabase as the backend for authentication, database, and real-time features.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js: v20 or higher
  • npm or pnpm: Package manager
  • Git: Version control
  • Expo CLI: For mobile development
  • Supabase Account: Free tier available at supabase.com
For mobile development, you’ll also need either:
  • iOS Simulator (macOS only) with Xcode installed
  • Android Emulator with Android Studio
  • Expo Go app on your physical device

​
Installation

1

Clone the Repository

Clone the repository to your local machine:
git clone <repository-url>
cd incidents-app
2

Set Up Supabase

Create a new project in your Supabase dashboard and note down:
  • Project URL
  • Anon/Public Key
You’ll need these for the environment configuration.
3

Configure Mobile App

Navigate to the mobile directory and install dependencies:
cd mobile
npm install
Create a .env file in the mobile directory:
mobile/.env
EXPO_PUBLIC_SUPABASE_URL=your_supabase_project_url
EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
Never commit your .env file to version control. Add it to .gitignore.
4

Configure Web Dashboard

Navigate to the web directory and install dependencies:
cd ../web
pnpm install
Create a .env.local file in the web directory:
web/.env.local
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

​
Running the Applications

​
Mobile App

The mobile app uses Expo for development and supports multiple platforms. 
cd mobile
npm start
After running npm start, you can:
  • Press i to open iOS Simulator
  • Press a to open Android Emulator
  • Press w to open in web browser
  • Scan the QR code with Expo Go app on your phone

​
Web Dashboard

The web dashboard is built with Next.js and runs on port 3000 by default. 
cd web
pnpm dev
Once running, open http://localhost:3000 in your browser.

​
Key Features by App

Mobile App

Admin Users
  • Full incident management
  • User creation and management
  • Session management
  • Settings configuration
Employees (Empleados)
  • View and update assigned incidents
  • Track incident status
  • Access incident details
Guests (Huéspedes)
  • QR code scanning for incident reporting
  • View own incidents
  • Track incident resolution

Web Dashboard

Admin-Only Access
  • Comprehensive incident analytics
  • Data visualization with charts
  • Advanced reporting
  • User role management
  • System-wide configuration

​
Authentication Flow

The app uses Supabase Authentication with role-based access control:
mobile/app/index.tsx
const bootstrap = async () => {
  const { data } = await supabase.auth.getSession();

  if (data.session) {
    const { data: profile } = await supabase
      .from("profiles")
      .select("role")
      .eq("id", data.session.user.id)
      .single();

    if (profile?.role === "admin") {
      router.replace("/(admin)");
      return;
    }

    if (profile?.role === "empleado") {
      router.replace("/(empleado)");
      return;
    }

    await supabase.auth.signOut();
    router.replace("/(auth)/login");
    return;
  }

  const guestSession = await SecureStore.getItemAsync("guest_session");

  if (guestSession) {
    router.replace("/(guest)/home");
    return;
  }

  router.replace("/(auth)/login");
};

​
Verifying Installation

1

Check Mobile App

After starting the mobile app, you should see the splash screen followed by the login screen.The app will automatically route users based on their role:
  • Admins → Admin dashboard
  • Employees → Employee interface
  • Guests → Guest home with QR scanner option
2

Check Web Dashboard

Navigate to http://localhost:3000 and verify:
  • Login page renders correctly
  • Supabase connection is established
  • No console errors appear
3

Test Authentication

Create a test user in your Supabase dashboard:
  1. Go to Authentication → Users
  2. Create a new user
  3. Add a profile entry in the profiles table with role admin
  4. Try logging in with those credentials

​
Common Issues

Expo Metro Bundler IssuesIf you encounter caching issues, clear the cache:
npx expo start --clear
Supabase Connection ErrorsVerify your environment variables are correctly set:
  • Check for typos in .env files
  • Ensure no trailing spaces in URLs or keys
  • Restart the development server after changing env variables
Port Already in UseIf port 3000 is already in use for the web dashboard:
pnpm dev -- -p 3001

​
Next Steps

Now that you have the applications running:
  • Review the Architecture to understand the system structure
  • Explore the mobile app’s file-based routing structure
  • Check out the web dashboard’s admin features
  • Configure your Supabase database tables and policies
Join the development community and contribute to the project on GitHub!

Build docs developers (and LLMs) love

Get started for freeTalk to us