La Espiga · Panadería de barrio

Proyecto de demostración. La Espiga es un negocio ficticio. Hice este sitio como ejemplo de mi trabajo de diseño y desarrollo web. Conocé más en michasevich.com.

Sitio completo pensado para vecinos, familias y gente mayor de un barrio de Montevideo. Funciona como una página real: se puede navegar, armar pedidos y guardar datos, pero no cobra nada ni envía información a ningún servidor.

Versión publicada: laespiga.michasevich.com

Tecnologías

• Next.js 16 con App Router
• React 19 y TypeScript
• Tailwind CSS 4 y componentes de Radix
• Efectos 3D hechos con CSS, sin librerías pesadas
• localStorage para guardar el carrito, los datos y los pedidos en el navegador del visitante
• Publicado en Netlify

Estilo

Papel crema, kraft, pizarra con tiza y sello rojo. Fuentes Young Serif, Kalam y Atkinson Hyperlegible Next, pensada para baja visión. Texto grande, contraste alto y un botón de "Letra grande".

Funcionalidades principales

• Abierto ahora: el estado del local con la hora real de Montevideo.
• Carta tipo pizarra por pestañas, con fotos, filtros por alérgeno y ficha de cada producto.
• Vitrina 3D, horno de ladrillo que se abre y sello que se da vuelta.
• Torta configurable en 3D para encargos, con precio y porciones en vivo.
• Promos del día, desayunos para regalar, pan de la semana y tarjeta de sellos.
• Pedido por WhatsApp: bolsa con retiro o envío y hora, Mis datos y Mis pedidos.
• Accesible: letra grande, alto contraste y navegación con teclado.

Cómo correrlo en local

Necesitás Node.js 20.9 o más nuevo. Recomiendo la versión 22.

git clone https://github.com/maximichasevich/demo-la-espiga.git
cd demo-la-espiga
npm install
npm run dev        # http://localhost:3000

No hace falta configurar nada. Otros comandos:

npm run build && npm start   # versión optimizada
npm run lint                 # revisión de código
npm run typecheck            # revisión de tipos

Configuración

config/sitio.ts tiene el nombre del negocio, la dirección de esta demo, la del portfolio y el WhatsApp del botón "¿Querés una página así?". Las direcciones también se pueden definir con las variables de .env.example.

Estructura

app/layout.tsx          Base del sitio: fuentes, estilos globales y botón de WhatsApp
app/(sitio)/            Diseño, estilos y páginas de la demo
components/demos/       Secciones, componentes, aviso "Demo" y créditos de fotos
config/                 Nombre y direcciones
public/demos/           Fotos

Créditos

Las fotos son de Wikimedia Commons con licencias libres. Cada foto muestra su autor y licencia dentro del sitio.

Autor

Diseñado y desarrollado por Maximiliano Michasevich. michasevich.com · [email protected]

---

English

La Espiga is a demo project for a fictional business. A neighborhood bakery website designed for families and older adults, with large type and high contrast. It was built by Maximiliano Michasevich, a web designer and developer based in Montevideo, Uruguay, as a portfolio sample. See more at michasevich.com.

• Live demo: laespiga.michasevich.com
• Stack: Next.js 16, React 19, TypeScript, Tailwind CSS 4, Netlify.
• Highlights: chalkboard menu with photos and allergen filters, 3D display case and cake builder, live "open now" status, and ordering through WhatsApp.
• Run locally: npm install, then npm run dev.