Cómo construí un proyecto web profesional moderno como Franthopiclab

Cómo construí un proyecto web profesional moderno como https://franthropiclab.cat

Herramientas, decisiones y aprendizajes — Una guía para la comunidad

Este documento nace de un proyecto real: una web de servicios digitales con blog, sistema de reservas, emails automáticos e integración con Google Calendar. Todo construido de forma independiente, sin agencia, con herramientas modernas y asequibles. Mi intención es compartir las decisiones que tomé para que puedas replicarlas, adaptarlas o mejorarlas.

1. El punto de partida: ¿qué necesita un proyecto así?

Antes de elegir ninguna herramienta, es útil pensar en las capas funcionales que necesita el proyecto:

- Presencia y contenido — una web rápida, bien posicionada, con blog

- Captación — formulario de contacto, sistema de reservas online

- Comunicación — emails automáticos cuando alguien reserva o contacta

- Operaciones — calendario propio, recordatorios, gestión de citas

- Medios — imágenes y vídeos servidos de forma rápida y barata

- Datos — saber qué funciona, qué no, y cómo te encuentra Google

Con ese mapa mental, cada herramienta tiene un lugar claro.

2. La web: cómo está construida

La web está hecha con herramientas profesionales que permiten que cargue rápido, sea fácil de mantener y se pueda actualizar sin empezar de cero cada vez.

Para el diseño visual, se usa un sistema que permite construir interfaces bonitas y consistentes sin necesidad de escribir hojas de estilo desde cero. Los colores, fuentes y espaciados se definen una sola vez y se aplican en toda la web de forma uniforme.

Las animaciones y transiciones se consiguen con una herramienta específica para eso — hacen que la web se sienta fluida y moderna sin añadir demasiado peso.

A tener en cuenta: Define los colores, tipografías y estilo visual antes de empezar a construir. Cambiarlos a mitad del proyecto cuesta el doble.

3. El blog: los artículos en la nube

Para un blog con varios artículos, en dos idiomas y con publicación programada, lo más práctico es guardar el contenido en una base de datos en la nube, no en archivos locales.

Supabase es la herramienta que elegí para esto. Es gratuita hasta cierto volumen y permite:

- Guardar cada artículo con su título, texto, imagen de portada y resumen, en catalán y en español

- Programar cuándo se publica cada artículo (se publica solo, sin intervención)

- Controlar quién puede ver qué: el público general solo ve lo publicado; el resto está protegido

A tener en cuenta: Configura siempre los permisos de acceso desde el primer día. Define qué puede ver un visitante anónimo y qué requiere estar identificado. Un descuido aquí puede dejar datos a la vista de quien no debe.

El blog está automatizado

Además de la base de datos, el blog funciona con una aplicación de gestión propia construida específicamente para este proyecto. No es un gestor de contenidos genérico — es una herramienta a medida que automatiza todo el flujo editorial:

- Generación de artículos completos en los dos idiomas

- Búsqueda y selección automática de imagen de portada

- Programación de publicación con fecha y hora exactas

- Publicación automática sin intervención manual

El resultado: un blog que se alimenta solo, con contenido relevante y en dos idiomas, sin dedicar horas a escribir y formatear.

¿Te interesa saber cómo está construida esta aplicación? Si quieres que escriba un artículo explicando cómo funciona el sistema de automatización del blog — desde la generación de contenido hasta la publicación programada — hazme saber tu interés y lo preparo.

4. Las reservas: una herramienta visual y sencilla

Para gestionar las citas, no hace falta un sistema complejo ni caro. Airtable funciona como una hoja de cálculo avanzada en la nube: puedes ver y gestionar las reservas desde una interfaz visual muy intuitiva, sin tocar nada técnico.

Cada reserva tiene nombre, email, teléfono, fecha, hora, motivo y un estado que cambia según lo que pase: pendiente, completada, cancelada...

Cuando alguien cancela, no se borra el registro — se marca como cancelado. Así siempre tienes el historial completo.

A tener en cuenta: La clave de acceso a Airtable nunca debe quedar expuesta al público. Toda comunicación con Airtable se hace a través de un intermediario en el servidor, con un límite de peticiones para evitar abusos.

5. Las imágenes y vídeos: servidos desde una red global

Guardar imágenes y vídeos en el mismo servidor que la web la hace más lenta y más cara. La solución es almacenar esos archivos en un servicio especializado que los distribuye desde servidores repartidos por todo el mundo, para que carguen rápido estés donde estés.

El servicio que uso es Cloudflare R2, que tiene una ventaja clave: no cobra por las descargas. Para proyectos con presupuesto ajustado, esto marca la diferencia.

Los archivos se organizan en carpetas según su función:

- Una carpeta para las portadas del blog

- Una carpeta para la foto y el vídeo principal del sitio

- Una carpeta para los vídeos de proyectos

- Una carpeta reservada para futuras plantillas

Las imágenes se convierten siempre a un formato más ligero antes de subirlas — pesan mucho menos que los formatos habituales con la misma calidad visual. Los vídeos también se optimizan para web.

A tener en cuenta: El almacenamiento está configurado para que cualquiera pueda ver los archivos pero nadie pueda modificarlos. Las claves de acceso para subir o borrar archivos son secretas y se gestionan desde el servidor.

6. Los emails: automáticos y sin intervención

Cuando alguien hace una reserva, el sistema envía dos emails de forma automática:

1. Al cliente — con todos los detalles de la cita, el enlace para la videollamada y un botón para añadir el evento a su Google Calendar

2. Al propietario — con los datos completos del cliente y el mismo enlace

El envío se hace a través de Gmail con una contraseña de aplicación especial (distinta de la contraseña personal, más segura). Es una solución gratuita y suficiente para un volumen bajo de emails.

Lo importante: si el email fallara por algún motivo, la reserva ya está guardada. El email nunca bloquea ni retrasa la confirmación.

A tener en cuenta: Toda la información que llega de fuera (nombre, email, mensaje) se valida y limpia antes de incluirse en el email, para evitar que alguien pueda manipular el contenido o el sistema.

7. Google Calendar: el evento se crea solo

Cuando alguien hace una reserva, el sistema crea automáticamente un evento en el Google Calendar del profesional. Ese evento incluye:

- El nombre del cliente, su motivo de consulta y sus datos de contacto

- Un enlace de Google Meet generado automáticamente para la videollamada

- Dos recordatorios: uno 30 minutos antes de la cita y otro el día anterior a las 17:00

El enlace de videollamada aparece también en los emails de confirmación, tanto para el cliente como para el profesional.

Para que esto funcione, hay que conectar la aplicación con Google una sola vez. A partir de ahí, el acceso se renueva solo sin intervención.

A tener en cuenta: Las credenciales de acceso a Google se guardan en el servidor como configuración privada, nunca dentro del código. Si cambias la contraseña de Google, tendrás que reconectar la integración.

8. El hosting: dónde vive la web

La web está alojada en Vercel, una plataforma pensada específicamente para proyectos modernos como este. Sus ventajas principales:

- Cada vez que se sube un cambio, la web se actualiza sola en pocos minutos — sin subir archivos manualmente

- Toda la lógica del servidor se ejecuta en pequeñas funciones independientes que solo se activan cuando hacen falta — sin pagar por un servidor encendido las 24h

- Hay una tarea programada que se ejecuta cada noche a las 2:00 AM para marcar automáticamente como "no realizada" cualquier reserva pasada sin atender

- Certificado de seguridad incluido y renovado automáticamente

A tener en cuenta: Las actualizaciones deben hacerse siempre subiendo los cambios al repositorio de código y dejando que la plataforma haga el resto. Hacerlo de otra forma puede crear duplicados del proyecto.

9. El SEO: cómo te encuentra Google

El posicionamiento en buscadores no es algo que se añade al final; es una decisión que afecta a cómo está construida la web desde el primer día.

Lo más importante que he implementado:

- Información estructurada para Google — la web le dice a Google exactamente qué es (un servicio profesional), quién está detrás, de qué trata cada página y cómo está organizada. Google premia esto con mejor visibilidad.

- Un mapa del sitio que se actualiza solo — cada vez que se publica un artículo nuevo, el mapa que Google usa para rastrear el contenido se actualiza automáticamente en tiempo real.

- Soporte para dos idiomas — la web le indica a Google qué versión mostrar según el idioma del usuario.

- Velocidad y estabilidad visual — Google mide cómo de rápido carga una web y si los elementos se mueven mientras carga. Ambas cosas afectan directamente al posicionamiento.

- Notificación inmediata a buscadores — cuando se publica contenido nuevo, se envía un aviso automático para que los buscadores lo indexen cuanto antes.

A tener en cuenta: Una web construida como aplicación moderna puede tardar más en aparecer en Google si no se toman medidas específicas. La solución que implementé genera versiones estáticas de cada artículo para que Google las lea directamente, sin necesidad de ejecutar nada.

10. La analítica: saber qué funciona

Dos herramientas complementarias para entender el comportamiento de los usuarios:

- Google Analytics 4 — muestra de dónde vienen los visitantes, qué páginas ven, cuánto tiempo pasan y si acaban reservando o contactando.

- Vercel Analytics — mide la velocidad real de carga de la web tal como la experimentan los visitantes reales.

Ambas herramientas solo se activan si el usuario acepta las cookies al entrar en la web. Es un requisito legal en Europa, no una opción.

A tener en cuenta: El banner de cookies no es un detalle decorativo. Es un requisito legal. La decisión del usuario se guarda y se respeta en todas las visitas posteriores.

11. La sección de Plantillas — Trabajo en progreso

Una de las partes más interesantes del proyecto es una sección de plantillas web reutilizables. La idea: diseños profesionales para tipos de negocio específicos (clínicas, restaurantes, despachos...) que cualquiera pueda adaptar.

Actualmente hay una plantilla disponible y más en camino. Cuando tenga suficientes, las publicaré.

Resumen: las herramientas de un vistazo

Para qué — Herramienta — Por qué

Construcción de la web — React + Vite — Rápido, moderno, fácil de mantener

Diseño visual — Tailwind CSS — Consistente, sin CSS personalizado

Animaciones — Framer Motion — Fluido y declarativo

Blog (base de datos) — Supabase — Gratis, potente, fácil de gestionar

Automatización del blog — App dashboard propia — Genera, programa y publica sin intervención

Reservas — Airtable — Visual, flexible, sin código

Imágenes y vídeos — Cloudflare R2 — Red global, sin coste por descarga

Emails automáticos — Nodemailer + Gmail — Simple, gratuito para volúmenes bajos

Calendario y videollamadas — Google Calendar API — Integración directa con Meet

Hosting y servidor — Vercel — Actualizaciones automáticas

Analítica web — Google Analytics 4 — Estándar del sector

Rendimiento — Vercel Analytics — Métricas reales de velocidad

Posicionamiento en Google — Información estructurada — Visibilidad orgánica desde el día uno

Construir un proyecto propio de principio a fin — con todas sus capas, integraciones y detalles — es uno de los aprendizajes más completos que puede tener cualquier persona que quiera tener presencia digital seria. Y yo gracias a esta nuestra comunidad, y en especial a

@German Huertas

, yo lo he conseqguido. No hace falta que todo esté perfecto desde el inicio. Lo importante es tener una estructura clara, tomar decisiones conscientes y mejorar poco a poco.

Si este documento te ha sido útil o quieres contribuir al proyecto, ya sabes dónde encontrarme.

1 comment