Academia

Migración de NextJs a Astro

Me encargue de la migración del proyecto de NextJs a Astro, manteniendo la estructura para la creación de nuevos cursos, siguiendo la siguiente estructura el creador podrá agregar nuevos cursos de forma sencilla.

Formato para agregar un nuevo curso:

{
  "title": "",
  "imageId": "",
  "fileId": "",
  "type": "",
  "description": "",
  "metadata": {
    "date_publish": "",
    "time_read": ""
  },
  "resources": {
    "videoId": "",
    "powerbi": "",
    "github": "",
    "diagram": "",
    "docs": "",
    "looker": "",
    "dataSource": "",
    "pdf": ""
  }
}

Experiencia de usuario

Aparte que para documentar cada curso se creo una carpeta markdown en donde el usuario por medio del fileId puede agregar un archivo .md con la documentación del curso, el cual se mostrara o se cargara en la vista del cuerpo del curso.

Use también los ViewTransitions de Astro para mejorar la experiencia del usuario al navegar entre los cursos, haciendo una transición suave entre las vistas, de cada una de las páginas de los cursos.

Actualmente los ViewTransitions en Astro no es la manera correcta de importarlo, ya que de la versión 2.0.0 en adelante se debe importar de la siguiente manera:

import { ClientRouter } from "astro:transitions";

Filtrado de cursos

En el apartado para buscar los cursos, implemente un método de filtrado rápido y sin gastar recursos, el cual acepta o permite, que al momento de estar escribiendo en la entrada del buscador, se filtren los cursos que coincidan con el titulo o con las tags del curso, de esta manera se mejora la experiencia del usuario al buscar un curso en especifico.

La manera en que se implemento la filtración de los cursos fue gracias a la librería de preact, la cual me permitió crear un componente que se encargaba de filtrar los cursos, y mantener un buen rendimiento al no tener que hacer tantas peticiones de datos al servidor, que es el archivo courses.json que contiene todos los cursos.

Diseño y estilo

El diseño y estilo del sitio fue creado y diseñada por mi usando Figma, para maquetar de primera mano como se vería cada una de las secciones que el usuario podría ver, y luego implementando el diseño en Astro usando TailwindCSS para los estilos.

Despliegue

El cliente optó por desplegar el proyecto en Netlify debido a su facilidad de uso y porque ya contaba con experiencia previa en la plataforma. Además, Netlify ofrece un plan gratuito ideal para proyectos pequeños, lo que facilitó el proceso de publicación y mantenimiento del sitio.

Conclusiones

El proyecto fue un éxito, logrando cumplir con los objetivos del cliente y mejorando la experiencia del usuario al navegar por los cursos. La migración de NextJs a Astro permitió una mayor flexibilidad y rendimiento en el sitio, además de facilitar la creación y documentación de nuevos cursos.

El uso de ViewTransitions mejoró la experiencia del usuario al navegar entre los cursos, y el filtrado rápido de cursos permitió una búsqueda eficiente sin afectar el rendimiento del sitio. El diseño y estilo del sitio fueron implementados de manera efectiva, logrando una apariencia atractiva y funcional.