Qatu Client

Qatu Client is a pure frontend project developed in JavaScript. This repository contains the code and documentation needed to install, configure, and develop the application. Built on an MVVM (Model-View-ViewModel) architecture, it uses Webpack for bundling, Jest for unit testing, and ESLint for linting, ensuring code quality and consistency.

Table of Contents

1. Overview
2. Key Features
3. Technologies Used
4. Project Architecture
5. Prerequisites
6. Installation Guide
7. Environment Variable Configuration
8. Available Commands
9. Detailed Project Structure
10. Development Guide
11. Production Build
12. Testing and Code Coverage
13. Code Style and Linting
14. Continuous Integration and Deployment (CI/CD)
15. Code Conventions and Structure
16. Best Development Practices
17. Version Control Strategy
18. Contribution Process
19. Support, Documentation, and Additional Resources
20. Development Team

Overview

Qatu Client is a frontend application developed in JavaScript, following an MVVM architecture. With a focus on modularity and scalability, the project is designed to be highly configurable while maintaining clear separation of responsibilities. The application is ideal for production environments, integrating seamlessly with a backend for data management.

Key Features

• Modular MVVM Architecture: Separation of responsibilities in Model, View, and ViewModel layers.
• Responsive Design: Adaptive layout for various devices and resolutions.
• Unit Testing with Jest: Code coverage to ensure functionality.
• Resource Optimization: Lazy loading, minimization, and resource caching.
• GitLab CI/CD: Automated pipeline for continuous integration and deployment.

Technologies Used

This project leverages modern, production-ready technologies:

• JavaScript ES6+: The base language of the application.
• Webpack: For bundling and module optimization.
• Babel: Transpiles ES6+ code for compatibility with older browsers.
• ESLint: Ensures code consistency and quality.
• Jest: Framework for unit testing and code coverage.
• Pino: Logging library configured in src/constants/logger/loggerConfig.js.

MVVM Structure in the Project

The MVVM architecture divides the project into distinct layers:

• Model: Located in src/models/, encapsulates business logic and data operations.
• ViewModel: Located in src/viewmodels/, contains presentation logic and data binding between the view and model.
• View: The user interface in src/views/, divided into components/ and pages/ to organize reusable components and main views.

Project Architecture

The project follows a modular MVVM architecture to facilitate development and maintenance:

qatu-client/
├── src/
│   ├── assets/
│   │   ├── images/
│   │   └── styles/
│   ├── constants/
│   │   ├── config.js
│   │   └── logger/
│   ├── models/
│   │   └── services/
│   ├── utils/
│   │   ├── helpers.js
│   │   └── logger.js
│   ├── viewmodels/
│   ├── views/
│   │   ├── components/
│   │   └── pages/
│   ├── index.html
│   └── main.js
├── tests/
│   └── integration/
├── webpack.config.js
├── jest.config.js
├── .eslintrc.js
└── package.json

• src/: Main source code.
• assets/: Static assets, including images and styles.
• constants/: Application constants and configurations.
• models/: Business logic and services.
• utils/: Utility functions.
• viewmodels/: Presentation logic.
• views/: UI components and pages.
• tests/: Unit and integration tests.

Prerequisites

Required Tools

• Node.js (recommended version: 16.x or higher).
• npm (Node's package manager).

To verify Node.js and npm installation:

node -v
npm -v

Installation Guide

1. Clone the repository:

   git clone [email protected]:jala-university1/cohort-1/oficial-es-desarrollo-de-software-4-iso-223.ga.t2.24.m2/secci-n-a/bugs-bunnys/qatu-client.git
   cd qatu-client

2. Install dependencies:

   npm install

Environment Variable Configuration

Configure environment variables in the .env file at the project root to customize endpoints and other settings:

REACT_APP_API_URL=https://api.qatu.local
REACT_APP_ENVIRONMENT=development

Available Commands

Development and Production Commands

• npm start: Starts the development server.
• npm run build: Builds the application for production in the dist/ directory.
• npm test: Runs tests with Jest.
• npm run test:integration: Runs integration tests.
• npm run test:coverage: Generates a coverage report.
• npm run lint: Checks code style with ESLint.
• npm run lint:fix: Automatically fixes code style issues.

Development Guide

To start the development server with live reloading:

npm start

Docker Setup

1. Build the Containers and Start the Application

docker-compose up -d build

2. Check the Status of Containers

docker-compose ps

3. Stop the Application

docker-compose down -v

Production Build

To compile the project in production mode:

npm run build

The generated files in dist/ are ready for deployment.

Testing and Code Coverage

Use Jest for testing and code coverage:

• Run tests:

  npm test

• Generate coverage:

  npm run test:coverage

Code Style and Linting

Ensure consistency across the codebase with ESLint:

npm run lint

To automatically fix errors:

npm run lint:fix

Continuous Integration and Deployment (CI/CD)

The .gitlab-ci.yml file automates integration and deployment on GitLab, performing:

1. Unit Testing
2. Code Style Verification
3. Automatic Deployment

Code Conventions and Structure

• Branch Format: feature/feature-name, fix/fix-name.
• Commit Messages: Use type(scope): description (e.g., feat(ui): add search component).

Best Development Practices

1. Clear Commit Messages: Descriptive messages for each change.
2. Use Feature Branches: Create branches for each major change.
3. Modular Code: Keep business logic separate from UI.
4. Document Components: Provide in-code documentation for components.

DockerFile Frontend:

1. Creates a new Docker image from the Dockerfile in the current directory, labeling it image-frontend-qatu with version 20.18.0.

 sudo docker build -t image-frontend-qatu:20.18.0 .

2. Starts a new container based on the image image-frontend-qatu:20.18.0. The container is named frontend-container and runs in the background (-d), mapping port 3000 of the container to port 3000 of the host machine so that the application is accessible from http://localhost:3000.

sudo docker run --name frontend-container -p 3000:3000 -d image-frontend-qatu:20.18.0

3. Enter the following link from your browser and you will have the Qatu page available to you: http://localhost:3000.

4. If you want to stop the container use:

sudo docker stop frontend-container

Version Control Strategy

Semantic Versioning: (x.y.z):

• x: Major breaking changes.
• y: New features.
• z: Bug fixes.

Contribution Process

1. Create a fork.
2. Create a new branch.
3. Make commits with descriptive messages.
4. Push your branch and open a Pull Request.

Development Team

• Mayra Ayaviri Muñoz
  GitLab: Mayra Ayaviri

• Juan Sebastián Lamouroux
  GitLab: Juan Lamouroux

• Daleth Vásquez Montano
  GitLab: Daleth Vasquez

• Ever Mamani Vicente
  GitLab: Ever Mamani V

• Rodrigo Machaca
  GitLab: Rodrigo Machaca