Tras mis andaduras con mis antiguas startups YoteConozco, Directo al Artista y StoryDevil, tenía ganas de montar un SaaS yo sólo, así aprovecho para ponerme al día con tecnologías que a veces, en mi día a día, no tengo oportunidad de usar.
Hace años que utilizo plataformas para monitorizar webs y que me ayudan a dos cosas: estar tranquilo sabiendo que mis páginas web y las de mis clientes están funcionando bien, y enterarme el primero cuando algo va mal para poder actuar.
Pensé que sería buena idea montar una utilidad online tipo SaaS, de pago por suscripción, para ofrecer este servicio a empresas y particulares que quieran tener controlados sus proyectos.
Mi idea es poder hacer un poco de «build in public», sin esconder nada, y explicar el proceso hasta el final. Suelo dar avances por Twitter, pero probaré a ir escribiendo pequeños artículos como este para documentar el proceso.
Bueno, volviendo al tema. Quiero que, como mínimo, UptimeHouse pueda ofrecerte:
- Un dashboard donde, con un simple vistazo, puedas ver si todo está bien o algo comienza a fallar.
- Envío de alertas si alguna web empieza a empeorar en rendimiento. Evitar la necesidad de ejecutar continuamente herramientas como PageSpeed o Lighthouse. Incluso cuando el sistema detecta que la web no responde, o tiene el certificado SSL a punto de caducar.
- Una página de estado personalizada para tus clientes. Que ellos mismos tengan acceso a un reporte semanal, mensual o anual sobre el estado y el rendimiento de su proyecto. Incluso que puedan recibirlo por correo.
Tabla de contenidos
El stack técnico
Empecé el diseño de la arquitectura técnica y la parte visual. Me decanté por un stack de desarrollo basado en Laravel, React y Tailwind CSS. Tecnologías maduras para proyectos en producción, y que me han gustado desde el primer día.
Junto a Laravel, estoy usando Jetstream que me ayuda a tener una buena base para un entorno SaaS con un Dashboard y funcionalidades de usuario básicas ya incluidas. Incluso la autenticación con doble factor. Utilizo React junto a Inertia JS, que conecta el frontend con el backend de Laravel.
Así de fácil puedo activar la doble autenticación y tener controladas las sesiones del navegador.
Para el entorno de desarrollo, estoy usando Docker, y VS Code como IDE principal. Empecé con PhpStorm, que siempre me ha gustado, pero se me estaba haciendo algo pesado de configurar, actualizar y mantener sobre todo en los distintos entornos con los que suelo trabajar (sobremesa Windows y portátil macOS).
Ahora mismo tengo gran parte del frontend terminado y media API. Pronto empezaré a desarrollar los servicios de backend. También he publicado la landing en UptimeHouse.com para posicionar y captar correos de usuarios interesados en probar. Por cierto, aunque en la página he puesto precios, no es algo que tenga todavía muy claro y he cambiado bastante de opinión en estas últimas semanas, así que para nada es definitivo. 😅
La interfaz
Mi idea es ofrecer un dashboard simple, claro y elegante, desde donde ver el estado de todas las webs, y de cada una, tener acceso a más detalles como las DNS del dominio, el certificado SSL, o datos de las Core Web Vitals y medir el rendimiento de tu web.
Para todo el frontend de los componentes he usado Tailwind CSS. Un menú horizontal superior para las secciones básicas (de momento son el dashboard y la gestión de websites), y uno lateral que permite navegar por los distintos apartados de cada site.
Los iconos pertenecen a la librería Heroicons, en SVG, y puestos en el template via código JSX, y para los gráficos he utilizado Chart.js. Me ha parecido muy decenet y fácil de usar.
Y para acabar, ahí van algunas capturas. Lógicamente y en este punto, sujetas a cambios constantes según me levante.
El dashboard principal
Con un resumen de los principales monitores de cada web.
La sección Uptime
Datos básicos de la web, indicadores de si está online o no y estadísticas de varios periodos y posibles caídas.
Estadísticas de rendimiento
Con la puntuación del 0 al 100% sobre el rendimiento de tu web así como las Core Web Vitals.
Certificado SSL
Información detallada sobre el certificado de tu web. Aquí podrás ver si tiene algún problema y si se ha renovado correctamente.
Información sobre el dominio
Podrás consultar los Nameservers y las DNS de tu dominio, así como la fecha de renovación o actualización del mismo.
