Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/123048152-JJDS/CafeteriaPM_S203/llms.txt

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

The CafeteriaPM mobile app is built with React Native and Expo. It provides three distinct role modules — mesero (waiter), caja (cashier), and cocina (kitchen) — each with a purpose-built UI tailored to the specific tasks of that role. The app communicates exclusively with the REST API; there is no direct database connection. JWT tokens obtained at login are persisted locally with @react-native-async-storage/async-storage and attached to every subsequent API request as a Bearer token.

​
Prerequisites

Before running the app, make sure the following are in place:
  • Node.js 18+ — check with node --version
  • Expo CLI — install globally with npm install -g expo-cli, or use npx expo for every command to skip a global install
  • Expo Go — the Expo Go app installed on your Android or iOS device for development scanning
  • The CafeteriaPM API accessible from your device or emulator — the device and API server must be on the same network, or the API must be exposed over the internet

​
Setup

1

Change into the mobile app directory

cd CafeteriaPM_S203/movil
2

Install Node dependencies

npm install
This installs all packages declared in package.json, including Expo, React Native, Expo Router, and the navigation libraries.
3

Configure the API base URL

The app constructs API request URLs from a base URL constant defined in the screen files. Locate the constant (typically named API_URL or API_BASE_URL) in the relevant screen files under app/ and update it to your API server’s address:
const API_BASE_URL = "http://192.168.1.100:8000"; // replace with your server's IP
Do not use localhost or 127.0.0.1 when running on a physical device — the device cannot reach your development machine’s loopback interface. Use the machine’s LAN IP address instead. On an Android emulator, 10.0.2.2 maps to the host machine’s localhost.
4

Start the Expo development server

npx expo start
This opens the Expo Metro bundler in your terminal and displays a QR code.
5

Open the app on your device or emulator

  • Physical device — scan the QR code with the Expo Go app (Android) or the Camera app (iOS)
  • Android emulator — press a in the terminal (Android Studio AVD must be running)
  • iOS simulator — press i in the terminal (macOS + Xcode required)
You can also run platform-specific commands directly:
npx expo start --android
npx expo start --ios
After a successful login, the app navigates to a module selection screen (seleccion-modulo). On this screen the user chooses which role module they want to work in during the current session: mesero, caja, or cocina. This design allows a single staff member to switch modules if needed without logging out. The app uses Expo Router for file-based navigation — each module corresponds to a directory under app/ and its routes are determined by the file structure, matching the expo-router plugin registered in app.json.

​
Role Modules

​
Mesero (Waiter)

The mesero module is designed for floor staff who take orders at tables.
  • Table overview — a grid or list of all dining tables showing their real-time status: available (libre), occupied (ocupada), or reserved (reservada)
  • Table detail — tap a table to open its active order, see items already added, and browse the full product catalog organized by category
  • Create and update orders — add products to an open order, set per-item quantities, and attach observations (special instructions) to individual items
  • Order status tracking — monitor the live progression of an order through the kitchen pipeline without leaving the app
  • Profile — view the logged-in user’s name and role, and log out

​
Caja (Cashier)

The caja module handles payment processing and financial logging for front-of-house cash staff.
  • Active orders queue — lists orders with status listo (ready) or entregado (delivered) that are awaiting payment
  • Payment confirmation — confirm an order and select the payment method (cash, card, etc.)
  • Change calculator — when cash is selected, enter the amount tendered and the app calculates the change to return to the customer
  • PDF ticket — generate and view a printable PDF receipt for the closed order via the API’s ticket endpoint
  • Daily sales balance — a running summary of the day’s total revenue processed through the cashier
  • Expense logging — register ad-hoc operational expenses (supplies, utilities, etc.) against the daily ledger

​
Cocina (Kitchen)

The cocina module is the kitchen-facing display for cooks and kitchen staff.
  • Live order queue — real-time list of orders in pendiente (pending) or en_preparacion (being prepared) states, showing all items and their observations
  • Order detail view — expand any order to see the complete breakdown of items, quantities, and any special instructions from the waiter
  • Status updates — advance an order from en_preparacion to listo with a single action, notifying the waiter and cashier
  • Ingredient inventory — view current stock levels and identify ingredients that have fallen below their minimum threshold
  • Supply purchases — register new ingredient purchases directly from the kitchen, automatically updating stock levels
  • Product menu management — add new products to the catalog or edit existing ones (name, price, category, availability) without needing access to the admin web panel

​
Key Dependencies

The following packages from package.json are central to the app’s functionality:
PackageVersionPurpose
expo~54.0.36Expo SDK — build toolchain, native module access, and OTA updates
expo-router~6.0.24File-based navigation with automatic deep-linking via the cafeteriapm:// URL scheme
react-native0.81.5Core React Native framework with the new architecture enabled (newArchEnabled: true)
@react-native-async-storage/async-storage2.2.0Persistent key-value storage used to save and restore JWT tokens across app restarts
@react-navigation/native^7.1.8Navigation container and core hooks
@react-navigation/bottom-tabs^7.4.0Bottom tab bar navigator used inside each role module
@react-navigation/native-stack^7.3.16Native stack navigator for screen-to-screen transitions
react-native-gesture-handler~2.28.0Required peer dependency for gesture-driven navigation
react-native-screens~4.16.0Native screen containers for improved memory and performance
react-native-safe-area-context~5.6.0Safe-area insets for notch and home-bar aware layouts
@expo/vector-icons^15.0.3Icon library (Ionicons, MaterialIcons, etc.) used throughout the UI
expo-status-bar~3.0.9Controls the appearance of the device status bar

Build docs developers (and LLMs) love

Get started for freeTalk to us