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 bundli
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.
---
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
---
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.
- 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.
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.
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.
The project follows a modular MVVM architecture to facilitate development and maintenance:
``plaintext`
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.
- Node.js (recommended version: 16.x or higher).
- npm (Node's package manager).
To verify Node.js and npm installation:
`bash`
node -v
npm -v
1. Clone the repository:
`bash`
git clone git@gitlab.com: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:
`bash`
npm install
Configure environment variables in the .env file at the project root to customize endpoints and other settings:
`plaintext`
REACT_APP_API_URL=https://api.qatu.local
REACT_APP_ENVIRONMENT=development
- 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.
To start the development server with live reloading:
`bash`
npm start
docker-compose up -d build
docker-compose ps
docker-compose down -v
To compile the project in production mode:
`bash`
npm run build
The generated files in dist/ are ready for deployment.
Use Jest for testing and code coverage:
- Run tests:
`bash`
npm test
- Generate coverage:
`bash`
npm run test:coverage
Ensure consistency across the codebase with ESLint:
`bash`
npm run lint
To automatically fix errors:
`bash`
npm run lint:fix
The .gitlab-ci.yml file automates integration and deployment on GitLab, performing:
1. Unit Testing
2. Code Style Verification
3. Automatic Deployment
- Branch Format: feature/feature-name, fix/fix-name.type(scope): description
- Commit Messages: Use (e.g., feat(ui): add search component).
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.
1. Creates a new Docker image from the Dockerfile in the current directory, labeling it image-frontend-qatu with version 20.18.0.
`bash`
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.
`bash`
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:
`bash``
sudo docker stop frontend-container
Semantic Versioning: (x.y.z):
- x: Major breaking changes.
- y: New features.
- z: Bug fixes.
1. Create a fork.
2. Create a new branch.
3. Make commits with descriptive messages.
4. Push your branch and open a Pull Request.
- 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