Plantilla: caso de estudio

Resumen: plataforma web para gestionar pedidos de una tienda local, con panel de administración y vista móvil para el equipo en almacén.

Contexto

El cliente recibía pedidos por WhatsApp y los anotaba en una hoja de cálculo. Eso generaba retrasos, errores de stock y poca visibilidad del estado de cada envío.

Objetivo: un único lugar para crear pedidos, ver inventario y marcar entregas, accesible desde el mostrador y el móvil.

Rol y stack

Área	Detalle
Rol	Diseño, desarrollo full stack y despliegue
Frontend	Astro, Tailwind CSS
Backend	API en Node.js
Base de datos	PostgreSQL (Neon)
Hosting	Vercel + dominio del cliente

Solución

Landing y login — acceso por rol (admin / almacén).
Panel de pedidos — listado, filtros y estados (pendiente, en preparación, enviado).
Inventario — alertas cuando el stock baja del mínimo.
API REST — validación de datos y sincronización con el panel.

Prioricé HTML estático donde fue posible y solo hidraté los formularios interactivos.

Mockups

Escritorio — vista principal

Mockup escritorio del panel de pedidos

Listado de pedidos del día con filtros por estado y búsqueda rápida.

Móvil — almacén

Mockup móvil para marcar pedidos como enviados

Interfaz simplificada para el equipo en almacén: escanear o buscar pedido y confirmar envío.

Panel de métricas

Mockup del dashboard de métricas

Resumen de pedidos, ingresos estimados y productos con stock bajo.

Sustituye estos SVG por capturas reales de Figma o del producto en producción.

Arquitectura (simplificada)

Cliente (Astro)  →  API (Node)  →  PostgreSQL
       ↓
   Vercel CDN

Autenticación con sesión segura.
Variables de entorno para credenciales (nunca en el repo).
CI: lint y build en cada push a main.

Resultados

Tiempo medio de gestión por pedido: de ~25 min a ~8 min.
Errores de stock: reducción estimada del 35 % en el primer mes.
Lighthouse (móvil): 94 rendimiento, 100 accesibilidad en la landing.

Aprendizajes

Validar el flujo en almacén con usuarios reales antes de pulir el diseño visual.
Los mockups en wireframe ayudaron a alinear expectativas sin invertir en UI final demasiado pronto.
Documentar el caso de estudio en español facilita compartirlo con clientes locales.

Enlaces

Demo en vivo — sustituye por tu URL.
Repositorio — código de referencia.

Para reutilizar esta plantilla, duplica la carpeta plantilla-caso-de-estudio, renómbrala y actualiza el frontmatter y las imágenes.