Basic Store
Basic Store es mi primer aplicación web pública, esta misma consta de una restful API desarrollada en NestJS y una página web usando NextJS como framework principal. Simula una típica página de e-commerce pero con el añadido de poder pujar por un producto. Su propósito siempre fue aplicar conocimientos adquiridos y plasmarlo en algo material.
Tecnologías implementadas
- NESTJS
- TYPESCRIPT
- TYPEORM
- POSTGRESQL
- SWAGGER
- NEXTJS
- REACT
- JAVASCRIPT
Proceso y desafíos
Backend
En primer lugar tocaba desarrollar la estructura básica. Al no ser un proyecto muy complejo fue una tarea relativamente simple, más teniendo en cuenta las facilidades de la NestCli. Diseñar la base de datos no fue un gran reto, gracias a typeorm fue una tarea muy intuitiva y rápida comparado con escribir SQL nativo.
Posteriormente me concentré en la lógica de negocio (services), el tratado y validación de información (controllers). En el trayecto de finalizar esta tarea, fui paralelamente implementando un sistema de autenticación y autorización dispuesto por PassportJS implementando JWT tokens.
Finalmente, me centré en la documentación de la API. Para esto utilicé Swagger, una herramienta que me permitió documentar la API de forma muy sencilla y rápida gracias a la combinación con nestjs. Además, me permitió generar un cliente de prueba para la API que me permitió probarla de forma más rápida y eficiente.
DB Deployment: primero me tocó desplegar la Postgresql base de datos. Haciendo uso de un regalo de microsoft azure (por ser estudiante), lancé esta base de datos, posteriormente haciendo las migraciones desde el backend y usando pgadmin. Debo reconocer que me llevó más tiempo del que me gustaría aceptar, ya que fue la primera vez ocupando esta herramienta.
API Deployment: Como hice en StopRows, mi intención era usar DigitalOcean para desdoblar la API. Sin embargo, debido a algunas limitaciones y complicaciones, decidí utilizar Azure nuevamente. En este caso configuré un servidor linux (RedHat) donde instalé las dependencias necesarias y puse a correr la aplicación con PM2. Nuevamente, me llevó tiempo por errores de novato principalmente. Por ejemplo, el firewall no admitía puertos de entrada y me tomó un plazo darme cuenta.
Frontend
Estructura básica nextjs (carpeta pages, eslint, next.config.js, etc). Lo siguiente fue el desarrollo de la página principal (NavBar, Footer, lista de productos) y página particular de producto utilizando routing dinámico y usando ServerSideProps.
Posteriormente me dispuse a desarrollar custom hooks (uno para autenticación y otro para fetching) y desarrollar los componentes de inicio de sesión y creación de un perfil.
Para terminar, me concentré en pulir detalles de experiencia e interfaz de usuario y mejorar prácticas (no repetir lógica, endpoints en un mismo archivo, etc).
En el deploy fue nuevamente utilizado vercel, sumamente rápido y funcional.
Conclusión y mejoras a futuro
Siempre hay cuestiones mejorables, más teniendo en cuenta que es mi primer “gran proyecto”. Pero en particular hubo un par de cuestiones que me quedaron pendientes: testing, web sockets para ver las pujas en tiempo real, caché tanto para el frontend como el backend y un mejor diseño responsive.