Diseño de producto · Marca · Full-stack · 2026
Otra MesaLo bueno merece otra mesa.
Un producto casi real para salvar comida en Barranquilla — tres apps, reservas reales, pagos simulados y un código QR para recoger, sobre un stack que construí y alojo yo mismo.
Cada noche se tira comida buena por una sola razón: el día se acabó. Otra Mesa la vende como “sorpresa de la casa” por cerca de un tercio del precio — menos desperdicio, un ingreso justo para el restaurante y vecinos nuevos en su mesa.
- Mi papel — todo: marca, diseño de producto, sistema de diseño, front-end, back-end y los servidores donde funciona.
- El producto — tres apps sobre una API, para clientes, para restaurantes y para el admin.
- Qué tan real — cuentas, reservas, códigos de recogida, valoraciones y notificaciones funcionan de verdad. Solo el dinero es simulado, con tarjetas de prueba.
- Dónde — Barranquilla, Colombia — una demo que funciona, con restaurantes de ejemplo. Construido y alojado por mí en Alemania.
Descubrir, una sorpresa y el mapa. Reservas, pagas y la recoges hoy con un código QR.
Tres apps, una API
| App | Qué hace |
|---|---|
| App de clientes, para la gente cercana | descubrir y mapa, reservar y pagar, recogida con QR, favoritos, valoraciones, la comida que has salvado |
| Portal de negocios, para el equipo del restaurante | pedir el alta, publicar sorpresas (siempre con 30 % o más de descuento), escanear el QR, invitar al equipo, ver el dinero |
| Oficina del admin, para mí | aprobar restaurantes, reservas, pagos y liquidaciones, usuarios, reseñas, un registro de cada acción |
El portal de negocios vive en el móvil del mostrador.
La oficina del admin: cada reserva de todos los restaurantes, en cuanto llega.
Diseño: sereno y sistemático
Sereno por defecto. Fondo blanco, un solo color de texto, una sola tipografía. El verde del logo lleva las acciones principales; el terracota se guarda para los detalles pequeños — estrellas, etiquetas, la pestaña activa. Las horas se escriben como se dicen en Barranquilla: 5:15–5:45 p. m.
Una fuente para tres apps. Cada color, tamaño, esquina y sombra es un token: nueve tamaños de letra, doce espaciados, cinco radios, cuatro sombras, seis colores de gráficos aptos para daltonismo y un modo oscuro para las herramientas de los negocios.
Documentado, probado y en vivo. Once componentes de verdad — los mismos que usan las tres apps — en un catálogo público, cada uno en claro y oscuro con su revisión de accesibilidad. Las pruebas unitarias y de tipos se pasan en cada cambio; el código y los tokens son públicos en GitHub, con versiones semánticas. Un libro de muestras de 45 páginas cuenta la historia que hay detrás.
En vivo desde el catálogo: las tarjetas de sorpresa. Deslízalas: es el componente de verdad, no una foto.
Sistema de diseño en vivo ↗ · Código en GitHub ↗ · Libro de muestras (PDF, 45 páginas) ↗
Ingeniería: lo difícil
| Problema | Cómo lo resolví |
|---|---|
| “Cerca de mí”, al metro | MongoDB con un índice 2dsphere y $geoNear; Postgres sigue siendo el registro oficial. Distancias comprobadas con Haversine. |
| Nunca vender dos veces la última | El stock baja en un solo paso atómico de la base de datos: dos personas, una sorpresa, una reserva. |
| Dinero, sin dinero real | Autorizado al reservar, cobrado al recoger, anulado al cancelar, reembolsable — con un 20 % de comisión y liquidaciones. Solo tarjetas de prueba; solo se guardan los últimos cuatro dígitos. |
| Entrar sin contraseña | Google (OpenID Connect con PKCE) o un código de seis cifras por correo: guardado como huella, caduca y se quema tras cinco intentos. |
| Dueño aquí, equipo allá | Una cuenta, varias llaves. Las invitaciones por correo se vuelven llaves al entrar por primera vez; un restaurante nunca se queda sin su último dueño. |
| Avisar a tiempo | Web Push: una reserva nueva para el equipo, “recogida en 30 minutos” para el cliente. |
Funciona como un producto real
Después del lanzamiento medí, recorté y volví a medir — en un móvil de gama media con 4G lento, la mediana de tres cargas:
| 4G lento | Antes | Después |
|---|---|---|
| Descubrir · descargado | 1.918 KB | 664 KB (−65 %) |
| Descubrir · imagen principal visible | 10,1 s | 3,5 s |
| Datos de la API por pantalla | 141 KB | 15 KB |
- Probado en cada cambio — tres robots recorren todo el camino: 98 comprobaciones para clientes, negocios, el admin y los dos modos de color.
- Copias que se restauran — una copia cada noche, probada restaurándola; cada cambio en la base de datos se ensaya antes en una copia.
- Una caja negra para los errores — GlitchTip en mi propio servidor, con mapas del código que nunca se publican. Sin datos personales, borrados a los 30 días.
- Un panel honesto — cada cifra con su comparación y su n, cada gráfico también como tabla. Los datos de ejemplo siempre van señalados.
- Automatizaciones que avisan — n8n manda un resumen cada mañana, un informe semanal a cada restaurante y un aviso si una tarea falla. Su usuario de la base de datos solo lee lo justo para los informes.
La consola muestra cada tarea automática, y una que deja de funcionar aparece como atrasada. El informe semanal llega a cada restaurante — aquí con un restaurante de demostración y datos de ejemplo.
Accesible desde el principio
Cada pantalla revisada con WCAG 2.2 AA — el estándar detrás de la ley alemana de accesibilidad (BFSG) — primero con un robot y después a mano, entrando como cliente, como restaurante y como administrador.
| Qué fallaba | Qué cambió |
|---|---|
| La foto de cada tarjeta era un botón sin nombre: un lector de pantalla oía “botón, botón, botón” | El nombre de abajo abre la sorpresa; la foto sigue siendo un atajo para el dedo |
| En el mapa, el anillo de foco casi desaparecía (2,6:1) | Un anillo de tinta con un hueco, visible sobre cualquier calle — arreglado una vez, en el sistema de diseño |
| Las reservas pasadas se pintaban al 70 % y su texto bajaba a 2,9:1 | Ahora solo se apaga la foto; el texto se sigue leyendo |
| Al cambiar de pantalla, quien usa teclado o lector de pantalla se quedaba perdido | El foco va al título nuevo y la pestaña del navegador dice dónde estás |
El resultado: 14 de 14 pantallas públicas, 18 de 18 vistas del back office y 8 de 8 del portal de restaurantes sin fallos, en claro y oscuro. Declaración de accesibilidad ↗
Stack
Front-end — React · React Router · Vite · Leaflet + OpenStreetMap
Back-end — Node.js · Express · Postgres · MongoDB · Web Push · Google OpenID Connect
Infraestructura — Hetzner Alemania · Docker · Caddy · GlitchTip · n8n · Monorepo