¡Bienvenidos al backstage de mi sitio web!

🚀

En esta página os contaré la tecnología que impulsa mi web y cómo todo este alboroto tecnológico funciona en la práctica. 😎

Nuestro héroe: Astro 🌟

Mi sitio web se construyó con el poderoso Astro, un todoterreno para crear páginas web. En pocas palabras, Astro se encarga de dar vida a mi sitio y de hacer que todo se vea espectacular. Es como el director de una película, ¡pero para páginas web! 🎬

Frontend: El rostro de la web 🖥️

El frontend es la parte visible de mi sitio web, donde interactúas directamente. Aquí es donde todo el diseño y la interactividad cobran vida.

Dependencias básicas del Frontend

• Astro: Nuestro protagonista principal, que hace posible todo esto.
• Axios: El encargado de comunicarme con otras páginas y servicios para traer información.
• Date-fns y Date-fns-tz: Mantienen el tiempo bajo control.
• Dotenv: Gestiona los secretos y configuraciones privadas.
• Markdown-it y Marked: Dan estilo a los textos.
• Node-fetch: El mensajero que trae información desde el servidor.
• React-icons: Diseñan los íconos que ves por aquí.
• Sanitize-html: Asegura que el contenido sea seguro y se vea bien.
• Tailwind CSS: El maestro del diseño, aportando elegancia y eficiencia al aspecto del sitio.

Scripts del Frontend

He creado unos “scripts” mágicos que automatizan muchas tareas:

• dev y start: Inician el servidor de desarrollo de Astro.
• build: Ejecuta scripts personalizados y construye el sitio.
• preview: Previsualiza la versión construida de la web.
• generate-pwa-assets: Genera los activos para Progressive Web App.
• execute-custom-scripts: Ejecuta una serie de scripts para integrar diferentes servicios como YouTube, Twitter, GitHub, entre otros.
• version: Verifica las dependencias desactualizadas.
• formato y lint: Aseguran que el código esté bien formateado y libre de errores.

Tecnologías clave del Frontend

• React y ReactDOM: Para construir interfaces de usuario dinámicas.
• Tailwind CSS: Facilita la creación de diseños responsivos y modernos.
• ReactFlow: Crea diagramas interactivos que ilustran la arquitectura y el flujo de datos de mi sitio web.

Backend: El motor que funciona tras bastidores ⚙️

El backend es el corazón de mi sitio web, manejando toda la lógica, bases de datos y servicios externos que permiten que todo funcione sin problemas.

Dependencias básicas del Backend

• Next.js: Framework de React para aplicaciones web rápidas y escalables.
• Axios: Para realizar solicitudes HTTP a APIs externas.
• Dotenv: Gestiona variables de entorno y configuraciones sensibles.
• OpenAI: Integra funcionalidades avanzadas de inteligencia artificial.
• Vercel: Plataforma para desplegar y escalar aplicaciones backend.
• Vercel KV: Utilizo Vercel KV como sistema de caché para mejorar el rendimiento y la velocidad de acceso a datos frecuentes.
• Servicios de Azure: Utilizo una variedad de servicios de Azure para potenciar las capacidades de mi backend:
  • Azure AI Text Analytics: Para análisis de texto y extracción de información relevante.
  • Azure Cognitive Services - Reconocimiento Facial: Servicios de reconocimiento facial.
  • Azure Cognitive Services - Traducción de Texto: Traducción de texto en tiempo real.
  • Azure Data Tables: Almacenamiento y gestión de datos estructurados.
  • Azure Event Hubs: Gestión de eventos y procesamiento en tiempo real.
  • Azure Notification Hubs: Envío de notificaciones push a diferentes plataformas.
  • Azure Search: Implementación de funcionalidades de búsqueda avanzadas.
  • Azure Blob Storage: Almacenamiento de blobs para manejar archivos y datos no estructurados.
• RSS-Parser: Para manejar y procesar feeds RSS.
• Sanitize-html: Asegura que el contenido procesado sea seguro.

Scripts del Backend

Los scripts en el backend están diseñados para facilitar el desarrollo y la implementación:

• dev: Inicia el servidor de desarrollo de Next.js.
• build: Construye la aplicación para producción.
• start: Inicia la aplicación en modo producción.
• version: Verifica las dependencias desactualizadas.
• lint: Analiza el código en busca de errores y aplica buenas prácticas.

Tecnologías clave del Backend

• Azure Cognitive Services: Añade capacidades de reconocimiento de texto, traducción y análisis de imágenes.
• OpenAI: Implementa funcionalidades avanzadas de procesamiento de lenguaje natural.
• Vercel Postgres: Gestiona la base de datos de manera eficiente y escalable.
• Vercel KV: Utiliza Vercel KV como caché para optimizar el rendimiento de la aplicación.
• Formidable: Maneja formularios y carga de archivos de manera segura.
• Next.js: Facilita la creación de APIs y rutas dinámicas para mi aplicación.

¡Automatizando con estilo! 💻

He creado unos “scripts” mágicos que se encargan de automatizar muchas tareas. 🧙‍♂️

• GitHub 🐙: Mantengo mi código en GitHub y estos scripts se aseguran de que todo esté actualizado.
• YouTube 📺: Me conecto con YouTube para traer contenido fresco.
• Spotify 🎵: ¡La música es esencial! Mantengo mi playlist actualizada automáticamente.
• Wakatime ⏱️: Registro cuánto tiempo paso programando, ¡es como mi diario personal de coder!
• Y más: También me conecto con GitLab, Azure DevOps, Unsplash, Anilist, Telegram, Dev.to y Ko-fi. ¡No se me escapa nada! 😅

Diagrama interactivo con ReactFlow 🌐

El corazón de mi página web es un diagrama interactivo creado con ReactFlow. Este diagrama es como un mapa que ilustra de manera visual la arquitectura y el flujo de datos de mi sitio web. Permíteme guiarte a través de los elementos clave de este diagrama:

1. Código de Astro en GitHub 🚀: Mi proyecto se encuentra alojado en un repositorio de GitHub. Aquí es donde reside todo el código fuente que alimenta mi sitio web. Astro, que es el marco principal de desarrollo, se encarga de darle vida.
2. Integración con Vercel 🛠️: Vercel es un servicio que se sincroniza con mi repositorio de GitHub. Cuando se detecta un cambio en el código fuente, Vercel lanza el proceso de construcción, conocido como “build”. Esto asegura que mi sitio web esté siempre actualizado y listo para brindarte la última información.
3. Llamadas a diversas APIs y scraping 📡: Durante el proceso de construcción, se llevan a cabo diversas acciones, como llamadas a APIs y “scraping” de datos. Estos procesos extraen información valiosa de fuentes externas, como YouTube, GitHub, Azure DevOps, GitLab, Unsplash, Anilist, Spotify, Wakatime, Telegram, Dev.to y Ko-fi. Así, mi sitio siempre ofrece contenido fresco y actualizado.
4. Integración en real time con Better Stack y Shipshape 📈: Los datos generados durante la construcción de mi sitio se envían en real time a las plataformas de Better Stack y Shipshape. Estas herramientas proporcionan un seguimiento continuo y análisis del rendimiento y la actividad en mi página. Esto me ayuda a comprender mejor cómo los usuarios interactúan con mi contenido y a tomar decisiones basadas en datos.
5. Conexión en real time con Giscus y Discord 💬: Mi sitio web también se conecta en real time con Giscus y Discord. Esto significa que puedes interactuar conmigo y con otros visitantes en real time. Puedes dejar comentarios, preguntas o simplemente charlar. Es una forma de mantener una experiencia interactiva y social en mi página.

Resumen: Un Festival de tecnología 🎉

En resumen, mi sitio web es como un festival de tecnología, donde Astro es el jefe de escena, los scripts hacen su magia y el diagrama interactivo de ReactFlow ilustra todo el proceso. Con un frontend robusto y un backend potente que incluye múltiples servicios de Azure y Vercel KV para el caché, todo está diseñado para ofrecerte la mejor experiencia posible. ¡Gracias por ser parte de esta aventura tecnológica! 😄🌐