Algunas recomendaciones

¡Hola! Espero que estén excelentes. He visto el proyecto y la comunidad que están formando alrededor, lo cual me parece realmente interesante. Por eso mismo, quisiera comentar algunas recomendaciones que podrían ser bastante útiles en cuanto a la escalabilidad del mismo.

Versionamiento

El versionamiento no solo mejora la colaboración y el control sobre los cambios en el código, sino que también juega un papel crucial en la gestión de lanzamientos, la integración continua y la participación comunitaria. Por esto, sería interesante explorar herramientas que automatizan este proceso, como semantic-release, que, utilizando Conventional Commits, puede determinar la siguiente versión, generar changelogs, etc. Además, el uso de Conventional Commits ayudaría a tener una visualización más explícita de lo realizado en un commit específico.

Linting

El uso de un linter es crucial en un proyecto y puede ser relativamente estricto. De esta manera, todos trabajamos sobre el mismo estilo de escritura de código, lo que, a largo plazo, permite un código más limpio, ordenado y en el que se pueden identificar problemas de forma sencilla. Una de las herramientas más populares sería el uso de ESLint y Prettier.

Next.js

Next.js es uno de los frameworks más potentes del ecosistema de React. Y no es para menos, las herramientas y la comunidad que tiene son realmente interesantes. Algunos de los beneficios más importantes para el estilo del proyecto, que Next.js ofrece, serían los siguientes:

Sistema de Rutas Basado en Estructura de Archivos: Una de las características más amigables para los desarrolladores que un framework puede tener. Un proyecto convencional de React siempre tiene problemas a la hora de lidiar con este tipo de aspectos, desde problemas de optimización hasta código difícil de mantener.
SEO: Para el tipo de proyecto, es importante que se cree el frontend en un framework que nos ahorre la construcción de estas necesidades. Así que Next.js es bastante amigable con el SEO.

Recomiendo leer este artículo para tener una comprensión más profunda: 5 razones para usar Next.js en tu aplicación frontend.

Ya que el proyecto está en una etapa temprana, la migración hacia él no causaría mucha molestia.

Un plus, también aportando a cuestiones de seguridad, sería usar un proyecto como NextAuth, que permite manejar de manera increíblemente simple lo relacionado con autenticación.

React Query

Cuando se trata de realizar peticiones, consultar datos y crear registros desde nuestro cliente, la opción ideal es usar una herramienta que maneje por nosotros ese tipo de suscripciones, mutaciones, etc. React Query es un manejador de estado que permite gestionar de forma impecable todo lo relacionado con peticiones a nuestro backend. Algunos de los beneficios serían los siguientes:

Automatiza la Gestión de Datos: Maneja automáticamente los estados de carga, error y éxito, simplificando la lógica del código.
Caché: Guarda datos para un acceso rápido y actualiza automáticamente el caché cuando hay nuevos datos.
Refetching Automático: Actualiza los datos automáticamente cuando es necesario, como al volver a enfocar una ventana.
Soporta Paginación y Scroll Infinito: Facilita la implementación de paginación y scroll infinito para manejar grandes cantidades de datos.
Sincronización de Datos en Tiempo Real: Mantiene los datos sincronizados actualizándolos regularmente.
Manejo Eficiente de Mutaciones: Permite realizar y gestionar cambios en los datos, manteniendo la aplicación actualizada.
Fácil de Integrar: Se puede añadir a proyectos React existentes sin necesidad de grandes cambios.
Desacopla el Estado de Datos del UI: Ayuda a mantener el código más organizado y fácil de mantener.
Herramientas de Desarrollo Útiles: Incluye herramientas para visualizar y manejar el estado de los datos, facilitando la depuración.
Comunidad Activa y Buena Documentación: Ofrece soporte y recursos para aprender y resolver problemas.

i18n

Integrar una característica de internacionalización depende del alcance futuro que se planee para la aplicación, pero definitivamente algo que he aprendido es que si se integra esta característica en una etapa temprana se ahorran muchos dolores de cabeza. Así que estaría bien considerar esta herramienta que permite soportar múltiples idiomas.

React Hook Form (con yup u otro schema builder)

Uno de los componentes más comunes en una aplicación son los formularios, por lo que es un aspecto que vale la pena optimizar para ahorrar esfuerzo y tiempo. Ahí es donde entra React Hook Form, una herramienta de gestión de formularios que trae beneficios como:

Rendimiento Óptimo: Minimiza re-renderizaciones innecesarias, lo que conduce a un mejor rendimiento, especialmente en formularios con muchos campos.
Facilidad de Uso: Su API es sencilla y directa, facilitando la creación de formularios complejos con menos código.
Integración con UI Libraries: Se integra fácilmente con diversas bibliotecas de UI.
Validación Incorporada: Ofrece funcionalidades de validación integradas.
Manejo de Formularios Controlados y No Controlados: Soporta ambos tipos de formularios, proporcionando flexibilidad.

Para validaciones complejas de formularios, es necesario considerar un schema builder, y Yup es una de las mejores opciones. Además, se integra perfectamente con React Hook Form, y sus beneficios incluyen:

Sintaxis Declarativa: Facilita la definición de esquemas de validación.
Validación Compleja con Menos Código: Reduce la cantidad de código necesario.
Personalización y Extensibilidad: Permite crear reglas de validación personalizadas.
Integración con React Hook Form: Proporciona un sistema robusto para la gestión y validación de formularios.
Asíncrono y Basado en Promesas: Soporta validaciones que requieren llamadas a APIs o bases de datos.

Algunas tecnologías extras serían las siguientes:

Trycatch-tv / ValidadorBootcamp-frontend