/softvibeslab/elmecV2-Demo

Wiki directory

Browse AI-generated documentation for any repository.

Getting Started

Relevant source files

The following files were used as context for generating this wiki page:

This guide provides a comprehensive overview for setting up, configuring, running, and deploying the ElmecV2 project. ElmecV2 is a multi-platform mobile application developed with React Native and Expo for efficient request management. It features a user-facing app for creating and tracking requests and an administrator dashboard for system-wide monitoring.

The application is built on a modern tech stack including React Native 0.74, Expo 51, and TypeScript for the frontend. The backend is powered by Supabase, utilizing PostgreSQL, Row Level Security (RLS), and real-time subscriptions. Deployment for the web version is handled by Netlify.

Sources: README.md:7-11, README.md:29-43

Initial Setup Flow

The following diagram illustrates the high-level workflow for getting the project running locally.

Generating architecture diagram...

This diagram shows the sequence of steps from cloning the repository to running the application on a chosen platform.
Sources: README.md:60-98

1. Prerequisites

Before you begin, ensure you have the following software installed on your system.

Software	Requirement	Installation Command
Node.js	Version 18 or higher	-
npm or yarn	Included with Node.js	-
Expo CLI	Global installation	`npm install -g @expo/cli`
Git	Version control	-

For mobile development, you will also need the Expo Go application on your mobile device or a configured Android/iOS emulator.

Sources: README.md:47-57

2. Installation and Configuration

Follow these steps to set up the project on your local machine.

2.1. Clone the Repository

First, clone the project from GitHub and navigate into the project directory.

git clone https://github.com/softvibeslab/elmecV2-Demo.git
cd elmecV2-Demo

Sources: README.md:61-64

2.2. Install Dependencies

Install the required Node.js packages using npm.

npm install

Sources: README.md:67-69

2.3. Configure Environment Variables

The project uses environment variables to manage sensitive keys and configuration settings. Create a .env file in the root directory by copying the example file.

cp .env.example .env

Then, populate the .env file with the necessary values.

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`
`EAS_PROJECT_ID`	The Expo Application Services project ID.	`elmec-mobile-app-demo`

Sources: README.md:72-84, DEPLOY-NETLIFY.md:43-52

2.4. Set up Supabase Backend

The backend relies on Supabase. You must create and configure a Supabase project.

Setup Steps:

Create a Project: Go to supabase.com and create a new project.
Get Credentials: In your project's Settings > API, find the Project URL and anon public key. Use these for the .env file.
Run Migrations: Go to the SQL Editor in the Supabase dashboard and execute the SQL scripts found in the /supabase/migrations/ directory.
Configure Authentication:
- Navigate to Authentication > URL Configuration.
- Set the Site URL to your Netlify deployment URL (e.g., https://your-app.netlify.app).
- Add your Netlify URL to Redirect URLs (e.g., https://your-app.netlify.app/**).
- For demo purposes, you can disable Email confirmation.

Sources: supabase/setup-instructions.md:3-44, README.md:86-90

3. Running the Project

The project includes several npm scripts to run the application in different environments.

Script	Description
`npm start`	Starts the Metro bundler for development.
`npm run web`	Runs the web version of the application.
`npm run android`	Runs the application on an Android emulator or connected device.
`npm run ios`	Runs the application on an iOS simulator or connected device.
`npm run build:production`	Creates an optimized build for production.
`npm run deploy`	Deploys the production build to Netlify.

Sources: README.md:94-107, README.md:129-141

4. Deployment

The web application is configured for deployment on Netlify.

4.1. Netlify Deployment Workflow

The deployment can be triggered automatically via a git push to the netifly branch or manually via the Netlify CLI.

Generating architecture diagram...

This diagram shows the automated deployment process from a developer pushing code to the site going live on Netlify.
Sources: DEPLOY-NETLIFY.md:65-73, NETLIFY-DASHBOARD-SETUP.md:33-40

4.2. Netlify Configuration

When setting up the project on the Netlify dashboard, use the following settings:

Branch to deploy: netifly
Build command: npm ci && npm run build:production
Publish directory: dist

You must also configure the same environment variables from your .env file in the Netlify site settings under Site settings > Environment variables.

Sources: NETLIFY-DASHBOARD-SETUP.md:33-66

5. Project Structure

The repository is organized into modules and feature-specific directories.

Directory	Description
`components/`	Contains reusable React components, separated into UI and forms.
`screens/`	Contains the main application screens, organized by role (auth, admin, user).
`navigation/`	Holds the configuration for React Navigation.
`store/`	Contains global state management logic using Zustand.
`services/`	For API clients and services, such as the Supabase client.
`utils/`	Utility functions and helpers, including `errorHandler.ts` and `logger.ts`.
`types/`	TypeScript type definitions.
`supabase/`	Supabase-specific configurations, including database migrations.

Sources: README.md:111-125

6. Logging System

The project includes a configurable logging utility to handle application-level logging for debugging and monitoring.

Sources: utils/logger.ts

Logger Class Diagram

The Logger class provides static methods for different log levels and can be configured for various environments.

Generating architecture diagram...

This diagram shows the structure of the Logger class, its methods, and its relationship with LogEntry and LoggerConfig.
Sources: utils/logger.ts:4-213

Logger Configuration

The logger's behavior is determined by LoggerConfig. By default, it logs to the console in development and is prepared for remote logging in production. The log level is also adjusted based on the environment.

// From: utils/logger.ts
private static config: LoggerConfig = {
    enableConsoleLogging: process.env.EXPO_PUBLIC_ENVIRONMENT !== 'production',
    enableRemoteLogging: process.env.EXPO_PUBLIC_ENVIRONMENT === 'production',
    logLevel: process.env.EXPO_PUBLIC_ENVIRONMENT === 'production' ? LogLevel.WARN : LogLevel.DEBUG,
    maxLocalLogs: 1000
};

Sources: utils/logger.ts:28-33

7. Testing

The project is set up with scripts for testing and code quality checks. Detailed test reports indicate a high level of validation, particularly for backend functionalities.

npm test: Executes the test suite.
npm run lint: Runs ESLint to check for code quality issues.
npm run format: Formats code using Prettier.

The repository contains detailed reports like REPORTE-EJECUCION-PRUEBAS.md, which shows that backend API tests for modules like Authentication, Requests, and Chat have a 100% success rate.

Sources: README.md:127-135, REPORTE-EJECUCION-PRUEBAS.md:14-20

Getting Started

Relevant source files

The following files were used as context for generating this wiki page:

Sources: README.md:7-11, README.md:29-43

Initial Setup Flow

The following diagram illustrates the high-level workflow for getting the project running locally.

Generating architecture diagram...

This diagram shows the sequence of steps from cloning the repository to running the application on a chosen platform.
Sources: README.md:60-98

1. Prerequisites

Before you begin, ensure you have the following software installed on your system.

Software	Requirement	Installation Command
Node.js	Version 18 or higher	-
npm or yarn	Included with Node.js	-
Expo CLI	Global installation	`npm install -g @expo/cli`
Git	Version control	-

For mobile development, you will also need the Expo Go application on your mobile device or a configured Android/iOS emulator.

Sources: README.md:47-57

2. Installation and Configuration

Follow these steps to set up the project on your local machine.

2.1. Clone the Repository

First, clone the project from GitHub and navigate into the project directory.

git clone https://github.com/softvibeslab/elmecV2-Demo.git
cd elmecV2-Demo

Sources: README.md:61-64

2.2. Install Dependencies

Install the required Node.js packages using npm.

npm install

Sources: README.md:67-69

2.3. Configure Environment Variables

The project uses environment variables to manage sensitive keys and configuration settings. Create a .env file in the root directory by copying the example file.

cp .env.example .env

Then, populate the .env file with the necessary values.

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`
`EAS_PROJECT_ID`	The Expo Application Services project ID.	`elmec-mobile-app-demo`

Sources: README.md:72-84, DEPLOY-NETLIFY.md:43-52

2.4. Set up Supabase Backend

The backend relies on Supabase. You must create and configure a Supabase project.

Setup Steps:

Create a Project: Go to supabase.com and create a new project.
Get Credentials: In your project's Settings > API, find the Project URL and anon public key. Use these for the .env file.
Run Migrations: Go to the SQL Editor in the Supabase dashboard and execute the SQL scripts found in the /supabase/migrations/ directory.
Configure Authentication:
- Navigate to Authentication > URL Configuration.
- Set the Site URL to your Netlify deployment URL (e.g., https://your-app.netlify.app).
- Add your Netlify URL to Redirect URLs (e.g., https://your-app.netlify.app/**).
- For demo purposes, you can disable Email confirmation.

Sources: supabase/setup-instructions.md:3-44, README.md:86-90

3. Running the Project

The project includes several npm scripts to run the application in different environments.

Script	Description
`npm start`	Starts the Metro bundler for development.
`npm run web`	Runs the web version of the application.
`npm run android`	Runs the application on an Android emulator or connected device.
`npm run ios`	Runs the application on an iOS simulator or connected device.
`npm run build:production`	Creates an optimized build for production.
`npm run deploy`	Deploys the production build to Netlify.

Sources: README.md:94-107, README.md:129-141

4. Deployment

The web application is configured for deployment on Netlify.

4.1. Netlify Deployment Workflow

The deployment can be triggered automatically via a git push to the netifly branch or manually via the Netlify CLI.

Generating architecture diagram...

This diagram shows the automated deployment process from a developer pushing code to the site going live on Netlify.
Sources: DEPLOY-NETLIFY.md:65-73, NETLIFY-DASHBOARD-SETUP.md:33-40

4.2. Netlify Configuration

When setting up the project on the Netlify dashboard, use the following settings:

Branch to deploy: netifly
Build command: npm ci && npm run build:production
Publish directory: dist

You must also configure the same environment variables from your .env file in the Netlify site settings under Site settings > Environment variables.

Sources: NETLIFY-DASHBOARD-SETUP.md:33-66

5. Project Structure

The repository is organized into modules and feature-specific directories.

Directory	Description
`components/`	Contains reusable React components, separated into UI and forms.
`screens/`	Contains the main application screens, organized by role (auth, admin, user).
`navigation/`	Holds the configuration for React Navigation.
`store/`	Contains global state management logic using Zustand.
`services/`	For API clients and services, such as the Supabase client.
`utils/`	Utility functions and helpers, including `errorHandler.ts` and `logger.ts`.
`types/`	TypeScript type definitions.
`supabase/`	Supabase-specific configurations, including database migrations.

Sources: README.md:111-125

6. Logging System

The project includes a configurable logging utility to handle application-level logging for debugging and monitoring.

Sources: utils/logger.ts

Logger Class Diagram

The Logger class provides static methods for different log levels and can be configured for various environments.

Generating architecture diagram...

This diagram shows the structure of the Logger class, its methods, and its relationship with LogEntry and LoggerConfig.
Sources: utils/logger.ts:4-213

Logger Configuration

// From: utils/logger.ts
private static config: LoggerConfig = {
    enableConsoleLogging: process.env.EXPO_PUBLIC_ENVIRONMENT !== 'production',
    enableRemoteLogging: process.env.EXPO_PUBLIC_ENVIRONMENT === 'production',
    logLevel: process.env.EXPO_PUBLIC_ENVIRONMENT === 'production' ? LogLevel.WARN : LogLevel.DEBUG,
    maxLocalLogs: 1000
};

Sources: utils/logger.ts:28-33

7. Testing

The project is set up with scripts for testing and code quality checks. Detailed test reports indicate a high level of validation, particularly for backend functionalities.

npm test: Executes the test suite.
npm run lint: Runs ESLint to check for code quality issues.
npm run format: Formats code using Prettier.

The repository contains detailed reports like REPORTE-EJECUCION-PRUEBAS.md, which shows that backend API tests for modules like Authentication, Requests, and Chat have a 100% success rate.

Sources: README.md:127-135, REPORTE-EJECUCION-PRUEBAS.md:14-20