fullstack-modulos-admin

Plataforma web modular para áreas administrativas y operativas

---

Descripción

fullstack-modulos-admin es una aplicación full stack que integra un frontend en React con una API REST en ASP.NET Core, orientada a organizar y exponer funcionalidades por módulos (contabilidad, nómina, biblioteca, selección y taller). El objetivo es ofrecer una base clara para gestionar datos empresariales desde una interfaz web moderna y un backend documentado, reduciendo fricción entre presentación, lógica de negocio y persistencia en SQL Server.

---

Tecnologías utilizadas

Capa	Tecnologías
Backend	ASP.NET Core 8, Web API, controladores REST, Swagger / OpenAPI (Swashbuckle), CORS, caché en memoria (IMemoryCache), Microsoft.Data.SqlClient
Frontend	React 19, React Router 7, Axios, Create React App (react-scripts), CSS modular por vistas
Base de datos	Microsoft SQL Server (scripts T-SQL en el repositorio)
Herramientas	Git, npm, .NET SDK, Visual Studio / VS Code, SQL Server Management Studio (recomendado)

---

Prerrequisitos

Antes de clonar y ejecutar el proyecto, asegúrate de tener instalado:

• Git — control de versiones.
• .NET SDK 8.0 — compilación y ejecución de la Web API.
• Node.js (se recomienda LTS 18.x o superior) y npm — dependencias y servidor de desarrollo del frontend.
• Microsoft SQL Server (Express, Developer o edición completa) y, opcionalmente, SQL Server Management Studio para ejecutar scripts y administrar bases de datos.

Nota: En Windows, Visual Studio 2022 con la carga de trabajo de desarrollo web y de ASP.NET facilita depurar la API y gestionar secretos de usuario.

---

Instalación y ejecución

Sigue los pasos en orden. Las rutas asumen que trabajas desde la raíz del repositorio clonado.

1. Clonar el repositorio

git clone https://github.com/saoricoder/fullstack-modulos-admin.git
cd fullstack-modulos-admin

Si clonaste el repo dentro de otra carpeta, sustituye cd fullstack-modulos-admin por el nombre de directorio que hayas usado.

2. Preparar la base de datos (SQL Server)

1. Abre SQL Server Management Studio (o tu cliente SQL preferido) y conéctate a tu instancia.
2. Ejecuta los scripts ubicados en fullstack-modulos-admin/sources/ según los módulos que vayas a utilizar, por ejemplo:
   • DBWwebApi.sql — esquema asociado a la API (usuarios, etc.).
   • contabilidad.sql — base y tablas de contabilidad.
3. Verifica que las bases de datos y tablas se hayan creado correctamente.

Buena práctica: Usa entornos separados (desarrollo / pruebas) y evita compartir credenciales en el código fuente.

3. Configurar la cadena de conexión (backend)

La API utiliza SQL Server mediante la clase de conexión en:

fullstack-modulos-admin/WebApi2.0/WebApi2.0/Data/Conexion.cs

Debes ajustar servidor, nombre de base de datos, usuario y contraseña (o autenticación integrada) para que coincidan con tu entorno local. Ejemplo de formato (valores ficticios):

Data Source=TU_SERVIDOR\INSTANCIA;Initial Catalog=tu_base_de_datos;User ID=tu_usuario;Password=tu_contraseña;Trust Server Certificate=True

Seguridad: No subas contraseñas reales al repositorio. Valora User Secrets de .NET o variables de entorno en despliegues reales.

4. Restaurar dependencias y ejecutar la Web API

Desde la carpeta del proyecto de la API:

cd fullstack-modulos-admin/WebApi2.0/WebApi2.0
dotnet restore
dotnet run

Por defecto, el perfil http expone la API en http://localhost:5261. Con el entorno en Development, la documentación interactiva está disponible en:

• Swagger UI: http://localhost:5261/swagger

5. Instalar dependencias y ejecutar el frontend (React)

Abre otra terminal en la raíz del repo y ejecuta:

cd fullstack-modulos-admin
npm install
npm start

El entorno de desarrollo de Create React App suele abrir la aplicación en http://localhost:3000.

6. Comprobar integración frontend ↔ API

• La API tiene CORS configurado para permitir orígenes en desarrollo.
• Las peticiones desde el frontend deben apuntar a la URL base donde corre la API (por ejemplo http://localhost:5261), según cómo invoques fetch o Axios en cada vista.

Comandos útiles adicionales

Compilar el frontend para producción:

cd fullstack-modulos-admin
npm run build

Ejecutar pruebas del frontend (si las tienes configuradas):

cd fullstack-modulos-admin
npm test

---

Características principales

• Arquitectura cliente-servidor con separación clara entre SPA (React) y Web API (.NET 8).
• Módulos funcionales organizados por dominio: contabilidad, nómina, biblioteca, selección y taller (rutas y páginas bajo fullstack-modulos-admin/src/page/).
• Formulario de inicio de sesión en la aplicación React como punto de entrada de usuario.
• Documentación de API con Swagger en modo desarrollo.
• Política CORS habilitada para consumo del API desde el cliente web.
• Scripts SQL versionados para crear bases y tablas de soporte.
• Enrutamiento en el cliente con React Router para navegación entre secciones.

---

Autor / Contacto

Betty Lizeth (Saoricoder)

• GitHub: https://github.com/saoricoder

---

Hecho con enfoque en buenas prácticas de desarrollo y documentación clara para colaboradores y revisores del código.