Proyectos - Pedro Sorrentino

Mostrar e interactuar con datos globales en un mapa.

Integré MapLibre GL JS mediante `react-map-gl` para renderizar un globo terráqueo 3D interactivo. Implementé escuchadores de eventos en capas específicas del mapa para detectar clics y hovers del usuario sobre los países, identifiqué el país usando las propiedades de las features y activé actualizaciones de estado en Nano Stores (`selectCountry`) para mostrar los canales relevantes. Añadí un tooltip al pasar el ratón para mejorar la experiencia de usuario.

Manejar y mostrar eficientemente miles de canales y países.

Utilicé TanStack Virtual (`useVirtualizer`) en el componente de lista de canales/países (`RightDrawerContent`) para renderizar solo los elementos visibles, mejorando significativamente el rendimiento. Obtuve todos los datos al inicio y usé Nano Stores con propiedades computadas y mapas precalculados (`$channelsByCountryMap`, `$channelsByCategoryMap`) para un filtrado rápido basado en las selecciones del usuario (país, categoría, término de búsqueda).

Integrar un reproductor de video robusto para diversos formatos de transmisión en vivo.

Empleé Video.js dentro de un componente React (`VideoPlayer`). Creé y destruí dinámicamente instancias del reproductor basándome en la URL de transmisión seleccionada desde Nano Stores. Configuré Video.js para streams HLS, responsividad y UI para directos. Implementé un manejo de errores completo (`player.on("error", ...)`) que muestra notificaciones toast amigables, intenta limpiar el reproductor y borra el estado para cerrar la interfaz del reproductor de forma elegante.

Gestionar un estado de interfaz complejo y la comunicación entre componentes.

Adopté Nano Stores para la gestión global del estado. Centralicé el estado de la aplicación, incluyendo datos de la API, selecciones de UI (país, categoría, canal), términos de búsqueda y visibilidad de los cajones laterales (drawers). Creé stores computadas para listas filtradas y acciones para gestionar las transiciones de estado de forma predecible, permitiendo una comunicación fluida entre el mapa, los cajones, la cabecera y el reproductor de video.

Manejar eficientemente grandes volúmenes de datos de la API de YouTube.

Implementé un sistema de caché de dos niveles utilizando Redis para datos de acceso frecuente y Turso (SQLite) como base de datos principal. Esto redujo las llamadas a la API de YouTube en aproximadamente un 60% y mejoró el tiempo de respuesta promedio de la aplicación en alrededor de un 45%. Además, utilicé Web Workers para procesar la ingesta de datos en segundo plano, evitando bloqueos de la interfaz de usuario.

Implementar una autenticación segura y escalable.

Integré Clerk para la gestión completa del ciclo de vida del usuario, incluyendo registro, inicio de sesión, recuperación de contraseña y autenticación de dos factores (2FA). Esto no solo mejoró la seguridad, sino que también me permitió concentrarme en la lógica de negocio principal de la aplicación, reduciendo el tiempo de desarrollo en aproximadamente un 20%.

Visualización de datos intuitiva y personalizable.

Desarrollé una serie de componentes de visualización personalizados utilizando Chart.js, integrados con los estilos de Shadcn/ui. Estos componentes permiten a los usuarios visualizar métricas clave como vistas, tiempo de visualización, suscriptores e interacción, con opciones de filtrado por período de tiempo y tipo de métrica. Se priorizó la claridad y la facilidad de interpretación de los datos.

Escalabilidad de la base de datos.

Al utilizar Turso, la base de datos se escala automáticamente para manejar el crecimiento de usuarios y datos, asegurando un rendimiento consistente incluso con un gran número de usuarios concurrentes.

Procesamiento de video del lado del cliente para reducir los costos del servidor y mejorar la privacidad.

Implementé `ffmpeg.wasm`, una versión de FFmpeg compilada a WebAssembly. Esto permite a los usuarios editar videos directamente en sus navegadores, sin necesidad de subir archivos a un servidor. Esta arquitectura del lado del cliente reduce significativamente los costos de infraestructura y mejora la privacidad del usuario, ya que los datos de video nunca salen del dispositivo del usuario.

Crear una interfaz de edición intuitiva de arrastrar y soltar.

Utilicé Konva.js, una biblioteca de JavaScript que proporciona una API de alto nivel para manipular elementos gráficos en un lienzo HTML5. Konva.js facilitó la implementación de funciones como arrastrar y soltar, redimensionar, rotar y aplicar estilos a imágenes, texto y pegatinas. Una experiencia de usuario fluida y receptiva fue una prioridad clave.

Compatibilidad entre navegadores y dispositivos, y optimización del rendimiento.

Realicé pruebas exhaustivas en una amplia gama de navegadores (Chrome, Firefox, Safari, Edge) y dispositivos (escritorio, tabletas, móviles) para garantizar una experiencia de usuario consistente. Optimicé el rendimiento de la aplicación utilizando técnicas como la carga diferida de imágenes, la minificación del código y la optimización de las operaciones de Konva.js para minimizar el uso de recursos del navegador.

Gestión del estado de la aplicación para la edición de medios.

Utilicé Zustand para una gestión eficiente y predecible del estado de la aplicación. Zustand permitió la gestión centralizada del estado de los elementos del editor (imágenes, texto, pegatinas, etc.), facilitando la implementación de funciones como deshacer/rehacer y la sincronización entre diferentes partes de la interfaz.

Implementar un sistema de retroalimentación en tiempo real.

Utilicé Server-Sent Events (SSE) para enviar notificaciones a los usuarios en tiempo real cuando reciben nuevos comentarios en sus sitios web. SSE proporciona una conexión persistente y unidireccional desde el servidor al cliente, lo que la hace ideal para este tipo de funcionalidad. Esta implementación mejoró la interactividad de la plataforma y fomentó una mayor participación del usuario.

Integrar IA para proporcionar sugerencias de mejora automatizadas y objetivas.

Integré la API de Grok AI, un modelo de lenguaje con capacidades de análisis web. Grok AI analiza el código HTML, CSS y JavaScript de los sitios web proporcionados por los usuarios y genera sugerencias de mejora en áreas como accesibilidad, rendimiento, SEO y diseño. Esta funcionalidad agrega un valor significativo a la plataforma, proporcionando comentarios instantáneos y objetivos.

Construcción de comunidad y moderación de contenido.

Implementé un sistema de registro e inicio de sesión de usuarios utilizando Clerk. Desarrollé un sistema de informes que permite a los usuarios marcar comentarios inapropiados o abusivos. Se establecieron reglas claras de la comunidad y se implementó un sistema de moderación para garantizar un entorno respetuoso y constructivo.

Diseño de la interfaz de usuario.

Utilicé Tailwind CSS para crear una interfaz de usuario limpia, moderna y receptiva. Se priorizó la simplicidad y la facilidad de uso, lo que permite a los usuarios enviar sus sitios web y recibir comentarios de forma rápida e intuitiva.

Recopilar y procesar eficientemente grandes cantidades de datos de dominios caducados.

Desarrollé un scraper personalizado en Node.js utilizando bibliotecas como `axios` para realizar solicitudes HTTP y `cheerio` para analizar el HTML de las fuentes de datos. Implementé técnicas responsables de web scraping, incluyendo el respeto de `robots.txt` y la implementación de retrasos para evitar sobrecargar los servidores de destino. Los datos recopilados se almacenan y procesan eficientemente utilizando Turso (SQLite).

Analizar la calidad y el valor de los dominios caducados.

Integré las API de Ahrefs y Majestic para obtener métricas SEO clave como Domain Rating (DR), URL Rating (UR), número de backlinks, dominios de referencia y tráfico orgánico estimado. Desarrollé un algoritmo de puntuación personalizado que combina estas métricas para evaluar el valor potencial de cada dominio caducado, lo que permite a los usuarios identificar rápidamente oportunidades prometedoras.

Presentar los resultados de una manera clara y útil, con opciones de filtrado y clasificación.

Diseñé una interfaz de usuario interactiva con Preact y Tailwind CSS. La interfaz permite a los usuarios buscar dominios caducados por palabra clave, filtrar por métricas SEO (DR, UR, backlinks, etc.) y ordenar los resultados según diferentes criterios. Se priorizó la velocidad y la facilidad de uso, lo que permite a los usuarios encontrar eficientemente los dominios que cumplen con sus requisitos.

Integración con la API de Amadeus para datos de vuelos en tiempo real.

Utilicé el SDK oficial de Amadeus para Node.js para interactuar con la API de Amadeus. Implementé la autenticación, el manejo de errores, la gestión de límites de la API (para evitar exceder las cuotas) y la conversión de los datos de la API a un formato consistente y fácil de usar dentro de la aplicación. Se implementaron mecanismos robustos de manejo de errores y reintentos para garantizar la fiabilidad de los datos.

Crear una interfaz de búsqueda de vuelos eficiente, receptiva y fácil de usar.

Utilicé Next.js para construir una interfaz de usuario rápida y optimizada para SEO. Aproveché las capacidades de Server-Side Rendering (SSR) y Static Site Generation (SSG) de Next.js para optimizar los tiempos de carga y la experiencia general del usuario. La interfaz se diseñó utilizando Tailwind CSS, con componentes personalizados para la selección de fechas (utilizando un selector de fechas), la selección de aeropuertos (con autocompletado), la selección de pasajeros y para mostrar los resultados de la búsqueda (con opciones de filtrado y clasificación).

Manejo seguro de pagos y cumplimiento de las regulaciones PCI DSS.

Integré Stripe como pasarela de pago. Stripe proporciona una API segura y fácil de usar para procesar pagos con tarjeta de crédito y débito. Utilicé Stripe Elements, componentes de interfaz de usuario preconstruidos, para garantizar el cumplimiento de PCI DSS (Payment Card Industry Data Security Standard), ya que los datos confidenciales de la tarjeta nunca llegan a los servidores de la aplicación. Implementé medidas de seguridad adicionales, incluyendo la validación de datos del lado del servidor y la protección contra ataques de Cross-Site Request Forgery (CSRF).