Prompts con lovable.dev para generar una guía de viaje -- Esperando a Eskainet

Dani

Crea una guía de viaje sobre Valladolid que importe un archivo JSON con restaurantes, lugares (incluyendo todos los enlaces y coordenadas). Para cada ítem, muestra título y descripcion y lo que es, y añade botones para marcarlo como “interesado” o “visitado”. Guarda estos estados en el almacenamiento local del navegador para que persistan entre sesiones. (no utilices las imágenes del json)

{
  "Restaurantes": [
    {
      "nombre": "Los Zagales",
      "descripcion": "Restaurante innovador y premiado, famoso por sus tapas creativas como 'Obama en la Casa Blanca' y por ganar múltiples ediciones del Concurso Nacional de Tapas.",
      "enlace": "https://www.loszagales.com",
      "coordenadas": { "lat": 41.6555, "lon": -4.7280 }
    },
    {
      "nombre": "El Bar",
      "descripcion": "Bar-restaurante de tradición, conocido por su cocina casera, sus guisos y una amplia bodega que destaca etiquetas de la Ribera del Duero.",
      "enlace": "https://www.elbarvalladolid.com",
      "coordenadas": { "lat": 41.6550, "lon": -4.7270 }
    },
    {
      "nombre": "Jero",
      "descripcion": "Bar con ambiente acogedor que ofrece una gran variedad de tapas elaboradas y pinchos a precios razonables, ideal para compartir.",
      "enlace": "https://www.jerovalladolid.com",
      "coordenadas": { "lat": 41.6560, "lon": -4.7290 }
    },
    {
      "nombre": "La Tasquita",
      "descripcion": "Bar tradicional que sirve tostas y bocaditos clásicos, con un servicio atento y un ambiente auténtico de la ciudad.",
      "enlace": "https://www.latasquita.com",
      "coordenadas": { "lat": 41.6565, "lon": -4.7285 }
    },
    {
      "nombre": "Trigo",
      "descripcion": "Restaurante de alta cocina que mantiene su estrella Michelin, destacando por su propuesta moderna y técnica refinada.",
      "enlace": "https://www.restaurantetrigo.com",
      "coordenadas": { "lat": 41.6558, "lon": -4.7220 }
    },
    {
      "nombre": "Alquimia",
      "descripcion": "Restaurante creativo en el centro de Valladolid, reconocido por su innovadora carta y por mantener su prestigio estelar.",
      "enlace": "https://www.alquimiavalladolid.com",
      "coordenadas": { "lat": 41.6562, "lon": -4.7235 }
    },
    {
      "nombre": "La Botica",
      "descripcion": "Restaurante que fusiona tradición y modernidad, destacando platos elaborados con productos locales en un ambiente rústico.",
      "enlace": "https://www.laboticadematapozuelos.com",
      "coordenadas": { "lat": 41.7500, "lon": -4.8000 }
    },
    {
      "nombre": "Refectorio",
      "descripcion": "Ubicado en un antiguo monasterio, este restaurante ofrece una experiencia gastronómica que combina historia y modernidad.",
      "enlace": "https://www.ledomaine.es/en/gastronomia",
      "coordenadas": { "lat": 41.6000, "lon": -4.9000 }
    },
    {
      "nombre": "Ambivium",
      "descripcion": "Restaurante situado en la provincia, que destaca por su cocina creativa e innovadora en un entorno vinícola de primer nivel.",
      "enlace": "https://www.ambivium.com",
      "coordenadas": { "lat": 41.5340, "lon": -4.7840 }
    },
    {
      "nombre": "Campogrande",
      "descripcion": "Local de cocina casera y tradicional, ideal para disfrutar de platos contundentes y de la rica gastronomía de Castilla y León.",
      "enlace": "https://www.campograndevalladolid.com",
      "coordenadas": { "lat": 41.6565, "lon": -4.7280 }
    },
    {
      "nombre": "Mesa Cero Del Val",
      "descripcion": "Restaurante de cocina moderna con propuestas elaboradas y presentación cuidada, perfecto para paladares exigentes.",
      "enlace": "https://www.mesacero.com",
      "coordenadas": { "lat": 41.6568, "lon": -4.7275 }
    },
    {
      "nombre": "El Consejero del Rey",
      "descripcion": "Establecimiento para ocasiones especiales, donde la creatividad en platos de carne y marisco se combina con una presentación de alta calidad.",
      "enlace": "https://www.elconsejerodelrey.com",
      "coordenadas": { "lat": 41.6560, "lon": -4.7270 }
    }
  ],
  "Sitios para visitar en la ciudad": [
    {
      "nombre": "Plaza Mayor",
      "descripcion": "Plaza histórica considerada la más antigua de España, rodeada de soportales y monumentos como el monumento al conde Ansúrez.",
      "imagen": "https://upload.wikimedia.org/wikipedia/commons/a/aa/Plaza_Mayor_Valladolid.jpg",
      "coordenadas": { "lat": 41.6553, "lon": -4.7288 }
    },
    {
      "nombre": "Catedral de Valladolid",
      "descripcion": "Imponente templo de estilo herreriano y barroco, conocido como 'La Inconclusa', que destaca por su torre y su rica historia.",
      "imagen": "https://upload.wikimedia.org/wikipedia/commons/0/0e/Catedral_Valladolid.jpg",
      "coordenadas": { "lat": 41.6550, "lon": -4.7233 }
    },
    {
      "nombre": "Museo Nacional de Escultura",
      "descripcion": "Ubicado en el antiguo Colegio de San Gregorio, alberga una de las colecciones de esculturas más importantes de España.",
      "imagen": "https://upload.wikimedia.org/wikipedia/commons/2/27/Museo_Nacional_Escultura_Valladolid.jpg",
      "coordenadas": { "lat": 41.6560, "lon": -4.7240 }
    },
    {
      "nombre": "Campo Grande",
      "descripcion": "Gran parque urbano con senderos, zonas de descanso, estanques y pavos reales; el pulmón verde de Valladolid.",
      "imagen": "https://upload.wikimedia.org/wikipedia/commons/3/36/Campo_Grande_Valladolid.jpg",
      "coordenadas": { "lat": 41.6489, "lon": -4.7353 }
    }
  ],
  "Sitios cercanos": [
    {
      "nombre": "Simancas",
      "descripcion": "Pueblo histórico donde se encuentra el Archivo de Simancas, Patrimonio de la Humanidad, ideal para los amantes de la historia.",
      "imagen": "https://upload.wikimedia.org/wikipedia/commons/5/56/Archivo_de_Simancas.jpg",
      "coordenadas": { "lat": 41.7202, "lon": -4.6802 }
    },
    {
      "nombre": "Peñafiel",
      "descripcion": "Encantador pueblo vinícola en la Ribera del Duero, con un castillo emblemático y diversas bodegas para enoturismo.",
      "imagen": "https://upload.wikimedia.org/wikipedia/commons/9/94/Castillo_de_Pe%C3%B1afiel.jpg",
      "coordenadas": { "lat": 41.5333, "lon": -4.7833 }
    },
    {
      "nombre": "Tordesillas",
      "descripcion": "Ciudad histórica célebre por el Tratado de Tordesillas y su patrimonio, perfecta para una excursión de un día.",
      "imagen": "https://upload.wikimedia.org/wikipedia/commons/7/74/Tordesillas_plaza.jpg",
      "coordenadas": { "lat": 41.6195, "lon": -4.8667 }
    }
  ],
  "Lugares de esparcimiento en la ciudad": [
    {
      "nombre": "Vallsur",
      "descripcion": "Centro comercial moderno con tiendas, cine y restaurantes, ideal para una jornada de ocio y compras.",
      "imagen": "https://upload.wikimedia.org/wikipedia/commons/3/3f/Vallsur_Valladolid.jpg",
      "coordenadas": { "lat": 41.6365, "lon": -4.7045 }
    },
    {
      "nombre": "Parque del Campo Grande",
      "descripcion": "Espacio natural en el centro de la ciudad perfecto para pasear, hacer ejercicio y disfrutar de áreas recreativas.",
      "imagen": "https://upload.wikimedia.org/wikipedia/commons/3/36/Campo_Grande_Valladolid.jpg",
      "coordenadas": { "lat": 41.6489, "lon": -4.7353 }
    },
    {
      "nombre": "Gastrobar Sabores",
      "descripcion": "Bar-restaurante con diversos ambientes, ideal para disfrutar de buena comida, copas y un ambiente relajado.",
      "imagen": "https://upload.wikimedia.org/wikipedia/commons/8/80/Gastrobar_Sabores_Valladolid.jpg",
      "coordenadas": { "lat": 41.6568, "lon": -4.7254 }
    }
  ],
  "Urls de imágenes": [
    "https://upload.wikimedia.org/wikipedia/commons/a/aa/Plaza_Mayor_Valladolid.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/0/0e/Catedral_Valladolid.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/2/27/Museo_Nacional_Escultura_Valladolid.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/3/36/Campo_Grande_Valladolid.jpg"
  ]
}

Lovable

20:45 on Mar 17, 2025

I'm going to create a beautiful travel guide for Valladolid that showcases the city's restaurants and attractions. Drawing inspiration from premium travel publications like Condé Nast Traveler and minimalist design principles, I'll create an elegant, intuitive interface that puts content first.

For this travel guide, I'll implement:

  • A clean, minimalist layout with plenty of white space
  • Smooth transitions and subtle animations between sections
  • Interactive cards for restaurants and attractions
  • "Interested" and "Visited" buttons for each location
  • Local storage integration to save user preferences
  • Responsive design that works beautifully on all devices

The design will feature:

  • A sophisticated color palette based on warm neutrals and subtle accents
  • Typography that balances readability and elegance
  • Subtle glass morphism effects for UI elements
  • Thoughtful micro-interactions and hover states

Let's build this beautiful Valladolid travel guide with a focus on elegance and usability.

Create Valladolid travel guideView code

Created a beautiful Valladolid travel guide with smooth animations, interactive cards, and local storage for saving preferences.

¿Qué sigue?

  • Refinar y personalizar: Ajusta el diseño, las animaciones y los diseños mediante indicaciones o ediciones visuales.
  • Dominar el prompting: Utiliza indicaciones claras, detalladas e iterativas para obtener mejores resultados.
  • Expandir con Backend: Conecta Supabase para añadir inicio de sesión, almacenar datos o funciones avanzadas de IA.
  • Sincronización con GitHub: Transfiere el código de tu proyecto a GitHub para una sincronización bidireccional de las ediciones.
  • Depurar con facilidad: Activa nuestro "modo chat" experimental para solucionar problemas rápidamente.
  • Añadir conocimiento del proyecto: Establece el contexto clave o las instrucciones personalizadas que quieras incluir en cada edición de este proyecto.

Dani

Añade un mapa navegable que utilice las coordenadas del JSON para ubicar marcadores. Al hacer clic en cada marcador, debe abrirse un modal o panel lateral con la vista de detalle del ítem, permitiendo marcarlo como “interesado” o “visitado” directamente desde el mapa.


Lovable

I'll add a navigable map that uses the JSON coordinates for markers, with a popup for each place. Let me implement this feature.

The map feature has been added with the ability to view place details when clicking markers. The implementation includes a full-screen map on desktop and a slide-up panel on mobile. Each marker is color-coded by category, and when clicked, opens a sidebar with detailed information where you can mark places as "interested" or "visited".


Dani

Quiero que en el mapa se vean los restaurantes y los lugares, así que vuelve a mostrar la sección lugares como antes y crea una nueva que sea mapa El mapa no se ve, aparece en blanco. Utiliza otra alternativa (leaflet)


Lovable

Veo que el mapa no se está visualizando correctamente debido a problemas con la API de Mapbox. Vamos a implementar un mapa utilizando Leaflet como alternativa y reorganizar la página de atracciones para mostrar tanto la sección de lugares como una nueva sección de mapa.

Se ha implementado un mapa interactivo utilizando Leaflet como alternativa a Mapbox. Ahora la página de atracciones tiene pestañas para cambiar entre la lista de lugares y el mapa interactivo, que muestra marcadores para todos los sitios (incluyendo restaurantes).

En la vista de mapa el panel lateral queda por debajo del mapa y no se ve En la vista por cards de los datos haz que cuandos e marquen como interesado o visitado queden en otros colores para que sea fácil identificarlo


Dani

En la home elimina el botón de "Descubrir lugares" y utiliza esta imagen para el fondo de la home

https://www.turismocastillayleon.com/cm/images?locale=es_ES&idMmedia=266435


Lovable

I'll update the home page to remove the "Descubrir lugares" button and change the background image to the one you provided.

Edit
Pub: 18 Mar 2025 23:56 UTC
Views: 69