Volver a proyectos

Traditional Pizza | Sitio web de pizzería

Un sitio web moderno y atractivo para una pizzería local, que incluye un menú interactivo, opciones de pedido y reserva en linea.

Astro TailwindCSS NodeJS
Traditional Pizza | Sitio web de pizzería

Cómo construí Traditional Pizza

UX Case Study

Vivimos en la era digital, pero muchas pizzerías locales siguen dependiendo de menús en PDF difíciles de leer en móviles o páginas de Facebook desactualizadas.

Me di cuenta de que la fricción al momento de pedir comida hace que los negocios pierdan clientes. El objetivo no era solo hacer una "web bonita", sino construir una experiencia de compra fluida e instantánea.

// PERFORMANCE_MATTERS

"El cliente come con los ojos, pero pide con el pulgar. Si la web tarda más de 3 segundos en cargar el menú, el cliente se va a la competencia."

Traditional Pizza nació para modernizar la presencia digital del negocio local, utilizando tecnologías modernas para garantizar un rendimiento del 100% y una navegación intuitiva.

Desafíos de Ingeniería

Frontend Focus
01_PERFORMANCE

Cero JavaScript Bloqueante

Las webs tradicionales (SPAs) envían demasiado código innecesario, ralentizando la carga en conexiones móviles 3G/4G.

Estrategia

Uso de Astro Static Site Generation (SSG) para enviar HTML puro, logrando un puntaje de 100 en Lighthouse.

02_ARCHITECTURE

Componentización Escalable

Mantener la consistencia visual en un menú extenso y variado sin repetir código HTML ni clases CSS.

Estrategia

Arquitectura basada en componentes reutilizables y un sistema de diseño atómico con TailwindCSS.

03_INTERACTIVITY

Interactividad Ligera

Se necesitaba interactividad para el menú y el carrito, pero cargar un framework completo como React afectaría el SEO y la velocidad inicial.

Solución Aplicada

Implementación de lógica con Vanilla JavaScript optimizado para manipulación del DOM sin dependencias pesadas.

Impacto y Roadmap

Este proyecto demuestra cómo la elección correcta del stack tecnológico puede transformar la experiencia de un negocio local, priorizando al usuario final sobre la complejidad innecesaria.

NEXT STEP 01 Pasarela de Pagos
NEXT STEP 02 Panel Admin (CMS)