Restaurant Frontend

Nota personal:
Este proyecto es el cliente web de la Restaurant API, desarrollado como ejercicio de aprendizaje y práctica con Angular y tecnologías modernas de frontend.
Está diseñado para interactuar directamente con el backend, ofreciendo interfaces diferenciadas para administradores y clientes.
No es un producto final de producción, pero puede servir como referencia o punto de partida para otros desarrollos.

---

Descripción general

La Restaurant Frontend es una aplicación web basada en Angular 16 que permite la gestión de un restaurante desde el navegador.
Incluye interfaces para administradores (gestión de categorías, productos y reservas) y para clientes (exploración del menú y sistema de reservas), con autenticación y control de acceso por roles.

---

Funcionalidades principales

• Autenticación y registro de usuarios con detección de roles.
• Control de acceso basado en permisos (ADMIN y CLIENTE).
• Gestión de categorías y productos para administradores.
• Sistema de reservas para clientes.
• Paneles diferenciados para administración y cliente.
• Integración total con la Restaurant API (Spring Boot).
• Diseño responsivo y moderno con ng-zorro-antd y Bootstrap.
• Persistencia de sesión mediante localStorage.

---

Pila tecnológica

Tecnología	Versión	Uso
Angular	16.2.0	Framework principal para SPA
TypeScript	5.1.3	Tipado estático y compilación
ng-zorro-antd	16.2.2	Librería principal de componentes UI
Bootstrap	5.3.3	Estilos adicionales y sistema de grid
RxJS	7.8.0	Programación reactiva y manejo de peticiones HTTP
SCSS	-	Preprocesador CSS
Karma / Jasmine	-	Frameworks de testing unitario

---

Arquitectura

La aplicación sigue una arquitectura modular con carga diferida (lazy loading) para optimizar rendimiento.
Se estructura en:

• Módulo principal: Configuración global, rutas base, guardias y servicios compartidos.
• Módulo de autenticación: Registro, login, gestión de sesión.
• Módulo administrativo: Gestión de categorías, productos y reservas.
• Módulo cliente: Navegación de menú, reservas, perfil de usuario.
• Servicios: Comunicación con la API, control de autenticación y utilidades.
• Componentes compartidos: Barra de navegación, formularios y elementos reutilizables.

---

Seguridad

• Autenticación JWT consumiendo la Restaurant API.
• Guardias de rutas (AuthGuard, RoleGuard) para restringir acceso.
• Persistencia de sesión con localStorage.
• UI adaptada dinámicamente según rol del usuario.

---

Gestión de datos

• Comunicación con el backend mediante HttpClient de Angular.
• Manejo de respuestas con RxJS y Observables.
• Mapeo de datos usando interfaces TypeScript.
• Validaciones reactivas en formularios (ReactiveFormsModule).

---

Ruteo y control de acceso

• Rutas públicas: Login, registro y navegación de menú.
• Rutas protegidas:
  • Administrador: /admin/**
  • Cliente: /customer/**
• Redirecciones automáticas según rol.
• Lazy loading para módulos pesados.

---

Ejecución local

Requisitos previos

• Node.js 18+
• Angular CLI instalado globalmente (npm install -g @angular/cli)
• Backend Restaurant API en ejecución (localhost:8080 por defecto)

# Clonar el repositorio
https://github.com/https-michi/restaurant-frontend.git

# Instalar dependencias
npm install

# Ejecutar en modo desarrollo
ng serve

Acceder en: http://localhost:4200

---

Contacto

Si quieres conversar o necesitas ayuda para integrarlo con tu backend, puedes encontrarme aquí:

• Instagram
• Discord: mi00001