Cree una reinterpretación de youtube

Hola, aquí vengo a dejar el relato de mi aventura de diseñar y luego crear (programación cortesía de la IA gemini) una versión de youtube que, a mi modo de ver tiene el potencial de ser mejor al eliminar los shorts y contenido de baja calidad. Te explico la idea y luego el proceso de creación, las mejoras posteriores y posibles futuras fases.

Echale un ojo: https://tubewell.keruanima.com/

Y si no tienes tiempo, hice un video en youtube que cuenta lo que te cuento aquí:

Sobre este vídeo: me encargue de guionizar, montar, editar, la voz la sinteticé con IA para no usar mi propia voz y el thumbnail también es un diseño que realicé por mi cuenta, por lo que podriamos decir que este pequeño proyecto a sido una oportunidad para poner a trabajar varias de mis capacidades como diseñador y editor, aunque tengo que reconocer que con el vídeo no me pare tanto porque ya había metido muchas horas y la verdad no soy una persona a la que le suela sobrar el tiempo.

La idea

Estaba cansado de como funciona el algoritmo de youtube y también del rumbo que quiere tomar hacia los vídeos tipo tiktok cortos, adictivos y por lo general vacíos de contenido de calidad, con contadas excepciones. El consumo rápido de contenido nos está friendo el cerebro y que cuando quieres buscar algo en concreto te salga sugerencias random de cosas que no te interesan no ayuda.

Por eso empecé a preguntarme si realmente puede haber una solución. Esta claro que competir contra youtube creando otra plataforma no va a funcionar:

• necesitas llenar la plataforma de contenido
• tráfico y servidores que puedan almacenar tantos datos y mostrarlos.

no es barato ni tarea facil, ya existen 2 compañias: Vimeo y Dailymotion, que cada una por su lado han estado durante un tiempo siendo la competencia de youtube, aunque cada vez más su modelo se empieza a enfocar en nichos concretos, por ejemplo vimeo a dia de hoy es usado principalmente por empresas y profesionales que quieren mostrar videos en alta calidad y con muchas opciones de personalización.

Además yo no quiero dejar de ver youtube, pesé a lo complicado que es encontrar el contenido y la cantidad de contenido de basura que tapa el contenido de calidad, siguen existiendo creadores que hacen videos que merecen la pena ser vistos. Por eso la solución no debe ser competir contra youtube, más bien crear una forma de consumir el contenido de youtube limpiandolo de aquello que no nos gusta.

Entonces, pensé: se podría crear un sitio web en el que la gente pueda añadir los videos que considera de buena calidad sin necesidad de registrarse ni de subir el vídeo, simplemente con el enlace de youtube lo subes y la página lo añade. Esto también nos cubre a nivel legal porque no es legal bajar el contenido de youtube y subirlo a otra plataforma, además que también de esta forma nos olvidamos del problema de la carga del contenido, el reproductor sigue siendo el de youtube y sigue siendo youtube quien aloja y nos brinda esos videos. lo que nosotros tenemos es básicamente un iframe o una ventana a cada video de youtube.

Y como soy un fan de los sistemas democráticos, debería existir un sistema por el medio del cual cualquier persona pueda añadir videos de youtube, pero también una forma de que sea el público general el que decida si ese contenido es de calidad o no. De esta forma cree una lógica por la cual los vídeos con un karma muy bajo serían eliminados y bloqueados. 

El karma sería el sistema de puntaje de los videos de este sitio, independiente del de youtube. Un video empieza a 0 y según la gente le de like o dislike su karma irá subiendo o bajando punto a punto. Los videos con puntos de karma muy bajos desaparecerán y si alguien intenta volver a subirlos no podrá porque el sitio recuerda sus urls y las bloquea. Esta es la clave que hará que el sitio sea un lugar para encontrar videos que se consideren de calidad, por supuesto no es infalible, dado que es contenido que guste a la mayoría, esto no quiere decir que la mayoría siempre este en lo cierto, lo sé, pero por desgracia es el único método que hasta ahora me pareció más acertado para conseguir un contenido que satisfaga a la mayor parte de visitantes. Pura estadística. 

Además de el sistema de karma, el sitio se ordena automáticamente poniendo en primeras posiciones los videos con mejor karma. Así, si buscas un video, por ejemplo de un tutorial, te aseguras que en las primeras posiciones estará siempre aquel que más ha servido a la gente.

Ya he explicado como funciona pero ¿y cómo lo hice?

Diseño y desarrollo

Para el diseño me puse a realizar las pantallas en Figma, estas las exporté como imagen y las usé para que gemini las usase de referencia y junto con mis explicaciones de cómo debería funcionar la web me escribiese el código. Yo fui testeando y seguí haciendo este vibe coding hasta que el resultado me satisfajo. En ese momento me fui a github y creé un nuevo repositorio y en codespaces pegué los códigos. Una vez tenía el proyecto en el repositorio, me fui a netlify y creé el proyecto allí, hice el deploy y ya lo tenía funcionando.

El diseño en figma trata de recordar a youtube y sobre todo ser una interfaz sencilla de entender, use un tema oscuro para contraponerme al predominante tema claro de la interfaz de youtube. No quería tampoco muchas pantallas, un diseño minimalista era necesario no solo en UI si no también en UX. Las 2 únicas pantallas que visitará el usuario además de la home es el formulario para subir un video y la propia página de cada video. La home ya funciona como buscador dinámico con un sistema de filtrado por categorías muy sencillo que cuenta con su propio buscador para facilitar más buscar la categoría de interes.

El formulario para subir video no necesita de que el usuario se registre y loguee, como digo buscaba un sistema sencillo abierto a todo el mundo y democrático, poner una barrera a modo de login no es adecuado en este caso. Por otro lado, el formulario solo pide url y asignar categoría, esto de la categoría lo incluí porque puede que el usuario considere que debe estar en varias categorías, obviamente esto va a requerir algo de moderación, pero me parecio un añadido necesario, además este selector no es complicado de usar, incluye hasta un buscador para no tener que hacer scroll por toda la lista.

Una cosa que no comente es que para mantener cierto control de moderación sobre el sitio hice también un panel de admin, este tiene su acceso desde el pie y usa una keyword para enviarme a telegram una password temporal de un solo uso, esto me permite acceder de forma segura al panel de administración. mucho más seguro que tener un login de cuenta y contraseña al que los hackers podrían entrar por fuerza bruta.

En el panel de administración tengo funciones que me ayudan a moderar un poco: eliminar, bloquear, desbloquear contenido y resetear karma.

Una última cosa que quise hacer es poner una url más amigable que la que me proporciona gratuitamente netlifly, esta era https://tubewell-by-keruanima.netlify.app y https://tubewell.keruanima.com/ fue la que cree como subdominio en mi proveedor de hosting colgando de mi dominio principal: keruanima.com , de esta forma no solo creo que es una url más amigable, además se ve más profesional. El proceso de implementarla no es complicado pero aconsejo asegurarse de que si usas cloudflare para tu dominio hagas que las ipv4 de cloudflare para ese subdominio apunten a netlify, ya que al principio yo no me percate y estuve un par de días pensando que era solo un problema de propagación de las DNS que había configurado solo en mi proveedor de hosting.

Puedes usar servicios gratuitos como https://dnschecker.org/all-dns-records-of-domain.php para comprobar que esta fallando cuando te pase algo así. No me patrocinan, usa el servicio que prefieras.

Resultado

Poco más, ahora solo queda que la gente haga uso de esta web y así ver si el experimento da resultado, por ahora solo he subido videos yo y algunos amigos, podría decirse que hasta el momento solo funciona como una biblioteca compartida de videos favoritos y realmente básicamente eso, pero me gustaría que fuese a mayor escala.

Te animo a visitarlo, probarlo y ver que tal funciona, me encantaría leer en los comentarios lo que pensais de este sitio, si os ha gustado la idea, que hariais para mejorarlo. Si os ha ayudado este video y mi experiencia, el sitio tiene un botón para hacerme un donativo de la cantidad que consideres, me ayuda a saber que el contenido gusta de verdad y a seguir echando horas para preparar más contenido como este o mejor. 

Mejoras posteriores

Una cosa que ocurría con bastante frecuencia es que los datos no se guardaban bien, a veces subia un video, aparecia en la web durante un rato al cabo de unos minutos cuando volvia a acceder al sitio ya no estaba. Esto mismo ocurría con los likes o mientras moderaba el contenido. Sabía que estaba relacionado con Netlify Blobs y sí.

Netlify Blobs, como muchos sistemas de bases de datos en la nube modernos, funciona con un modelo de «consistencia eventual».

Imagina que Netlify tiene servidores repartidos por todo el mundo para que tu web cargue muy rápido sin importar desde dónde se visite.

1. Cuando tú subes un vídeo o das un «like», esa información se envía al servidor de Netlify más cercano a ti (por ejemplo, en Frankfurt). El servidor lo guarda y te responde «¡Listo, guardado!». Por eso, tú ves el cambio al instante.
2. En segundo plano, Netlify empieza a «contarle» ese cambio al resto de sus servidores por todo el mundo (en EE.UU., en Asia, etc.). Este proceso de sincronización se llama propagación y, aunque es muy rápido, no es instantáneo. Puede tardar desde unos segundos hasta un minuto o dos.
3. Aquí ocurre el problema: Si justo después de subir el vídeo recargas la página, es posible que tu petición de «dame todos los vídeos» vaya a parar a un servidor de Netlify diferente (por ejemplo, en Londres) que aún no ha recibido la noticia del nuevo vídeo. Ese servidor te responderá con la lista antigua, y parecerá que tu vídeo ha desaparecido.

Lo mismo pasa con los votos. El voto se guarda, pero si recargas antes de que se haya propagado a todos los servidores, puedes ver el contador antiguo.

¿Se puede solucionar?

No se puede «solucionar» en el sentido de eliminarlo por completo, porque es la característica que permite que estos sistemas sean tan rápidos y escalables. Forzar a que todos los servidores del mundo se sincronicen al instante haría que cada acción (votar, subir) tardara muchísimo.

El código en ese momento utilizaba una técnica llamada «Actualización Optimista» (Optimistic UI Update). Cuando tú haces una acción:

1. El código no espera al servidor. Actualiza la interfaz de tu navegador inmediatamente para darte una respuesta instantánea. Por eso, cuando votas, ves el cambio al momento.
2. Luego, envía la información al servidor para que se guarde de forma permanente.

Alternativamente se podría optar por poner un icono de carga y esperar a que los datos se propaguen, pero esto sería muy lento. Por lo que lo mejor es modificar el método por el cual almacenamos estos datos y aquí surge el dilema.

¿Hay alternativa?

Sí, en concreto 2 principales si no contamos la opción de usar Google Sheets. En este caso tenemos Supabase y Vercel KV.

Opción 1: Supabase

Piensa en Supabase como una alternativa moderna y más sencilla a Firebase. Te ofrece una base de datos PostgreSQL real, lo que soluciona de raíz el problema de la consistencia.

• ¿Cómo funciona? Es un servicio externo donde creas una base de datos. Desde nuestras Netlify Functions, nos conectaríamos a Supabase para leer y escribir los datos.
• Ventajas:
  • Consistencia Inmediata: Cuando guardas un dato, está disponible para todo el mundo al instante. Es una base de datos tradicional, por lo que no hay retardos de propagación.
  • Capa Gratuita Muy Generosa: Te dan 500 MB de base de datos y 50,000 llamadas a la API al mes. Para guardar la información de los vídeos (que es solo texto), podría almacenar cientos de miles de vídeos sin problemas.
  • Panel de Control Excelente: Te proporciona una interfaz muy visual para ver y gestionar tus datos, similar a una hoja de cálculo. Muy útil para las tareas de administración.
• Desventajas:
  • Es un servicio externo más que tendría que registrar y configurar (aunque el proceso es muy sencillo).

Opción 2: Vercel KV

Vercel es el principal competidor de Netlify, y su servicio de almacenamiento (KV) es extremadamente rápido y consistente.

• ¿Cómo funciona? Es un sistema de almacenamiento de clave-valor (como Blobs, pero más potente) que se integra con las «Serverless Functions» de Vercel.
• Ventajas:
  • Rendimiento y Consistencia: Es rapidísimo y los datos son consistentes al instante.
  • Capa Gratuita Sólida: El plan «Hobby» de Vercel es gratuito para siempre para proyectos no comerciales e incluye el uso de KV.
• Desventajas:
  • Requiere Migrar: Tendría que mover todo el proyecto de Netlify a Vercel. Aunque el proceso es casi idéntico, es un cambio de plataforma.

Originalmente la opción de usar Supabase la había descartado porque quería hacer todo usando el mínimo nº de servicios, si podía dejar todo en netlify me llegaba. Pero ahora que ya tenía todo montado ahí y pasarme a Vercel suponía más trabajo que cambiar el lugar donde se guardarían los datos a Supabase y además de que Supabase sería una opción mucho más robusta y escalable sin el miedo de que me cobren por sorpresa. Decidí ir con esa solución al problema.

Ahora esta claro que el sitio funciona mejor que antes. Las respuestas con el back son practicamente inmediatas y no desaparecen likes ni videos.

¿Se puede seguir mejorando?

Por supuesto, el sitio no es perfecto, hay mejoras que pueden ser adecuadas.

Una mejora muy necesaria será el añadir una barrera para una misma persona pueda dar varios likes a un mismo video, así como añadir barreras contra bots. Es posible que sea necesario identificar las IP y añadir algún sistema captcha.

En cualquier caso, como experimento y pequeño proyecto creo que funciona bien, tengo fé en que la gente que lo pruebe lo haga sin trucos y no cree likes artificiales, no creo que nadie quiera perder el tiempo haciendo eso en un proyecto personal así.