Users CRUD App 👥

Una aplicación CRUD (Create, Read, Update, Delete) de gestión de usuarios construida con JavaScript Vanilla moderno, empaquetada con Vite y respaldada por una API REST simulada con JSON Server.

Este proyecto implementa patrones de arquitectura limpia en frontend: separación de responsabilidades en capas (casos de uso, modelos, mapeadores, almacenamiento centralizado de estado y componentes de presentación).

---

✨ Características

• 📋 Listado y Paginación: Visualización de registros de usuarios con soporte para paginación dinámica.
• ➕ Creación de Usuarios: Formulario modal para registrar nuevos usuarios con validación de datos.
• ✏️ Edición de Usuarios: Carga y actualización de datos existentes (nombres, balance y estado activo/inactivo).
• 🗑️ Eliminación: Eliminación reactiva de registros tanto en el servidor local como en la interfaz.
• 🧱 Arquitectura Modular: Separación estricta entre la UI, los casos de uso (use-cases), el estado (store) y el modelo de datos (models / mappers).

---

🛠️ Tecnologías Utilizadas

• JavaScript (ESNext) – Sintaxis moderna, módulos nativos y async/await.
• Vite – Entorno de desarrollo rápido y empaquetador.
• pnpm – Gestor de paquetes eficiente.
• JSON Server (v0.17.4) – Backend mock REST API para persistencia de datos local en db.json.
• CSS3 – Estilos modulares y desacoplados por componente.

---

📂 Estructura del Proyecto

src/
├── users/
│   ├── models/            # Clases y definición de tipos de datos (User)
│   ├── mappers/           # Adaptadores de datos (API <-> Dominio)
│   ├── presentation/      # Componentes UI (tablas, botones, modales)
│   ├── store/             # Estado global de la aplicación (paginación, usuarios cargados)
│   ├── use-cases/         # Lógica de negocio (get-user, save-user, delete-user, etc.)
│   └── users-app.js       # Punto de entrada del módulo de usuarios
├── main.js                # Inicialización de la aplicación
└── style.css              # Estilos globales
server/
└── db.json                # Base de datos simulada para JSON Server

🚀 Instalación y Uso

Sigue estos pasos para correr el proyecto localmente:

1. Clonar el repositorio

git clone https://github.com/tocanto/crud-app.git
cd crud-app

2. Instalar dependencias

Asegúrate de tener instalado pnpm:

pnpm install

3. Configurar variables de entorno

Crea un archivo .env en la raíz del proyecto tomando como referencia .env.template:

VITE_BASE_URL=http://localhost:3001/users

4. Iniciar el servidor backend (JSON Server)

En una terminal ejecuta:

pnpm run server

El servidor correrá en http://localhost:3001.

5. Iniciar la aplicación frontend (Vite)

En otra terminal ejecuta:

pnpm run dev

Abre http://localhost:5173 en tu navegador para interactuar con la aplicación.

📜 Scripts Disponibles

• pnpm run dev: Inicia el servidor de desarrollo de Vite.

• pnpm run build: Genera el bundle de producción en la carpeta dist.

• pnpm run preview: Previsualiza localmente el build de producción.

• pnpm run server: Levanta JSON Server con el archivo de base de datos local.