🍔 Restaurant Order System — Proyecto Final PP4

Sistema completo de gestión de pedidos para restaurantes con escaneo de QR por mesa, panel de administración, integración de pagos con MercadoPago y monitoreo con Prometheus + Grafana.

📋 Tabla de Contenidos

Descripción General
Arquitectura
Tecnologías
Estructura del Proyecto
Requisitos Previos
Inicio Rápido con Docker
Variables de Entorno
CI/CD y Despliegue
Monitoreo
Infraestructura como Código
Documentación por Módulo

📖 Descripción General

Este sistema permite a los clientes de un restaurante escanear un código QR en su mesa para acceder al menú digital, armar su pedido y pagar directamente desde su celular mediante MercadoPago. El personal del restaurante cuenta con un Panel de Administración protegido donde puede gestionar mesas, productos, pedidos y usuarios.

Flujo principal del cliente

Escanear QR de la mesa → Ver menú → Agregar al carrito → Pagar con MercadoPago → Pedido registrado automáticamente

Flujo del administrador

Login → Panel Admin → Gestionar Mesas / Productos / Pedidos / Usuarios / Ver métricas diarias

🏗️ Arquitectura

┌─────────────────────────────────────────────────────────────┐
│                        Clientes                             │
│              (Navegador web / celular con QR)               │
└────────────────────────┬────────────────────────────────────┘
                         │ HTTPS
┌────────────────────────▼────────────────────────────────────┐
│              Frontend (React + Vite)                        │
│         Vercel — https://proyecto-final-pp-4.vercel.app     │
└────────────────────────┬────────────────────────────────────┘
                         │ REST API
┌────────────────────────▼────────────────────────────────────┐
│              Backend (Express.js + Prisma)                  │
│           Render — https://server-ocdr.onrender.com         │
│                                                             │
│  ┌─────────────┐ ┌──────────────┐ ┌─────────────────────┐  │
│  │   /users    │ │  /products   │ │       /mesas        │  │
│  ├─────────────┤ ├──────────────┤ ├─────────────────────┤  │
│  │  /payments  │ │   /orders    │ │       /metrics      │  │
│  └─────────────┘ └──────────────┘ └─────────────────────┘  │
└────────┬───────────────────────────────────────────────────-┘
         │
┌────────▼──────────┐     ┌──────────────────────────────────┐
│   PostgreSQL 15   │     │   MercadoPago API                │
│  (Docker / Render)│     │   (Procesamiento de pagos)       │
└───────────────────┘     └──────────────────────────────────┘
         │
┌────────▼───────────────────────────────────────────────────┐
│              Monitoreo                                      │
│  Prometheus (:9090) + Grafana (:3000)                       │
└────────────────────────────────────────────────────────────┘

🛠️ Tecnologías

Capa	Tecnología
Frontend	React 19, Vite 7, React Router DOM, TailwindCSS 3, Lucide React
Backend	Node.js 18, Express 5, Prisma 6, Zod
Base de datos	PostgreSQL 15
Autenticación	JWT (jsonwebtoken) + bcryptjs
Pagos	MercadoPago SDK v2
Monitoreo	Prometheus (prom-client) + Grafana
Contenedores	Docker, Docker Compose
CI/CD	GitHub Actions
Deploy Frontend	Vercel
Deploy Backend	Render
IaC	Terraform (Vercel Provider)
QR	html5-qrcode, react-qr-code
PWA	vite-plugin-pwa

📁 Estructura del Proyecto

Proyecto-Final-PP4/
├── .github/
│   └── workflows/
│       ├── ci-cd.yml               # Pipeline: build → test → Docker Hub → Render + Vercel
│       └── terraform-vercel.yml    # Deploy de infraestructura con Terraform
│
├── client/                         # Aplicación React (Frontend)
│   ├── src/
│   │   ├── components/             # Componentes de la UI
│   │   │   ├── AdminDashboard.jsx  # Panel principal del admin
│   │   │   ├── Cart.jsx            # Carrito de compras
│   │   │   ├── Login.jsx           # Pantalla de login
│   │   │   ├── MenuManagement.jsx  # Gestión del menú (admin)
│   │   │   ├── MenuSection.jsx     # Vista del menú para clientes
│   │   │   ├── OrderManagement.jsx # Gestión de pedidos (admin)
│   │   │   ├── QRScanner.jsx       # Escáner de QR de mesa
│   │   │   ├── RestaurantApp.jsx   # App principal del cliente
│   │   │   ├── TableManagement.jsx # Gestión de mesas (admin)
│   │   │   └── UserManagement.jsx  # Gestión de usuarios (admin)
│   │   ├── config/
│   │   │   └── api.js              # URL base de la API (dev/prod)
│   │   ├── App.jsx                 # Router principal + páginas de pago
│   │   └── main.jsx                # Entry point
│   ├── Dockerfile                  # Multi-stage: build → nginx
│   ├── vercel.json                 # Config de routing para Vercel
│   └── package.json
│
├── server/                         # API REST (Backend)
│   ├── controllers/                # Lógica de los endpoints
│   ├── middlewares/                # Auth, CORS, errores, Prometheus
│   ├── routes/                     # Definición de rutas Express
│   ├── services/                   # Lógica de negocio y acceso a DB
│   ├── utils/                      # JWT, hash, manejo de errores
│   ├── prisma/
│   │   ├── schema.prisma           # Modelos de la base de datos
│   │   └── seed.js                 # Datos iniciales (productos, mesas, admin)
│   ├── Dockerfile                  # Imagen Node.js + Prisma
│   └── package.json
│
├── infra/                          # Infraestructura como código
│   ├── main.tf                     # Recursos Vercel (proyecto + deploy)
│   └── variables.tf                # Variables de Terraform
│
├── monitoring/                     # Observabilidad
│   ├── prometheus.yml              # Configuración de scraping
│   └── grafana-provisioning/       # Dashboards y datasources de Grafana
│
├── test/                           # Tests de integración (Jest)
├── docker-compose.yaml             # Orquestación local completa
├── jest.config.mjs                 # Configuración de Jest
└── package.json                    # Scripts de test raíz

✅ Requisitos Previos

Node.js v18 o superior
Docker y Docker Compose
Cuenta en MercadoPago Developers (para credenciales)
(Opcional) Cuenta en Vercel y Render para deploy en la nube

🚀 Inicio Rápido con Docker

La forma más fácil de levantar el proyecto completo (frontend + backend + base de datos + monitoreo):

# 1. Clonar el repositorio
git clone https://github.com/GustavoBaranda/Proyecto-Final-PP4.git
cd Proyecto-Final-PP4

# 2. Crear el archivo de variables de entorno del servidor
cp server/.env.example server/.env
# Editar server/.env con tus credenciales

# 3. Levantar todos los servicios
docker compose up --build

Servicios disponibles después del `docker compose up`

Servicio	URL
Frontend	http://localhost:5173
Backend API	http://localhost:8000
API Status	http://localhost:8000/api/status
Métricas Prometheus	http://localhost:8000/metrics
Prometheus UI	http://localhost:9090
Grafana Dashboard	http://localhost:3000 (user: `admin` / pass: `admin`)
PostgreSQL	`localhost:5432` (user: `user`, pass: `password`, db: `mydb`)

El servicio seed corre automáticamente al iniciar, cargando productos, mesas y el usuario admin inicial.

🔐 Variables de Entorno

Backend (`server/.env`)

# Base de datos
DATABASE_URL=postgres://user:password@localhost:5432/mydb?sslmode=disable

# Servidor
PORT=8000
NODE_ENV=development

# JWT
JWT_SECRET=tu_secreto_jwt_aqui

# MercadoPago
MERCADOPAGO_ACCESS_TOKEN=tu_access_token_de_mercadopago
MERCADOPAGO_BASE_URL=https://tu-backend.onrender.com
MERCADOPAGO_NOTIFY_URL=https://tu-backend.onrender.com/api/payments/webhook

# CORS / Redirecciones
FRONTEND_URL=http://localhost:5173

Frontend (`client/.env`)

REACT_APP_API_URL=http://localhost:8000

Nota: En producción, el frontend detecta automáticamente el entorno y apunta a https://server-ocdr.onrender.com.

🔄 CI/CD y Despliegue

El pipeline de GitHub Actions (.github/workflows/ci-cd.yml) se activa en cada push a master:

push a master
      │
      ▼
┌─────────────────────────────────┐
│  Job 1: build-test-push         │
│  1. Instalar dependencias       │
│  2. Correr tests (Jest)         │
│  3. Build Docker (front + back) │
│  4. Push a Docker Hub           │
└──────────────┬──────────────────┘
               │ (on success)
               ▼
┌─────────────────────────────────┐
│  Job 2: deploy                  │
│  1. Trigger Render deploy hook  │
│  2. Trigger Vercel deploy hook  │
└──────────────┬──────────────────┘
               │
               ▼
┌─────────────────────────────────┐
│  Job 3: notify                  │
│  Muestra resumen del pipeline   │
└─────────────────────────────────┘

Secrets de GitHub Actions requeridos

Secret	Descripción
`DOCKERHUB_USERNAME`	Usuario de Docker Hub
`DOCKERHUB_TOKEN`	Token de acceso a Docker Hub
`RENDER_DEPLOY_HOOK`	URL webhook de redeploy en Render
`VERCEL_DEPLOY_HOOK`	URL webhook de redeploy en Vercel

📊 Monitoreo

El backend expone métricas en formato Prometheus en el endpoint GET /metrics.

Métricas disponibles

Métrica	Tipo	Descripción
`http_request_duration_seconds`	Histogram	Latencia de requests HTTP
`http_requests_total`	Counter	Total de requests por método/ruta/status
`http_request_errors_total`	Counter	Errores 4xx y 5xx
`http_response_size_bytes`	Histogram	Tamaño de respuestas
`http_requests_in_progress`	Gauge	Requests activas en tiempo real
Métricas del proceso Node.js	Default	CPU, memoria, GC, etc.

Grafana está pre-configurado con provisioning automático y se conecta a Prometheus como datasource.

🏗️ Infraestructura como Código

El directorio infra/ contiene la configuración de Terraform para gestionar el proyecto de Vercel:

cd infra

# Inicializar Terraform
terraform init

# Ver el plan de cambios
terraform plan -var="vercel_api_token=TU_TOKEN"

# Aplicar cambios
terraform apply -var="vercel_api_token=TU_TOKEN"

📚 Documentación por Módulo

📄 README del Frontend (client) — Componentes, rutas, configuración de Vite y PWA
📄 README del Backend (server) — API REST, endpoints, modelos, autenticación y middlewares

👥 Autores

Breaking Code — Proyecto Final PP4

📄 Licencia

ISC

Navigation Menu

Repository files navigation

🍔 Restaurant Order System — Proyecto Final PP4

📋 Tabla de Contenidos

📖 Descripción General

Flujo principal del cliente

Flujo del administrador

🏗️ Arquitectura

🛠️ Tecnologías

📁 Estructura del Proyecto

✅ Requisitos Previos

🚀 Inicio Rápido con Docker

Servicios disponibles después del `docker compose up`

🔐 Variables de Entorno

Backend (`server/.env`)

Frontend (`client/.env`)

🔄 CI/CD y Despliegue

Secrets de GitHub Actions requeridos

📊 Monitoreo

Métricas disponibles

🏗️ Infraestructura como Código

📚 Documentación por Módulo

👥 Autores

📄 Licencia

About

Releases

Packages

Contributors

Languages

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
client		client
infra		infra
monitoring		monitoring
server		server
test		test
.gitignore		.gitignore
README.md		README.md
docker-compose.yaml		docker-compose.yaml
jest.config.mjs		jest.config.mjs
package-lock.json		package-lock.json
package.json		package.json

Latest commit

History

Folders and files

Repository files navigation

🍔 Restaurant Order System — Proyecto Final PP4

📋 Tabla de Contenidos

📖 Descripción General

Flujo principal del cliente

Flujo del administrador

🏗️ Arquitectura

🛠️ Tecnologías

📁 Estructura del Proyecto

✅ Requisitos Previos

🚀 Inicio Rápido con Docker

Servicios disponibles después del docker compose up

🔐 Variables de Entorno

Backend (server/.env)

Frontend (client/.env)

🔄 CI/CD y Despliegue

Secrets de GitHub Actions requeridos

📊 Monitoreo

Métricas disponibles

🏗️ Infraestructura como Código

📚 Documentación por Módulo

👥 Autores

📄 Licencia

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Servicios disponibles después del `docker compose up`

Backend (`server/.env`)

Frontend (`client/.env`)