ZocoFullStack
01El Desafío
Se necesitaba una plataforma fullstack para gestionar usuarios con sus estudios academicos y direcciones asociadas — con autenticacion segura, control de acceso por roles, y una arquitectura backend que demostrara separacion de responsabilidades estricta, SOLID aplicado en cada capa, y un frontend React moderno que consumiera la API de forma tipada.
02La Solución
Desarrolle una aplicacion fullstack con .NET 8 en backend (Layered Architecture con 4 capas) y React + TypeScript en frontend. El backend implementa JWT con BCrypt, RBAC con roles Admin/User, Repository Pattern con Entity Framework Core, DTOs para desacoplar entidades de respuestas, logging de sesiones con IP y User-Agent, y validaciones de negocio en cada operacion. El frontend consume la API con Axios, maneja estado de autenticacion con Context API, y renderiza interfaces responsive con React Router.
Layered Architecture con 4 proyectos .NET: API (controllers + middleware), Business (servicios + DTOs + interfaces), Data (repositories + EF Core + migraciones), Models (entidades de dominio puras)
SOLID aplicado en cada capa: Single Responsibility en servicios (un servicio por entidad), Open/Closed con interfaces para extensibilidad, Dependency Inversion con inyeccion de dependencias en Program.cs
Repository Pattern: IUserRepository, IStudyRepository, IAddressRepository como interfaces en Business, implementados con EF Core en Data — el dominio no conoce la infraestructura
DTOs (Data Transfer Objects) para cada respuesta: UserDto, StudyDto, AddressDto — las entidades de dominio nunca se exponen directamente al cliente
JWT Authentication con claims de UserId y Role — tokens firmados con clave simetrica configurable en appsettings.json
Hash de contrasenas con BCrypt + salt automatico — 12 rounds de costo computacional para resistir ataques de fuerza bruta
RBAC con 2 roles: Admin (CRUD completo sobre todos los usuarios) y User (solo lectura y edicion del propio perfil)
Session logging: cada login registra IP, User-Agent, timestamp y userId en una tabla Sessions para auditoria y deteccion de accesos sospechosos
CRUD de Usuarios: registro con validacion de email unico, login, perfil, actualizacion de datos, eliminacion (solo Admin)
CRUD de Estudios: cada usuario puede tener multiples estudios academicos (titulo, institucion, fecha inicio/fin, estado) asociados por foreign key
CRUD de Direcciones: cada usuario puede tener multiples direcciones (calle, numero, ciudad, provincia, codigo postal) con relacion 1-a-N
Validaciones de negocio: email unico en registro, usuario existente antes de asociar estudio/direccion, ownership verificado en cada operacion
Entity Framework Core con SQL Server, migraciones code-first, relaciones configuradas con Fluent API (HasMany/WithOne, OnDelete Cascade)
Seed data con usuario admin predefinido y datos de ejemplo para testing inmediato
Indices en email (unique) y foreign keys para performance en queries relacionales
Frontend React + TypeScript con Vite: SPA con React Router para navegacion client-side
Context API para estado global de autenticacion: AuthContext provee usuario, token y funciones de login/logout a toda la app
Axios con interceptor que inyecta el JWT en el header Authorization de cada request automaticamente
Formularios controlados con validacion client-side: campos requeridos, formato de email, longitud minima de contrasena
Componentes reutilizables: UserCard, StudyList, AddressForm, ProtectedRoute (redirige a login si no hay token)
Interfaz responsive con CSS modules y diseño mobile-first
Swagger/OpenAPI con documentacion de todos los endpoints agrupados por controller: Auth, Users, Studies, Addresses
CORS configurado para el origen del frontend en desarrollo (localhost:5173) y produccion
FLUJO — Registro de usuario: [Cliente React] POST /api/auth/register {name, email, password} → [AuthController] valida campos requeridos → [UserService] verifica email no existe en DB (unico) → BCrypt.HashPassword(password, 12 rounds) → crea entidad User con role=User → [UserRepository] persiste via EF Core → response 201 {userId, name, email, role}
FLUJO — Login con session logging: [Cliente] POST /api/auth/login {email, password} → [AuthController] → [UserService] busca user por email → BCrypt.Verify(password, hash) → si falla: 401 → si pasa: genera JWT con claims {userId, role, exp} → [SessionService] registra sesion: {userId, IP (del request), User-Agent (del header), loginAt: now} en tabla Sessions → response {token, user}
FLUJO — Request autenticado por capas: [React] Axios interceptor inyecta header Authorization: Bearer {token} → [API: Controller] recibe request → [JWT Middleware] extrae token → valida firma y expiracion → setea ClaimsPrincipal con userId y role → [Controller] lee userId de claims → [Service en Business] ejecuta logica con validaciones → [Repository en Data] ejecuta query EF Core → [SQL Server] → response sube las capas
FLUJO — Control de acceso RBAC: [Request] GET /api/users → [JWT Middleware] extrae role del token → si role==Admin: [UserService] retorna todos los usuarios → si role==User: [UserService] retorna solo el perfil del usuario autenticado. [Request] DELETE /api/users/{id} → si role!=Admin: 403 Forbidden → si role==Admin: ejecuta eliminacion
FLUJO — Crear estudio para usuario: [Cliente] POST /api/users/{userId}/studies {title, institution, startDate, endDate, status} → [StudyController] extrae userId de la ruta → [StudyService] verifica que el usuario existe → verifica ownership (userId del token == userId de la ruta, o role==Admin) → crea Study con FK a userId → [StudyRepository] persiste → response 201 con studyId
FLUJO — Frontend completo: [App.tsx] AuthProvider wrappea toda la app → [Login page] submit → AuthContext.login() → POST /api/auth/login → guarda token en state + localStorage → [ProtectedRoute] verifica token existe → si no: redirect a /login → si si: renderiza componente protegido → [UserDashboard] useEffect → Axios.get(/api/users/me) con token automatico → renderiza perfil + estudios + direcciones
03Stack Tecnológico
.NET 8
C#
Entity Framework Core
SQL Server
JWT
BCrypt
React
TypeScript
Vite
React Router
Axios
Swagger
04Resultados
LayeredArchitecture con 4 capas SOLID
RBACAdmin/User con JWT + BCrypt
3 CRUDsUsers, Studies, Addresses
SessionsLogging de IP y User-Agent
ReactSPA con Context API + Axios
SwaggerDocumentacion OpenAPI completa
05Galería
