Skip to content
Documentación del Proyecto

Stack Empleado

Toda aplicación necesita de un stack (conjunto de herramientas) para ser creada y funcionar. Es de gran importancia no tomar la elección de las tecnologías a la ligera, puesto que una mala elección perjudicará el desarrollo del proyecto, ya sea con retrasos recurrentes o eventualidades no esperadas.

Para evitar esto se debe tener en cuenta lo siguiente:

Ecosistema Utilizado

Para aprovechar las bondades de la web, decidimos emplear para todo el proyecto JavaScript/TypeScript, puesto que disminuye la curva de aprendizaje que implica tener multiples lenguajes en un mismo desarrollo, se puede iterar rápido, entre otras razones.

Las herramientas son:

Herramientas Backend

  1. Node.js: Entorno de ejecución de JavaScript basado en el motor V8 de Google Chrome que permite llevar JavaScript fuera del navegador.

  2. Express: Es un framework web minimalista y UnoOpinionated (sin opinión) de Node.js que facilita la creación de APIs y aplicaciones web. Al ser un framework sin opinión, no impone ni recomienda una estructura para el proyecto, tampoco ofrece ningún modulo para la conexión con la base de datos ni autenticación, etc. Esto se debe suplir mediante la unión de otras herramientas por separado.

  3. Drizzle: Es el ORM utilizado en el desarrollo del sistema. Unos de sus principales atractivos es su sintaxis similar a sql y su flexibilidad a la hora de implementar la solución.

  4. Zod: Biblioteca de validación de esquemas (cualquier tipo de dato) en TypeScript que facilita la validación de datos en las aplicaciones. Su objetivo es eliminar declaraciones de tipo duplicadas. Con Zod, se declara un validador una vez y Zod inferirá automáticamente el tipo de TypeScript estático.

  5. SQLite: Base de datos relacional de un solo archivo, capaz de ejecutarse en cualquier lugar, desde el dispositivo más pequeño hasta el servidor más potente

Herramientas Frontend

  1. Astro: Framework web para sitios basados en contenido, combina la simplicidad y flexibilidad de los sitios estáticos con la potencia de las aplicaciones web modernas. Sus características más importantes son: Su excelente rendimiento, buen Seo y agnóstico a la interfaz de usuario.

  2. Tailwind CSS: Framework CSS que permite diseñar interfaces web con rapidez y facilidad. Tailwind brinda un conjunto completo de clases de utilidad de un solo propósito que se utilizan directamente dentro de las etiquetas HTML, lo que facilita la creación de diseños consistentes y responsivos.

  3. Shadcn: Es una colección de componentes reutilizables que se pueden copiar y pegar en las aplicaciones. Lo que nos permite tener la propiedad y el control sobre el código, permitiendo decidir cómo se construyen y diseñan los componentes. El enfoque es comenzar con algunos valores predeterminados y luego se personalizan según las necesidades.

  4. React: Es una biblioteca de JavaScript que permite crear componentes reutilizables, lo que facilita la construcción de interfaces modulares y fáciles de mantener. Es popular por su enfoque basado en componentes, su rendimiento optimizado y su gran ecosistema de herramientas y bibliotecas.

  5. React Dropzone: Es una biblioteca de React que proporciona una forma sencilla de crear áreas de carga de archivos personalizadas en aplicaciones web. No proporciona estilos por defecto, solo la funcionalidad, lo que es bueno ya que permite mantener la coherencia visual en toda la aplicación.

  6. React Hook-Form: Es una biblioteca para la gestión de formularios en React que se enfoca en mejorar el rendimiento y la usabilidad de los mismos en la aplicación. Administra de forma interna el estado del formulario, lo que elimina la necesidad de escribir código para manejar los cambios.

  7. Sonner: Es una biblioteca que facilita la creación de “Toasts” en las aplicaciones web. Los Toasts son los recuadros emergentes que aparecen en la pantalla para mostrar mensajes informativos o de acción al usuario. Sonner ofrece varias funcionalidades que la hacen destacar de otras similares.

  8. Zustand: Es una biblioteca de JavaScript para administrar el estado, es ligera, sencilla y eficiente; funciona con cualquier Framework JavaScript, pero suele usarse especialmente con React. Se presenta como una alternativa más simple y accesible a otras opciones como Redux. Nos permite gestionar un estado global entre los componentes del sistema.