Video summary

Guía completa: Diseña y publica una App Web en Softr desde cero

Main summary

Key takeaways

Technology

Resumen (conceptos tecnológicos y guía de Softr con IA)

Objetivo del tutorial

Crear desde cero una app web en Softr para publicar/consultar “lugares” (por ejemplo: propiedades temporales o un directorio), incluyendo:

  • Home/listado (cards horizontales)
  • Página de detalles (modal “See location”)
  • Formulario para publicar nuevos items (“Publish location”) conectado a la base de datos
  • Header y Footer personalizables

Uso de IA para acelerar el proceso

  • Se recomienda empezar con una sesión de brainstorming usando un prompt (disponible en la descripción del video).
  • La IA genera ideas de categorías/temáticas, por ejemplo:
    • directorio de herramientas AI
    • bolsa de empleo
    • alquiler temporal
    • directorio de startups
  • Luego, la IA se usa para generar la estructura de la base de datos con datos tipo “40 data points / 40 filas” en CSV, con instrucciones para que los precios sean numéricos (sin “fluff”).
  • También se usa IA para generar contenido tipo AI blog dentro del layout (agregado como bloque).

Generación y preparación de la base de datos

  • Crear un archivo CSV con la estructura requerida (generado por IA).
  • En Softr:
    • crear un Database
    • usar Import from CSV para cargarlo
  • Ajustar campos en la base de datos:
    • Convertir price a Currency (por ejemplo COP / pesos colombianos)
    • Cambiar Description a Long text
    • Ajustar tipos de campos (por ejemplo: Short text, URL, selección/dropdown)
    • Reconfigurar nombres de tablas/iconos para que coincidan con el producto (por ejemplo: “databases of places”)

Construcción del front-end (páginas y componentes)

  • En la app/web:
    • eliminar bloques iniciales
    • reutilizar un layout base
  • Agregar/ajustar elementos:
    • Header: logo, nombre del sitio en el header, enlaces como Home
    • Footer:
      • remover categorías/redes no deseadas
      • incluir YouTube con link del canal
      • agregar texto “places.com”
    • Secciones del home: grilla “cover media” y contenido del listado

Conexión base de datos ↔ interfaz

  • En el bloque de contenido del home definir la fuente:
    • seleccionar Source Databases → hospitality → table
  • Revisar y mapear campos en “content” (íconos/imagen, títulos, etc.).
  • Problema con imágenes y solución:
    • La IA generó links de imágenes que no funcionaban.
    • Solución: copiar/pegar la columna “main photo images” desde la sección de datos (Ctrl+C y Ctrl+V) para reemplazar URLs por enlaces válidos.

Página de detalles y navegación

  • Crear una página “Place details” y armar el layout con campos del database:
    • main photo
    • Contact / reservation link
    • price, location, description
  • Configurar un botón desde el listado:
    • “Open detail page” con nombre tipo “See location”
    • mostrarlo como modal
    • ajustar el tamaño del modal
  • Validar en preview que el flujo funcione correctamente.

Personalización del listado (home)

  • Reemplazar texto del botón (por ejemplo: “search” → “buscar”).
  • Ajustar comportamiento de load more / see more:
    • cambiar visibilidad
    • decidir cuántos items se muestran inicialmente (en el video se prueba con 4–6 y se deja ese tamaño ajustado)

Formulario para publicar (conexión a la base de datos)

  • Editar la página “Publish location” con un formulario ligado a la tabla/dataset.
  • En settings, seleccionar explícitamente la table/database.
  • Conectar los campos del formulario con los del database:
    • Los campos con dientes amarillos (según el video) indican que no están conectados y se corrigen mapeando, por ejemplo:
      • Property title / Property name (obligatorio con *)
      • Email (o campo equivalente del ejemplo)
      • Description → Long text
      • Location → dropdown
      • Price → number
      • Main photo → URL/archivo (ajustar a tipo URL y usar “file”/placeholder)
      • WhatsApp booking link → URL (placeholder con ícono de teléfono/WhatsApp)
  • Configurar acción al enviar:
    • “After submission” mostrar/activar un mensaje (ajustar a un estado tipo “ready”)
    • cambiar texto del botón (no “submit”) y su icono (por ejemplo un ícono tipo avión)

Validación del resultado (demo)

Probar el flujo completo:

  1. Publicar un nuevo lugar (nombre, descripción/ubicación, precio, foto, booking link).
  2. Buscar en el home y verificar que aparece en el listado.
  3. Abrir la página/modal de detalles para confirmar los campos.

Fuentes / speakers principales

  • Creador del video / narrador del tutorial (no se identifica nombre en los subtítulos).
  • IA usada dentro del flujo: Gemini (para generar datos CSV y contenido inicial).

Original video