Skip to content

feat: add team members section #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LiizethRR wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: add team members section #52

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
19ddf35
README
LiizethRR Jun 2, 2026
5f1f40b
Merge pull request #1 from LiizethRR/main
LiizethRR Jun 2, 2026
bfa3f1e
Merge pull request #2 from LiizethRR/dev
LiizethRR Jun 2, 2026
de06efd
Pull request
LiizethRR Jun 2, 2026
e56352e
reto
LiizethRR Jun 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
208 changes: 121 additions & 87 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,136 +1,170 @@
# <p align="center" width="100%"> ![Birthday](https://user-images.githubusercontent.com/73078636/193473544-ae5d7636-6bf5-4313-91cf-f5d627d31c72.png)</p>
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->


[![Open Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) ![first-timers-only](https://img.shields.io/badge/first--timers--only-friendly-yellow.svg?style=flat) ![contributions welcome](https://img.shields.io/static/v1.svg?label=Contributions&message=Welcome&color=0059b3&style=flat-square)
</p>
A beginner friendly project to help you in open source contributions. An attempt to bring Web Projects together.


**Please see the <a href="https://github.com/Anadee11/WebArena/blob/main/CONTRIBUTING.md"> **Contributing Guidelines** </a>.**


## Overview

The goal of this project is to help the beginners with their contributions in Open Source and to bring all the Web projects together. We aim to achieve this collaboratively, so feel free to contribute in any way you want, just make sure to follow the contribution guidelines.

## Student Contribution

## What is Open - Source? [![Open Source Love svg3](https://badges.frapsoft.com/os/v3/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)
The open source community provides a great opportunity for aspiring programmers to distinguish themselves; and by contributing to various projects, developers can improve their skills and get inspiration and support from like-minded people. When you contribute to something you already know and love, it can have so much more meaning, because you know how the tool is used and the good it does for you. Being part of an open source community opens you up to a broader range of people to interact with.
### Developer Information
- **Name:** Ramírez Ramírez Lizeth
- **University:** Universidad Tecnológica (ING. Desarrollo y Gestión de Software)
- **Date:** 01 de Junio del 2026

Read more about it <a href="https://www.digitalocean.com/community/tutorial_series/an-introduction-to-open-source"> here. </a>
### Proposed Improvements
1. Implementar documentación interactiva con Swagger para facilitar el onboarding de nuevos desarrolladores.
2. Agregar tests automatizados de integración para el flujo multi-tenant.
3. Optimizar las consultas a MongoDB con índices compuestos en tenantId + timestamp.
4. Implementar un sistema de caché con Redis para reducir latencia en catálogos frecuentes.
5. Agregar un dashboard de monitoreo en tiempo real para administradores.

### Observations
Miga-Co nace de una necesidad real en LATAM: las pastelerías artesanales carecen de herramientas digitales accesibles. La plataforma resuelve este problema mediante un modelo SaaS multi-tenant con arquitectura limpia por capas.

## <u> Let's Get Started: </u>
---

### Issue Creation
- Create an issue or if you want to work on an exisiting issue get it assigned to you first.
- **No PR's shall be accepted without issues been assigned.**
- Now, when you have got your issue assigned follow the steps below :
## Project Strengths (Actividad A)

1. **Arquitectura Limpia por Capas**
Separación clara entre Presentación, Aplicación, Dominio e Infraestructura. Esto facilita el mantenimiento, las pruebas unitarias y la evolución del sistema sin afectar capas externas.

2. **Modelo Multi-tenant con Aislamiento de Datos**
Uso del patrón *Shared Database con discriminador tenantId*. Cada pastelería tiene sus datos completamente separados a nivel lógico, con índices optimizados para consultas seguras y rápidas.

### Step 1. Create a Copy of this Repository
In order to work on an open-source project, you will first need to make your own copy of the repository. To do this, you should fork the repository and then clone it so that you have a local working copy.
3. **Stack Tecnológico Moderno y Escalable**
- **Backend:** Node.js + Express.js (asíncrono no bloqueante).
- **Frontend:** React 18 + Vite (SPA reactiva).
- **Base de datos:** MongoDB Atlas (esquema flexible, ideal para evolucionar sin migraciones complejas).
- **Contenedores:** Docker + Compose (entornos homogéneos).

> **Fork :fork_and_knife: this repo. Click on the Fork button at the top right corner.**
4. **Patrones de Diseño Aplicados Correctamente**
- *Middleware Chain (Express)*: Resolución de tenantId, validación JWT y logging como eslabones independientes.
- *Observer (React Context API)*: Theming dinámico por tenant sin sobrecarga.
- *Composite (React)*: Componentes reutilizables (ProductCard, TenantHeader) compartidos entre pastelerías.

With the repository forked, you’re ready to clone it so that you have a local working copy of the code base.
5. **Enfoque en un Problema Real del Mercado LATAM**
Las pastelerías artesanales no tienen herramientas digitales pensadas para su escala. Miga-Co llena ese vacío integrando catálogo visual, personalización de productos, pagos y logística en una sola plataforma.

> **Clone the Repository**
---

To make your own local copy of the repository you would like to contribute to, let’s first open up a terminal window.
## Improvement Opportunities (Actividad B)

We’ll use the git clone command along with the URL that points to your fork of the repository.
1. **Migrar de Express.js a NestJS a Largo Plazo**
Aunque Express funciona y el equipo lo conoce bien, NestJS ofrece inyección de dependencias nativa, módulos dinámicos para multi-tenant y mejor estructura para equipos grandes. Podría planearse una migración gradual.

* Open the Command Prompt
* Type this command:
2. **Implementar Caché Distribuida con Redis**
Los catálogos de productos se consultan con frecuencia. Un caché Redis reduciría latencia y carga sobre MongoDB, especialmente en horarios pico (días festivos, temporadas altas).

```
git clone https://github.com/your_username/WebArena
```
3. **Agregar Tests Automatizados en Pipelines de CI/CD**
El proyecto carece de pruebas unitarias y de integración documentadas. Integrar Jest + Supertest en un pipeline de GitHub Actions mejoraría la confiabilidad antes de cada despliegue.

<kbd><img width="633" alt="Screenshot 2022-10-04 at 2 53 53 AM" src="https://user-images.githubusercontent.com/73078636/193685501-b92510c3-2b9d-401c-abe0-834b4fdfccab.png"></kbd>
4. **Mejorar la Documentación de APIs con OpenAPI/Swagger**
Actualmente no hay documentación interactiva de los endpoints REST. Implementar `swagger-jsdoc` permitiría a nuevos desarrolladores entender rápidamente el contrato de la API.

5. **Implementar un Sistema de Logs Centralizado**
Con múltiples tenants, es difícil depurar errores específicos. Agregar Winston o Pino con transporte a servicios como Datadog o ELK facilitaría el monitoreo y la trazabilidad.

---

### Step 2: Creating a New Branch
It is important to branch the repository so that you are able to manage the workflow, isolate your code, and control what features make it back to the main branch of the project repository.
## Technology Stack Table (Actividad C)

When creating a branch, it is very important that you create your new branch off of the master branch.
**To create a new branch, from your terminal window, follow:**
| Technology | Purpose | Version |
| :--- | :--- | :--- |
| **React 18** | Frontend SPA. UI reactiva con componentes reutilizables | 18.2.0 |
| **Vite** | Build tool y dev server. Bundling rápido y HMR | 4.x |
| **Node.js** | Entorno de ejecución para el backend | 18.x o superior |
| **Express.js** | Framework backend minimalista. API REST y middleware chain | 4.18.x |
| **TypeScript** | Tipado estático entre capas. Evita errores en tiempo de ejecución | 5.x |
| **MongoDB Atlas** | Base de datos NoSQL. Esquema flexible y discriminador tenantId | 6.x |
| **JWT + bcrypt** | Autenticación stateless con tenantId embebido | Latest |
| **Docker + Compose** | Contenedorización para entornos homogéneos (dev/prod) | Latest |
| **React Router DOM** | Enrutamiento del lado del cliente | 6.x |
| **Axios** | Cliente HTTP para consumo de API REST | 1.x |

---

```
git branch new-branch
git checkout new-branch
```
Once you enter the git checkout command, you will receive the following output:
## Functional Requirements

```
Switched to branch 'new-branch'
```
| ID | Requisito Funcional |
| :--- | :--- |
| **RF-01** | El sistema deberá permitir el registro de pastelerías (tenants) con datos de negocio, dirección y configuración visual. |
| **RF-02** | El sistema deberá autenticar usuarios (dueños/empleados) mediante JWT con tenantId embebido en el token. |
| **RF-03** | El sistema deberá mostrar un catálogo de productos por tenant, con imágenes, descripción, precio y opciones de personalización. |
| **RF-04** | El sistema deberá permitir agregar productos al carrito de compras, calculando subtotales y aplicando descuentos si existen. |
| **RF-05** | El sistema deberá calcular el costo de envío en tiempo real basado en la dirección del cliente y la ubicación de la pastelería. |
| **RF-06** | El sistema deberá integrar una pasarela de pagos (Mercado Pago / Stripe) para procesar transacciones de forma segura. |
| **RF-07** | El sistema deberá permitir a los clientes rastrear el estado de su pedido (pendiente, confirmado, en preparación, en camino, entregado). |
| **RF-08** | El sistema deberá aislar los datos por tenant mediante un discriminador tenantId en cada colección de MongoDB. |
| **RF-09** | El sistema deberá aplicar la identidad visual de cada pastelería (colores, logo, tipografía) mediante Context API + CSS variables. |
| **RF-10** | El sistema deberá generar reportes de ventas por período (día, semana, mes) para que cada tenant pueda analizar su negocio. |

# 📸 Evidencias de la Práctica

### Step 3: Contribute
- Make relevant changes.Add new projects(make sure to put in the readme files in your folders).
- Contribute with any web project you feel like :)
## Evidencia 1: Fork del repositorio creado
<img width="1919" height="970" alt="image" src="https://github.com/user-attachments/assets/e729c3b5-d624-4f5a-81b7-76618ee57466" />

### Step 4: Commiting and Pushing:
Once you have modified an existing file or added a new file to the project, you can add it to your local repository, which we can do with the git add command.

``` git add filename``` or ``` git add .```
## Evidencia 2: Configuración de remotos - `git remote -v`
<img width="1913" height="1010" alt="Captura de pantalla 2026-06-01 185007" src="https://github.com/user-attachments/assets/64729663-eb56-474e-ad52-bb19fad2251e" />

You can type the command ```git add -A``` or alternatively ```git add -all``` for all new files to be staged.

## Evidencia 3: Ramas del proyecto - `git branch`
<img width="1247" height="320" alt="image" src="https://github.com/user-attachments/assets/7e68e398-83af-4849-b132-989e54346abd" />

**With our file staged, we’ll want to record the changes that we made to the repository with the ```git commit``` command.**
<p> The commit message is an important aspect of your code contribution; it helps the other contributors fully understand the change you have made, why you made it, and how significant it is. </p>

```
git commit -m "commit message"
```


At this point you can use the ```git push``` command to push the changes to the current branch of your forked repository:
```
git push --set-upstream origin new-branch
```

### Step 6: Create Pull Request
At this point, you are ready to make a pull request to the original repository.

You should navigate to your **forked** repository, and press the “Compare & pull request” button on the page.
<kbd><img width="911" alt="Screenshot 2022-10-04 at 3 21 21 AM" src="https://user-images.githubusercontent.com/73078636/193692534-54eb66df-9f17-40fc-accd-deca18f802fd.png"></kbd>
## Evidencia 4: Historial de commits - `git log --oneline`
<img width="1256" height="584" alt="image" src="https://github.com/user-attachments/assets/ae9a57c2-fb99-4680-bf55-3710a174a767" />

GitHub will alert you that you are able to merge the two branches because there is no competing code. You should add in a **title**, a **comment**, and then press the **“Create pull request”** button.

<kbd>
<img width="912" alt="Screenshot 2022-10-04 at 3 24 21 AM" src="https://user-images.githubusercontent.com/73078636/193692962-69677f51-c1ec-4ee8-b123-012de4411434.png">
</kbd>
## Evidencia 5: Pull Request creado
<img width="1919" height="970" alt="Captura de pantalla 2026-06-01 192558" src="https://github.com/user-attachments/assets/ef3967a5-4f1f-4a59-8045-9b75b90e03cc" />

### Step 7: CONGRATULATIONS :boom: :clap: :relaxed:
You have made it till the end. Kudos to you!!
## Evidencia 6: URL del Pull Request
https://github.com/LiizethRR/WebArena/pull/2

<hr> </hr>
## Reto:
<img width="1918" height="981" alt="image" src="https://github.com/user-attachments/assets/b20ac046-bfa4-40aa-91ca-b7f37a23c16c" />

### How to upload the files

* Upload your folders with the corresponding files and a readme.md file.
* **Under no circumstances create new folders or directly upload files within the folders of other projects.**

#### Please see the <a href="https://github.com/Anadee11/WebArena/blob/main/CONTRIBUTING.md"> **Contributing Guidelines** </a>.
## Architecture Diagram (Actividad D)

<hr> </hr>
```mermaid
graph TB
subgraph "Cliente (Browser)"
A[React SPA<br/>Componentes + Context API]
end

## Please STAR :star2: this repository if you liked it and had fun :)
subgraph "Backend - Express.js"
B[Middleware Chain<br/>CORS → Logger → tenantId → JWT]
C[Controladores<br/>Producto, Pedido, Auth]
D[Servicios<br/>Lógica de negocio]
E[Repositorios<br/>Acceso a datos]
end

### Maintainer! :blush:
subgraph "Infraestructura"
F[(MongoDB Atlas<br/>Colecciones c/ tenantId)]
G[Docker Container<br/>Node.js + Express]
end

<table>
<tbody><tr>
<td align="center"><a href="https://github.com/anadee11"><img alt="" src="https://avatars.githubusercontent.com/anadee11" width="100px;"><br><sub><b>Anadee</b></sub></a><br><a href="https://github.com/anadee11" title="Code">💻 🖋</a></td> </a></td>
</tr>
</tbody></table>
<hr>
subgraph "Patrones de Diseño"
H[Middleware Chain<br/>Chain of Responsibility]
I[Observer<br/>React Context]
J[Composite<br/>Componentes UI]
K[Singleton<br/>Módulos compartidos]
end

A -- "HTTP / JSON" --> B
B --> C
C --> D
D --> E
E --> F
G --> G

style A fill:#61dafb,stroke:#20232a,stroke-width:2px
style B fill:#68a063,stroke:#333,stroke-width:2px
style F fill:#4db33d,stroke:#333,stroke-width:2px
style H fill:#ffc107,stroke:#333,stroke-width:1px
style I fill:#ffc107,stroke:#333,stroke-width:1px
style J fill:#ffc107,stroke:#333,stroke-width:1px
style K fill:#ffc107,stroke:#333,stroke-width:1px