Appearance
Carpeta src del Frontend
Este documento describe la organización interna de la carpeta src de tu proyecto frontend, que contiene el código fuente principal de la aplicación.
Archivos
assets
Esta carpeta contiene los recursos estáticos de tu aplicación que son gestionados como módulos (ej., importados en JavaScript/TypeScript) o procesados por el bundler (Vite en este caso). A diferencia de public/, los archivos en assets/ pueden ser optimizados o transformados durante el proceso de build. Incluye imágenes, fuentes, estilos globales (CSS, SCSS), etc.
components
Aquí se encuentran los componentes reutilizables de la interfaz de usuario. Cada componente encapsula una parte específica de la UI (botones, formularios, listas, etc.) y su lógica asociada. La estructura interna de esta carpeta puede variar según el framework (React, Vue, etc.), promoviendo la reutilización y el mantenimiento.
config
Esta carpeta almacena los archivos de configuración específicos de tu aplicación frontend, como la configuración de la API (URLs de endpoints), las variables de entorno por entorno (desarrollo, producción), o la configuración del enrutamiento.
features
Siguiendo una arquitectura "feature-sliced", esta carpeta organiza el código por funcionalidades o características de la aplicación (ej., autenticación, perfiles de usuario, gestión de estudiantes). Cada "feature" contiene su propia lógica, componentes, estilos y tests, promoviendo la modularidad y escalabilidad.
hooks
Aquí se definen los hooks personalizados (si usas React) o composables (si usas Vue). Los hooks permiten extraer y reutilizar lógica con estado o efectos secundarios de los componentes, facilitando el mantenimiento y la legibilidad del código.
interface
Esta carpeta contiene las definiciones de tipo (interfaces o tipos de TypeScript) que describen la forma de los datos utilizados en tu aplicación. Esto es crucial para la consistencia y la seguridad de tipos, ayudando a prevenir errores en tiempo de desarrollo.
pages
Aquí se definen los componentes de nivel de página, que representan las diferentes "vistas" o rutas principales de tu aplicación. Cada página suele corresponder a una ruta específica en tu aplicación, organizando la interfaz de usuario por secciones principales.
routes
Contiene la configuración del enrutamiento de tu aplicación, definiendo las rutas, los componentes de página asociados a cada ruta, y cualquier lógica de navegación o guardia de ruta (middlewares de ruta).
utils
Esta carpeta almacena funciones de utilidad reutilizables en toda la aplicación. Son pequeñas funciones auxiliares que no pertenecen a un componente o característica específica, como funciones para formatear datos, realizar peticiones HTTP genéricas, manipular cadenas, etc.
Archivos
main.tsx (o main.js)
El punto de entrada principal de tu aplicación JavaScript/TypeScript. Aquí se inicializa la aplicación (ej., montando el componente raíz en el DOM), se configuran aspectos globales como proveedores de contexto o el router, y se inicia el ciclo de vida de la aplicación.
vite-env.d.ts
Un archivo de definición de TypeScript que describe las variables de entorno gestionadas por Vite. Esto permite que TypeScript reconozca y tipifique correctamente las variables de entorno (i) en tu código, proporcionando autocompletado y seguridad de tipos.
[index.html] ─▶ [main.tsx]
│ │
│ ▼
│ [config/]
│ │
│ ▼
└─────────▶ [routes/]
│
▼
[pages/]
│
▼
[components/]
│
▼
[Interacción del Usuario]
│
▼
┌────────────────────────────────────┐
│ │
▼ ▼
[hooks/] [features/]
│ │
│ ┌────────────────────────────┐ │
│ │ │ │
▼ ▼ ▼ ▼
[utils/] [Petición a Backend] ─▶ [Backend API]
▲ │ │
│ │ ▼
└────────────────────────────────────┘ [Respuesta del Backend]
│
▼
[Actualización de Estado / UI]
│
▼
[pages/]
│
▼
[components/]