Architecture Overview
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The ELMEC Mobile App v2 is a cross-platform mobile application designed for efficient request management, built using React Native and Expo. The system provides a multi-role environment where customers can create and track requests, while agents and administrators oversee the system through advanced dashboards. It utilizes a modern "Backend-as-a-Service" (BaaS) approach, leveraging Supabase for database management, authentication, and real-time synchronization.
Sources: README.md:1-13, VALIDACION-COMPLETA.md:14-17
The architecture prioritizes a "Offline First" approach and high performance through lazy loading and memoization. It integrates real-time communication via WebSockets for chat functionality and implements strict Row Level Security (RLS) to ensure data privacy across its PostgreSQL backend.
Sources: README.md:25-29, REPORTE_CHAT_MODULE.md:145-167
System Component Stack
The application is divided into three primary layers: the Mobile Frontend (React Native/Expo), the Backend-as-a-Service (Supabase), and the DevOps/Deployment infrastructure.
| Layer | Technologies | Description |
|---|---|---|
| Frontend | React Native 0.74, Expo 51, TypeScript | Core framework for cross-platform (iOS, Android, Web) development. |
| State Management | Zustand, TanStack Query, Context API | Local and server-side state synchronization. |
| Backend | Supabase, PostgreSQL, GoTrue (Auth) | Handles persistence, real-time subscriptions, and JWT-based authentication. |
| Storage | Supabase Storage | Managed bucket (request-files) for handling attachments and media. |
| DevOps | Netlify, GitHub Actions | Hosting and CI/CD pipelines. |
Sources: README.md:32-52, REPORTE_FINAL_VALIDACION.md:117-124, STATUS-DEPLOY.md:14-22
Application Flow Diagram
This diagram illustrates the high-level interaction between the user interface and the backend services.
Data Architecture and Persistence
The system uses PostgreSQL hosted on Supabase, structured into six primary tables that handle the core business logic.
Core Database Schema
The database enforces strict constraints and checks to maintain data integrity, particularly for status transitions and notification types.
| Table | Primary Columns | Purpose |
|---|---|---|
users | id, nombre, rol, foto | Stores user profiles and roles (Admin, Agent, Client). |
requests | id, titulo, estatus, archivos, usuario_id | Core entity for service tickets; supports file arrays and feedback. |
chat_rooms | id, participants, is_active | Manages communication channels between users. |
messages | id, chat_room_id, message, type | Stores individual chat messages with support for text, images, and files. |
notifications | id, user_id, type, read | In-app notification system for status updates and messages. |
Sources: STATUS-DEPLOY.md:14-22, REPORTE_FINAL_VALIDACION.md:32-55, REPORTE_CHAT_MODULE.md:235-255
Relationship Diagram
The following Entity Relationship Diagram (ERD) describes how requests and communication are linked within the system.
Cross-Cutting Concerns
Real-time Synchronization
Real-time capabilities are implemented using Supabase's PostgreSQL replication. The ChatContext maintains active WebSocket channels for every room, listening for INSERT and UPDATE events on the messages table.
Logging and Error Handling
The system includes a robust logging utility (utils/logger.ts) that categorizes events by severity and environment.
- Development: Full console logging enabled (LogLevel: DEBUG).
- Production: Remote logging enabled for ERROR and FATAL levels, with console logs suppressed below WARN.
- Session Tracking: Each instance generates a unique
sessionIdfor tracing user journeys.
Sources: utils/logger.ts:25-45, utils/logger.ts:68-90
Security Model
Security is enforced at the database level through Row Level Security (RLS). Policies ensure that:
- Users can only view their own requests.
- Agents can view assigned requests.
- Admins have global visibility.
- File access in Supabase Storage buckets is restricted by
owner_id.
Sources: STATUS-DEPLOY.md:65-71, RESUMEN_FINAL.md:73-95
Conclusion
The ELMEC Mobile App v2 architecture provides a resilient and scalable framework by offloading complex infrastructure concerns to Supabase while maintaining a highly responsive UI with React Native. Its combination of real-time subscriptions, strict RLS security, and centralized logging makes it suitable for professional enterprise environments.
Sources: VALIDACION-COMPLETA.md:168-176, RESUMEN_FINAL.md:213-225