Skip to main content

​
Quick Start Guide

Get the RIS Gran Chimú mobile app up and running on your device in just a few minutes.

​
Prerequisites Checklist

Before starting, ensure you have:
  • ✅ Node.js (v18+) and npm installed
  • ✅ Expo Go app installed on your mobile device
  • ✅ Source code downloaded or cloned
If you haven’t set these up yet, visit the Installation Guide for detailed instructions.

​
Getting Started

1

Install Dependencies

Navigate to the project directory and install all dependencies:
cd ris-gran-chimu
npm install
This typically takes 2-3 minutes depending on your internet connection.
2

Configure API Endpoint

The app comes pre-configured to use the production backend. If you need to change it, edit src/services/apiClient.ts:
src/services/apiClient.ts
const BASE_URL = 'https://ris-gran-chimu-backend.vercel.app/api';
Common configurations:
const BASE_URL = 'https://ris-gran-chimu-backend.vercel.app/api';
When testing on a physical device, replace localhost with your computer’s local network IP address (e.g., 192.168.1.100).
3

Start the Development Server

Launch the Expo development server:
npx expo start
You’ll see output similar to:
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▀█ █▄▄▀▀▄█ ▄▄▄▄▄ █
█ █   █ █▀▀▀█ ▀█▄▄█ █   █ █
...

› Metro waiting on exp://192.168.1.100:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
The server runs on port 8081 by default and provides a QR code for easy access.
4

Open on Your Device

There are two ways to open the app:Option 1: Scan QR Code (Recommended)
  • Android: Open the Expo Go app and tap “Scan QR Code”
  • iOS: Open the native Camera app and point it at the QR code
Option 2: Manual ConnectionIn the terminal, press:
  • a - Open on Android emulator/device
  • i - Open on iOS simulator
  • w - Open in web browser
Make sure your computer and mobile device are on the same Wi-Fi network.
5

Explore the App

Once the app loads on your device, you can:
  • Browse institutional news on the landing page
  • View health facility information
  • Access official regulations and documents
  • Test the login flow (if you have admin credentials)
The app will automatically reload when you make changes to the code.

​
Development Commands

Here are the most commonly used commands during development: 
npx expo start

​
Understanding the App Flow

​
For Public Users

  1. Landing Page (app/index.tsx): Main entry point showing institutional news carousel
  2. News Section (app/landing/noticias.tsx): Detailed news articles
  3. Contact Page (app/landing/contacto.tsx): Citizen service channels
  4. Health Guide: Information about facilities, services, and strategies

​
For Administrators

  1. Login (app/(auth)/): Authentication with JWT tokens
  2. Dashboard (app/(main)/dashboard/): Role-based control panel
  3. Content Management: Create and edit news, facilities, and services
The app implements “Lazy Auth” - it remains functional even when the backend is slow to respond, providing a better user experience.

​
API Client Configuration

The app uses Axios with custom configuration for API calls. Here’s how it works:
src/services/apiClient.ts
const apiClient = axios.create({
  baseURL: BASE_URL,
  timeout: 10000,  // 10 second timeout
  headers: {
    'Content-Type': 'application/json',
  },
});
Key features:
  • Automatic Token Injection: JWT tokens are automatically added to requests
  • Session Persistence: Tokens are stored securely using expo-secure-store
  • Auto-logout: 401 responses trigger automatic redirect to login
  • 10-second timeout: Requests fail gracefully if the server doesn’t respond

​
Troubleshooting

If the QR code doesn’t work:
  1. Ensure your phone and computer are on the same Wi-Fi network
  2. Try manually entering the URL shown in the terminal into Expo Go
  3. Restart the development server with npx expo start --clear
Check your API configuration:
  1. Verify the BASE_URL in src/services/apiClient.ts
  2. If using localhost, replace with your computer’s IP address
  3. Ensure the backend server is running and accessible
  4. Test the API endpoint in a browser: https://ris-gran-chimu-backend.vercel.app/api
Clear the cache and restart:
# Clear Metro cache
npx expo start --clear

# Or clear everything
rm -rf node_modules
npm install
npx expo start --clear
Check for common issues:
  1. Ensure all dependencies are installed: npm install
  2. Verify Node.js version: node --version (should be 18+)
  3. Check for TypeScript errors: npx tsc --noEmit
  4. Review the error logs in the Expo Go app or terminal

​
Building for Production

Once you’re ready to create a production build:
1

Install EAS CLI

npm install -g eas-cli
2

Build APK for Android

eas build -p android --profile preview
This creates an installable APK file that can be distributed to users.
The production build process requires an Expo account. Sign up at expo.dev if you don’t have one.

​
Next Steps

Architecture

Understand the app’s structure and file organization

API Integration

Learn how to work with the backend API

Authentication

Implement secure login and token management

Deployment

Deploy your app to production

​
Support

If you encounter issues not covered in this guide, check:

Build docs developers (and LLMs) love

Get started for freeTalk to us