Cómo crear un marketplace con no-code en un fin de semana

En Reboot llevamos mucho tiempo queriendo crear un proyecto completamente con no-code y este fin de semana hemos tenido la oportunidad de hacerlo con motivo del NoCode Fest organizado por la buena gente de SharingAway.

La premisa del evento era crear un producto digital sin programar durante un fin de semana y lanzarlo al mercado. Como nuestro objetivo era explorar los límites del no-code, nos propusimos crear el ejemplo más complejo que nos vino a la mente y decidimos construir un marketplace en un fin de semana.

Los marketplaces son productos complejos, nosotros lo sabemos de primera mano porque pasamos 6 meses construyendo uno en Cravy, por lo que nos parecía un producto genial para poner a prueba el no-code. ¿Lo habremos conseguido?

Para los que preferís el formato vídeo, os dejamos un enlace al Loom donde explico el proyecto.

El proyecto

Spotanoffice es un marketplace que te permite reservar espacios donde trabajar pagando una suscripción mensual. Ahora que el trabajo en remoto o trabajar desde casa ha venido para quedarse, ofrecer la posibilidad de escoger el lugar donde quieres trabajar nos parece una gran idea. Esto es en lo que están trabajando los chicos de Tribu que también nos sirvieron de inspiración para el proyecto.

El funcionamiento del marketplace es muy sencillo. De un lado tenemos los espacios y de otro los usuarios que reservan estos espacios. Los usuarios pueden explorar espacios en base a criterios como la localización, obtener información sobre sus características y hacer una reserva para la fecha deseada.

Como en todo marketplace, el sistema de valoraciones y reseñas es muy importante para generar confianza, por lo que también es necesario que un usuarios pueda votar y añadir una reseña sobre el espacio reservado.

Por último, como se trata de un proyecto ficticio, hemos decidido crear una narrativa original alrededor de él y ambientarlo en planetas conocidos de la ciencia ficción. Así que en Spotanoffice puedes reservar un coworking en Marte, surfear en el planeta Miller de Interestellar o llegar a la oficina en un Uber volador en Pandora.

El stack no-code del proyecto

Pero vayamos al grano: ¿cómo hemos conseguido desarrollar este producto en un fin de semana? Estas son las herramientas que hemos utilizado:

  • Webflow: creación de la web
  • Jetboost: buscador y filtro de espacios
  • Airtable: base de datos
  • Memberstack: autenticación de usuarios, cobro de suscripciones y creación de entorno autenticado y no autenticado
  • Integromat: creación de flujos y funciones para las distintas partes del marketplace: registro de usuario, creación de un espacio, sistema de reviews, etc...
  • Sendgrid: envío de mails

    • Vamos a ver con más detalle cómo están conectadas y cómo hemos utilizado cada una de ellas.

    Webflow

    Webflow ha sido nuestra herramienta para construir la web del marketplace. Desde el principio teníamos claro que queríamos crear un diseño único, por lo que descartamos otras soluciones más basadas en plantillas que te limitan a trabajar dentro de sus reglas.

    En este sentido, Webflow es una herramienta fantástica. Si tienes conocimientos de HTML y CSS puedes crear la web que tu quieras, el diseño no es ninguna limitación. Además, su interfaz visual te permite ser mucho más ágil cuando ajustamos nuestro layout. Modificar paddings y margins y ver cómo cambia en tiempo real en nuestra página es una auténtica gozada.

    Pero la característica que permite a Webflow crear webs realmente potentes son las CMS Collections. Con las Collections podemos replicar el modelo de datos que necesita nuestro proyecto, relacionarlas entre sí y consumirlas de forma dinámica desde las páginas.

    Webflow genera automáticamente una página por cada Collection desde la que podemos consumir su información o la de Collections relacionadas. En nuestro caso, tenemos una página de tipo Collection para los espacios y el perfil de usuario. Desde estas se consumen también Collections relacionadas como las reseñas, las habitaciones o las reservas.

    Sin embargo, para poder conseguir todo el potencial que te dan herramientas como Integromat, necesitamos que esta información no se genere en Webflow sino en Airtable, y se cree o actualice automáticamente en Webflow cada vez que modificamos nuestro Airtable.

    Airtable

    Airtable es nuestra base de datos donde creamos y actualizamos nuestros espacios, servicios o salas. Airtable replica el modelo de datos que previamente hemos creado en Webflow a través de las CMS Collections y, gracias a la magia de Integromat, permite crear y actualizar la información que mostraremos en Webflow de forma dinámica.

    Pero no es lo único que podemos hacer. El motivo de utilizar Airtable como base de datos es incorporarlo a flujos de producto determinados a través de Integromat. De esta forma, cuando un usuario hace la reserva de un espacio podríamos llegar a comprobar si este se encuentra disponible para las fechas seleccionadas conectando Airtable e Integromat.

    Memberstack

    La siguiente pieza de nuestro puzzle es Memberstack. Esta herramienta nos permite varias cosas, todas ellas importantes:

  • Autenticación. En primer lugar nos permite registrar y autenticar usuarios en nuestra plataforma. Integrando un pequeño script en Webflow podemos abrir un modal que nos permita comenzar a registrar usuarios, iniciar sesión o gestione el "Olvidar contraseña".
  • Creación de planes. La herramienta nos permite crear diferentes planes tanto gratuitos como de pago para nuestro proyecto. De este modo, podemos crear un plan de pago recurrente o un pago único en el momento de darse de alta en la plataforma y así poder comenzar a cobrar a nuestros usuarios.
  • Creación de entornos autenticados. Con Memberstack también podemos crear entornos autenticados a los que sólo se puede acceder con un plan determinado. Por ejemplo, en nuestro caso, el perfil de usuario donde se muestran las reservas solo es accesible una vez te has registrado. Esto se hace de forma muy sencilla a través de unos enlaces y atributos que te genera la propia plataforma.
  • Visualizar contenido solo para miembros. Por último, también podemos ocultar o mostrar contenidos de forma dinámica en función de si el usuario está registrado o tiene tiene un plan determinado.

    • Integromat

    Llegamos a la pieza clave de todo nuestro stack no-code. Integromat es el pegamento que une todas las herramientas. Las funciones de nuestro producto. Vendría a ser el backend en cualquier proyecto code.

    En Integromat podemos crear escenarios por cada flujo de producto que tengamos. Estos son algunos de los que hemos creado para Spotanoffice:

  • Booking system
  • User Sign Up
  • Rating System
  • Create Space
  • Update Space

    • Veamos con más detalle cómo funciona un flujo concreto como el de Booking system:

  • El envío de formulario de booking en Webflow inicia el flujo mediante un webhook.
  • Comprobamos que se trata de un formulario de tipo booking.
  • Comprobamos en Airtable que tanto el usuario que está realizando el booking como el espacio existen.
  • Creamos la reserva del espacio en Webflow.
  • Creamos la reserva del espacio en Airtable con el ID de Webflow.
  • Actualizamos el usuario de Webflow para que incluya la reserva del espacio.
  • Finalmente envíamos un mail de confirmación con Sendgrid al usuario.

    • Resultado

    Nos lo hemos pasado muy bien participando en esta primera edición del NoCode Fest y desde aquí dar la enhorabuena a todo el equipo de SharingAway por la magnífica organización. Resulta increíble cómo se pueden crear productos digitales complejos como un marketplace en tan sólo un fin de semana, un stack de herramientas reducido y haciendo los tradeoff correctos.

    El no-code es una herramienta muy poderosa para empoderar equipos y organizaciones completas, prototipando más rápido, más barato y lanzando al mercado en menos tiempo. Os invitamos a todos a descubrir Spotanoffice y dejarnos vuestro feedback sobre el proyecto.

  • Spotanoffice

    • Si os estáis planteando utilizar no-code para vuestro producto, desde Reboot os podemos ayudar a definir la estrategia, el stack de herramientas y realizar los tradeoff necesarios para poder lanzar un primer prototipo al mercado de forma ágil.