Architecture Overview
Relevant source files
The following files were used as context for generating this wiki page:The ElmecV2 application is a multi-platform system for efficient request management, built using React Native and Expo for the frontend, and Supabase as the Backend as a Service (BaaS). The architecture is designed to be robust, scalable, and maintainable, supporting iOS, Android, and Web platforms from a single codebase. It features a clear separation of concerns between the client-side application and backend services, ensuring secure and real-time data synchronization.
Key architectural pillars include a component-based frontend, a centralized backend with PostgreSQL and real-time capabilities, a secure authentication system using JWT and Row Level Security (RLS), and a streamlined deployment process via Netlify and Expo Application Services (EAS).
Sources: README.md, VALIDACION-COMPLETA.md
Core Technologies
The project leverages a modern technology stack for frontend, backend, and DevOps.
| Category | Technology | Description |
|---|---|---|
| Frontend | React Native 0.74 | Core framework for building the mobile and web application. |
| Expo 51 | Platform and toolchain for developing and building the application. | |
| TypeScript | Provides static typing for improved code quality and maintainability. | |
| React Navigation | Handles all in-app navigation and routing. | |
| Zustand | Manages global application state. | |
| TanStack Query | Manages server state, caching, and data fetching. | |
| Backend | Supabase | Backend as a Service (BaaS) providing database, auth, storage, and real-time. |
| PostgreSQL | The underlying relational database for all application data. | |
| Real-time Subscriptions | Enables live features like the chat module. | |
| Row Level Security (RLS) | Enforces data access policies at the database level. | |
| DevOps | Netlify | Hosting and continuous deployment for the web version of the app. |
| GitHub Actions | Used for Continuous Integration/Continuous Deployment (CI/CD). | |
| ESLint & Prettier | Enforce code quality and consistent formatting. |
Sources: README.md:4-40
Application Structure
The project follows a standard feature-based directory structure that promotes separation of concerns and modularity.
This diagram shows the high-level folder structure of the application.
Sources: README.md:104-118
Backend Architecture (Supabase)
The entire backend is powered by Supabase, which provides a suite of tools built on top of open-source technologies. This simplifies development by offering a managed infrastructure for the database, authentication, file storage, and real-time features.
Sources: README.md:31-35, VALIDACION-COMPLETA.md:121-125
Database Schema
The core of the application revolves around a set of related PostgreSQL tables. The relationships between the main entities are visualized below.
This Entity-Relationship diagram illustrates the main tables and their connections within the Supabase database.
Key Supabase Features
- Authentication: Manages user identity using JWTs and provides secure login/logout functionality. Session persistence is handled via refresh tokens.
- Row Level Security (RLS): A critical security feature used extensively to ensure users can only access data they are permitted to see (e.g., a user can only see their own requests).
- Real-time Subscriptions: Powers the chat module, allowing for instant message delivery and typing indicators by listening to database changes.
- Storage: Used for handling file uploads, such as attachments for requests. A dedicated bucket
request-filesis configured for this purpose.
Sources: README.md:41-44, VALIDACION-COMPLETA.md:122-125, REPORTE_CHAT_MODULE.md:100-120, RESUMEN_FINAL.md:73-86
Frontend Architecture
The frontend is built with React Native and Expo, enabling a single codebase to target iOS, Android, and the Web.
- Routing: Managed by Expo Router, which uses a file-based routing system similar to Next.js.
- State Management:
- Zustand is used for global client-side state.
- TanStack Query handles server state, including data fetching, caching, and synchronization with the Supabase backend.
- React Context API is used for feature-specific state management, such as in the
ChatContext, which encapsulates all real-time chat logic.
- Component Structure: The application is organized into reusable
componentsand feature-specificscreens, promoting a modular and maintainable codebase.
Sources: README.md:26-30, VALIDACION-COMPLETA.md:116-120, FIXES-APLICADOS.md:92-94
Authentication Flow
The authentication flow is the entry point for users. It determines whether to show the login screen or the main application content.
This sequence diagram details the steps involved when a user logs into the application.
The logic for redirection is handled at the root of the application, which checks the authentication state and redirects the user accordingly.
Sources: FIXES-APLICADOS.md:111-121, README.md:131-134, VALIDACION-COMPLETA.md:50-55
Deployment and DevOps
The project has a well-defined CI/CD pipeline for both web and mobile platforms.
- Web Deployment: The web application is deployed to Netlify. The process is automated: a push to the
netiflybranch triggers a new build and deployment. - Build Configuration: The
netlify.tomlfile defines the build command (npm ci && npm run build:production) and the publish directory (dist). It also specifies the Node.js version to ensure a consistent build environment. - Environment Variables: The application uses environment variables (e.g.,
EXPO_PUBLIC_SUPABASE_URL) to manage configuration for different environments likedevelopmentandproduction. These are configured directly in the Netlify dashboard for production builds. - Mobile Deployment: Mobile builds for the app stores are managed using Expo Application Services (EAS).
Sources: DEPLOY-NETLIFY.md, README.md:46-50, 148-158
This flowchart shows the automated deployment process for the web application on Netlify.
Logging and Error Handling
The application includes a custom, robust logging system defined in utils/logger.ts.
Logger Class
The Logger class provides a centralized way to handle logging throughout the application.
This class diagram outlines the structure and methods of the custom Logger.
Sources: utils/logger.ts
Key Features
- Log Levels: Supports different severity levels (
DEBUG,INFO,WARN,ERROR,FATAL). - Environment-Specific Logging: Console logging is enabled in
development, while remote logging is enabled forproduction. The log level is also adjusted based on the environment. - Structured Logs: Each log entry is a structured object (
LogEntry) containing a timestamp, level, message, and optional context. - Specialized Loggers: Provides dedicated methods for logging user actions, API calls, and performance timers (
startTimer). - Error Handler Integration: Integrates with a custom
ErrorHandlerto log structuredAppErrorobjects.
Sources: utils/logger.ts:5-100
Summary
The architecture of ElmecV2 is modern, secure, and well-structured. It effectively utilizes React Native and Expo for cross-platform development and leverages the full power of Supabase for a scalable and real-time backend. The clear separation of concerns, robust security model with RLS, and automated DevOps pipeline make it a solid foundation for a production-ready application. The inclusion of detailed logging and error handling further enhances its maintainability and reliability.