Web Project
Pura Vida
Web de restaurante para Pura Vida - Piscinas Bar con menú dinámico impulsado por Google Sheets API
Requisitos
La idea principal detrás del proyecto Pura Vida era proporcionar al restaurante una carta dinámica y siempre actualizada accesible mediante código QR. La gerencia necesitaba la capacidad de añadir o retirar platos, promocionar ofertas, anunciar nuevos productos y ajustar precios en tiempo real sin depender de un desarrollador para cada cambio.
La solución tenía que ser lo suficientemente sencilla para que el personal no técnico pudiera gestionarla de forma independiente, lo suficientemente fiable para funcionar durante las horas punta y accesible para los clientes en cualquier dispositivo.
Solución Propuesta
Como desarrollador orientado principalmente al backend, creo que hay que saber elegir la mejor opción posible para cada proyecto. Desplegar un backend mínimo para algo tan simple, en lo que tan solamente interactuarían desde la gerencia del restaurante, lo consideré una mala idea desde el principio.
Tras investigar alternativas, encontré que la API de Google Sheets era una excelente opción. Es familiar para el personal del restaurante, mucho menos costosa de desarrollar que un backend personalizado y prácticamente cero coste de mantenimiento. La interfaz de hoja de cálculo no requiere formación y los cambios se propagan a la web al instante.
Además, ya que íbamos a desplegar un pequeño proyecto web con la carta, propuse la creación de una web de presentación mínima del local con datos básicos de contacto y fotos que muestren el ambiente y la decoración. Esto convirtió una simple página de carta en una presencia digital completa para el restaurante.
Hero
La página está diseñada para que cualquier visitante pueda realizar la acción que busca desde el primer segundo. Todos los elementos importantes del negocio están accesibles directamente desde el hero, eliminando pasos innecesarios y reduciendo la fricción durante la navegación.
Los dos llamados a la acción principales — Ver carta y Reservar mesa — ocupan una posición destacada y permiten acceder inmediatamente a las funcionalidades más demandadas por los clientes. Esto resulta especialmente relevante en un contexto donde gran parte de las visitas llegan mediante códigos QR y esperan encontrar la información en cuestión de segundos.
La estrategia de diseño prioriza la conversión y la experiencia de usuario: menos búsquedas, menos clics y acceso inmediato a todo lo que el restaurante ofrece.
Carta
La interfaz de la carta está diseñada para ser legible en dispositivos móviles. Los platos están organizados por categorías con tipografía clara, precios e indicadores de disponibilidad. El diseño se adapta con elegancia desde pantallas pequeñas de móvil hasta tablets, asegurando una experiencia consistente independientemente del dispositivo.
Cada categoría despliega sus platos de forma ordenada, permitiendo al cliente explorar las opciones sin sentirse abrumado. Los indicadores visuales de alérgenos y el sello de carne extremeña aparecen directamente junto a cada plato relevante, facilitando una toma de decisiones rápida.
La navegación por la carta prioriza la simplicidad y la claridad: el usuario siempre sabe dónde está, qué está viendo y cómo volver atrás. No hay menús ocultos ni funcionalidades innecesarias — solo lo que el cliente necesita para disfrutar de su experiencia.
Bodega
La sección de bodega presenta la selección de vinos del restaurante con tarjetas visuales para cada referencia. Cada entrada incluye origen, variedad de uva, notas de cata y sugerencias de maridaje. Esto eleva la experiencia gastronómica ayudando a los clientes a tomar decisiones informadas que complementen su comida.
Reservas
La sección de reservas proporciona información de contacto clara y anima a los clientes a reservar con antelación. Con botones de llamada a la acción prominentes y datos esenciales como horarios y ubicación, convertir un navegador de carta en una reserva es natural.
Se han integrado todos los métodos de contacto de forma accesible: WhatsApp para reservas rápidas, llamada directa para consultas inmediatas y email para comunicaciones formales. Cada canal está claramente identificado con iconos reconocibles y textos descriptivos que eliminan cualquier duda sobre cómo proceder.
Esta accesibilidad multi-canal no solo mejora la experiencia del usuario, sino que también contribuye al SEO local: los datos de contacto estructurados y visibles ayudan a los motores de búsqueda a entender y posicionar mejor el negocio en resultados locales.
Estrategia SEO
Aunque el SEO no es mi área principal de experiencia, me lo tomé en serio para este proyecto. Siendo sinceros, no es demasiado difícil competir en posicionamiento con locales de un pueblo de 2.500 habitantes, pero de igual modo, me lo tomé al 100% en serio y apliqué las mejores prácticas posibles.
El sitio implementa estructura HTML5 semántica con jerarquía de encabezados adecuada, meta descripciones adaptadas a la intención de búsqueda local y etiquetas Open Graph para compartir en redes sociales. La optimización del rendimiento mediante la generación estática de Astro asegura tiempos de carga rápidos — un factor crítico en los rankings de búsqueda.
Las consideraciones de SEO local incluyen marcado de datos estructurados para la información del negocio del restaurante, datos NAP (Nombre, Dirección, Teléfono) consistentes y diseño responsive mobile-first. La propia integración del código QR sirve como puente físico-digital que impulsa tráfico directo, complementando los esfuerzos de búsqueda orgánica.
El resultado es un sitio que no solo se posiciona bien en búsquedas locales relevantes, sino que también proporciona una experiencia de calidad que fomenta visitas repetidas y referencias boca a boca.
Resumen
La carta en versión web ha gustado mucho a los clientes del local. Se ha conseguido hacer una interfaz intuitiva y fácilmente usable en dispositivos móviles, incluso por personas de mayor edad y menor cultura tecnológica.
El sistema de código QR ha reducido la necesidad de actualizaciones de cartas impresas, ahorrando costes y asegurando que los clientes vean siempre las ofertas actuales. La capacidad de destacar nuevos productos y promociones ha contribuido directamente a una mayor visibilidad de artículos especiales.
Platos por Secciones
La carta está estructurada en secciones claras — entrantes, principales, postres y bebidas — facilitando que los clientes naveguen y encuentren lo que buscan. Cada sección es visualmente distinta con un formato consistente.
Sello Carne Extremeña
Un sello prominente destaca el compromiso del restaurante de servir carne 100% extremeña. Esta insignia de calidad se muestra de forma destacada en los platos relevantes, reforzando la dedicación del restaurante a ingredientes locales y premium, diferenciándolo de la competencia.
Alérgenos
La información de alérgenos está claramente marcada en cada plato mediante iconos estandarizados. Esto asegura que los clientes con restricciones dietéticas puedan identificar rápidamente opciones seguras sin necesidad de preguntar al personal, mejorando tanto la seguridad como la experiencia gastronómica.
Productos en Oferta
Las ofertas especiales y promociones se destacan con un tratamiento visual distintivo: insignias, acentos de color y secciones dedicadas atraen la atención sobre ofertas por tiempo limitado. Esta capacidad dinámica permite al restaurante responder rápidamente a cambios de inventario o promociones estacionales.
Nuevos Productos
Las nuevas incorporaciones a la carta reciben un destacado especial para captar la atención del público. Esta funcionalidad ayuda al restaurante a generar interés en nuevos platos y ofertas estacionales, asegurando que obtengan la visibilidad que merecen sin necesidad de rediseños de carta impresa.
Implementación
import { google } from "googleapis";
const sheets = google.sheets({ version: "v4" });
export async function getMenu() {
const auth = new google.auth.GoogleAuth({
keyFile: "credentials.json",
scopes: ["https://www.googleapis.com/auth/spreadsheets.readonly"],
});
const response = await sheets.spreadsheets.values.get({
auth,
spreadsheetId: process.env.SHEET_ID,
range: "Menu!A:E",
});
const rows = response.data.values || [];
const headers = rows.shift();
return rows.map((row) => ({
category: row[0],
name: row[1],
description: row[2],
price: row[3],
available: row[4] === "yes",
}));
}