RMSStack Frontend: Una Aplicación React con Redux

RMSStack Frontend es una aplicación web construida con React y Redux, siguiendo el patrón de diseño Flux. Aquí está una descripción general de cómo cada pieza encaja en esta arquitectura.

Live Demo

Estructura del Proyecto

El proyecto está organizado en varias carpetas principales:

• components: Contiene los componentes de React reutilizables que se utilizan en toda la aplicación. Los componentes se dividen en componentes específicos de la página (como LoginForm y RegisterForm) y componentes base que se utilizan en varias páginas.

• redux: Contiene la lógica de Redux para el manejo del estado de la aplicación. Se divide en varios "slices" para manejar diferentes partes del estado de la aplicación (auth, permission, role, scope, user).

• views: Contiene las páginas de la aplicación (Login, Register, Permission, Roles, Scope, Users).

• layouts: Contiene los layouts de la aplicación (Auth, Dashboard).

La aplicación principal (App) se conecta con los Layouts, que a su vez se conectan con las Views. Las Views se conectan con los Components y con Redux.

Aquí tienes un diagrama que representa la estructura de tu proyecto de frontend:

Scripts

El proyecto incluye varios scripts para el desarrollo, la construcción y las pruebas:

• dev: Inicia el servidor de desarrollo de Vite.
• build: Compila la aplicación para producción.
• serve: Sirve la versión de producción de la aplicación.
• test: Ejecuta las pruebas de la aplicación.
• test:ui: Ejecuta las pruebas de la aplicación con la interfaz de usuario de Vitest.
• lint: Ejecuta ESLint en el código fuente de la aplicación.
• typecheck: Verifica la corrección de tipos de la aplicación con TypeScript.

Dependencias

El proyecto utiliza varias dependencias clave:

• React para la construcción de la interfaz de usuario.
• Redux para el manejo del estado de la aplicación.
• TypeScript para el tipado estático.
• Vite para la construcción y el desarrollo.
• Tailwind CSS para el diseño y el estilo.