Welcome to ElmecV2
Relevant source files
The following files were used as context for generating this wiki page:
ElmecV2 is a multi-platform mobile application designed for efficient request management. Developed using React Native and Expo, it allows standard users to create, manage, and track service requests, while providing administrators with an advanced dashboard for complete system supervision. The application is built to be compatible with iOS, Android, and Web platforms.
The system's architecture is centered around a React Native frontend and a Supabase backend, ensuring a secure, real-time, and scalable solution. Key technical features include offline-first functionality, performance optimizations like lazy loading, and a robust error logging system. The application has been validated as fully operational and ready for an MVP launch.
Sources: README.md:11-13, README.md:29-33, VALIDACION-COMPLETA.md:11
High-Level Architecture
The ElmecV2 system is composed of a frontend application, a Backend-as-a-Service (BaaS) platform, and a CI/CD pipeline for deployment.
This diagram illustrates the main technological components and their interactions within the ElmecV2 ecosystem.
Sources: README.md:36-53
Key Features
The application provides distinct feature sets for both end-users and administrators.
User Features
| Feature | Description |
|---|---|
| Secure Authentication | Robust login and registration system with JWT tokens and refresh tokens for persistent sessions. |
| Request Management | Users can create, edit, and track their service requests. |
| Integrated Calculator | An in-built tool for performing calculations related to milling and drilling. |
| Real-time Notifications | Receive live updates on the status of submitted requests. |
Sources: README.md:16-21, README.md:104-106, VALIDACION-COMPLETA.md:65-68
Administrator Features
| Feature | Description |
|---|---|
| Complete Dashboard | A comprehensive dashboard for visualizing system statistics and key performance metrics. |
| User Management | Full capabilities for administering user accounts and their permissions. |
| Data Analysis | Detailed charts and reports for data-driven insights. |
| System Monitoring | Tools for tracking system errors and performance. |
Sources: README.md:23-28
Technical Features
| Feature | Description |
|---|---|
| Multi-platform | A single codebase supports iOS, Android, and Web deployments. |
| Offline First | Core functionalities remain available even without an internet connection. |
| Performance Optimized | Implements lazy loading, memoization, and FlatList for a smooth user experience. |
| Robust Error Handling | A dedicated logging system (logger.ts) and error handling (errorHandler.ts) are in place. |
| Security | Employs JWT authentication and Supabase's Row Level Security (RLS) for data protection. |
Sources: README.md:29-34, README.md:91-93
Project Structure
The project follows a modular structure to separate concerns and improve maintainability.
This diagram shows the main directories and their purpose within the codebase.
Sources: README.md:86-100
Key directories include:
components/: Contains reusable UI and form components.screens/: Holds the application's screens, organized by user role (auth, admin, user).navigation/: Manages navigation logic using React Navigation.store/: State management using Zustand.services/: Houses API integrations and other services.utils/: Contains helper functions, including a dedicatedlogger.tsfor logging.supabase/: Includes Supabase-related configurations and migrations.
Sources: README.md:86-100
Configuration
To run the project, you need to configure environment variables.
Environment Variables
Create a .env file in the project root and populate it with the following keys obtained from your Supabase project.
| Variable | Description | Example Value |
|---|---|---|
EXPO_PUBLIC_SUPABASE_URL | The URL of your Supabase project. | https://pdpqkgrqlubyzkcivifk.supabase.co |
EXPO_PUBLIC_SUPABASE_ANON_KEY | The anonymous public key for your Supabase project. | eyJhbGciOi... |
EXPO_PUBLIC_ENVIRONMENT | The current running environment. | development or production |
EAS_PROJECT_ID | The project ID from Expo Application Services (EAS). | elmec-mobile-app-demo |
Sources: README.md:68-77, DEPLOY-NETLIFY.md:38-46
Application Configuration (app.json)
The app.json file contains metadata and configuration for the Expo project, including plugins like expo-router. The origin property is crucial for web deployment and deep linking.
{
"expo": {
"plugins": [
[
"expo-router",
{
"origin": "https://tu-url-real.netlify.app/"
}
]
]
}
}
Sources: DEPLOY-NETLIFY.md:105-117, app.json
Deployment
The web version of the application is designed for continuous deployment to Netlify via GitHub.
Deployment Flow
The following diagram shows the automated deployment process triggered by a push to the netifly branch.
This flow is defined in the project's netlify.toml and the Netlify dashboard settings.
Sources: DEPLOY-NETLIFY.md:21-26, NETLIFY-DASHBOARD-SETUP.md:35-44
Available Scripts
The package.json file defines several scripts for development, testing, and deployment.
| Script | Description |
|---|---|
npm start | Starts the development server. |
npm run web | Runs the web version specifically. |
npm run build:production | Creates an optimized build for production. |
npm run deploy | Deploys the application to production on Netlify. |
npm run deploy:preview | Creates a preview deployment on Netlify. |
npm test | Executes tests. |
Sources: README.md:120-132
Logging System
The application includes a dedicated logging utility found in utils/logger.ts. This system provides structured logging with different levels, contexts, and the ability to send logs to a remote endpoint in production.
Logger Class
The Logger class is a static class that handles all logging operations.
This diagram shows the structure of the Logger class and its related interfaces and enums.
Sources: utils/logger.ts
Logging Process Flow
When a log method (e.g., Logger.info()) is called, it follows this sequence:
This sequence illustrates how a single log call is processed, stored locally, and conditionally sent to the console and a remote service.
Sources: utils/logger.ts:55-80
Summary
ElmecV2 is a well-structured and feature-rich application for request management. Its modern technology stack, including React Native and Supabase, provides a solid foundation for a scalable and maintainable system. The project is thoroughly documented, with clear instructions for setup, configuration, and deployment. The inclusion of robust technical features like a dedicated logging system and a CI/CD pipeline demonstrates a commitment to quality and operational excellence.
Sources: README.md, VALIDACION-COMPLETA.md