Dehesa Real
Ecommerce premium de productos ibéricos artesanales de la Sierra de Huelva. 16 páginas funcionales, carrito persistente, checkout en 3 pasos y design system completo en CSS puro — sin librerías de UI, construido desde cero con criterio.
El reto
Una marca que pareciera real
El objetivo no era construir un ejercicio técnico. Era construir algo que pudiera confundirse con una marca en producción — con identidad propia, territorio concreto y una historia que el usuario creyera.
Dehesa Real necesitaba transmitir la autenticidad de los productos ibéricos de la Sierra de Huelva, con un tono rústico-premium inspirado en referencias como Cinco Jotas o Señorío de Montanera, pero construido desde cero y sin depender de ninguna plantilla.
"No un ejercicio técnico. Una web que podría estar en producción mañana."
La solución
16 páginas. Cero librerías de UI.
Una plataforma ecommerce completa construida con React 18 y Vite, con un design system propio basado en custom properties CSS. Sin Tailwind, sin MUI, sin Bootstrap — cada componente diseñado con criterio.
Catálogo de 21 productos con filtros avanzados, ordenación y sidebar sticky
Carrito persistente con localStorage, barra de envío gratis y cupón de descuento
Checkout en 3 pasos con validación, múltiples métodos de pago y confirmación con timeline
Autenticación completa — registro, login, perfil editable, historial de pedidos y lista de deseos
Stack técnico
Decisiones con criterio
Cada herramienta elegida por una razón concreta, no por moda. El resultado es una base de código limpia, escalable y lista para conectar a cualquier API o backend real.
React 18
Componentes funcionales y hooks. Sin clases, sin código legacy.
Vite
Arranque en milisegundos. Build optimizado para producción.
CSS puro
Design system con custom properties. Sin Tailwind, sin Bootstrap.
Context API
Tres contextos globales: carrito, autenticación y lista de deseos.
Vercel
Deploy automático. Push a GitHub y en 60 segundos en producción.
JSON local
21 productos, 4 artículos de blog. Listo para conectar a una API real.
SEO técnico
Sin librerías.
SEO propio desde cero.
La mayoría de proyectos React ignoran el SEO o delegan en librerías externas. En Dehesa Real se construyó un hook propio — useSEO — que actualiza dinámicamente cada meta tag, Open Graph, Twitter Card y Schema.org en cada cambio de ruta. Puro DOM, cero dependencias.
"Cada página tiene su propio título, descripción, canonical y Schema.org. Google lo ve todo."
Schema.org
Product
Precio, stock y valoraciones en cada ficha. Google puede mostrar rich snippets directamente en los resultados de búsqueda.
Rich snippets en GoogleSchema.org
FAQPage
Preguntas y respuestas indexables. Google puede mostrarlas desplegables en el resultado, ocupando más espacio y atrayendo más clicks.
Resultados expandiblesSchema.org
WebSite + SearchAction
Permite que Google muestre un buscador directo en el resultado de la página de inicio.
Sitelinks search boxSchema.org
Article
Fecha de publicación, autor y publisher en cada artículo del blog para que Google entienda el contenido editorial.
Contenido editorialSchema.org
FoodEstablishment
Empresa con coordenadas GPS, horarios y contacto para aparecer en Google Maps y Knowledge Panel.
Google Maps · Knowledge PanelSchema.org
CollectionPage · AboutPage · Blog
Catálogo, sobre nosotros y blog tipados correctamente para que Google entienda la estructura del sitio.
Estructura semántica| Página | Título único | Schema.org |
|---|---|---|
| Inicio | Sí + meta description + Open Graph + Twitter Card + canonical | WebSite + SearchAction |
| Catálogo | Cambia dinámicamente por categoría activa | CollectionPage |
| Ficha de producto | Nombre del producto como título | Product · precio · stock · valoraciones |
| Artículo de blog | Título del artículo | Article · autor · fecha |
| FAQ | Sí | FAQPage · indexable |
| Sobre nosotros | Sí | AboutPage |
| Resto de páginas | Título + description + robots + canonical únicos | Tipado semántico |
Decisiones de diseño
Paleta de tierra. Tipografía editorial.
Cinco tokens cromáticos con identidad propia. La combinación tipográfica más usada en marcas premium de alimentación: Cormorant Garamond para display + Jost para UI.
Navbar transparente que se vuelve sólido al hacer scroll, menú hamburguesa animado en móvil, filtros en drawer desde abajo. Cada detalle pensado para que el usuario se quede.
Lo que demuestra
Qué ve cada perfil
Cliente no técnico
Una web bonita, cuidada y que transmite confianza para comprar. Parece real porque lo es.
Startup o empresa tech
React con arquitectura limpia, Context API, código escalable y SEO propio sin dependencias. Listo para conectar a Supabase o cualquier API.
Director creativo
Criterio tipográfico, paleta con intención, espaciado editorial y jerarquía visual consistente en todas las páginas.
Ecommerce en producción
Explóralo
en vivo
Dehesa Real desplegado en Vercel — navega el catálogo, añade al carrito, prueba el checkout y crea una cuenta.
¿Te ha gustado este proyecto?