b93f4c5797
## New Files - .env.example: Environment variables template - .env: Local development config (API URL: localhost:3021) - src/services/auth/auth.api.ts: Authentication API service - src/hooks/useAuth.ts: React Query hooks for auth - src/pages/auth/LoginPage.tsx: Functional login page ## Modified Files - src/App.tsx: Use LoginPage instead of placeholder - src/hooks/index.ts: Export useAuth hook ## Features - Login with email/password - JWT token management - Automatic token refresh - Error handling with toast notifications - Zustand + React Query integration Build: PASSED Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| src | ||
| .env.example | ||
| .eslintrc.cjs | ||
| Dockerfile | ||
| index.html | ||
| nginx.conf | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
Frontend Web - MVP Sistema Administración de Obra
Stack: React 18 + Vite + TypeScript + Zustand Versión: 1.0.0 Fecha: 2025-11-20
📋 DESCRIPCIÓN
Aplicación web del sistema de administración de obra e INFONAVIT.
Portales incluidos:
- Admin: Portal administrativo completo
- Supervisor: Portal para supervisores de obra
- Obra: Portal para personal en sitio
🚀 SETUP INICIAL
# Instalar dependencias
npm install
# Iniciar servidor de desarrollo
npm run dev
# Build para producción
npm run build
La aplicación estará disponible en http://localhost:5173
🏗️ ESTRUCTURA
src/
├── shared/ # Código compartido entre portales
│ ├── components/
│ │ ├── ui/ # Componentes UI base (Button, Input, etc.)
│ │ └── layout/ # Componentes de layout (Header, Sidebar, etc.)
│ ├── hooks/ # Custom hooks
│ ├── stores/ # Zustand stores
│ ├── services/ # API services
│ ├── types/ # TypeScript types
│ ├── utils/ # Utilities
│ └── constants/ # Constantes
└── apps/ # Portales específicos
├── admin/ # Portal administrador
│ ├── pages/
│ ├── components/
│ └── routes.tsx
├── supervisor/ # Portal supervisor
└── obra/ # Portal obra
📝 SCRIPTS
| Script | Descripción |
|---|---|
npm run dev |
Inicia servidor de desarrollo (port 5173) |
npm run build |
Build para producción |
npm run preview |
Preview del build de producción |
npm run lint |
Ejecuta ESLint |
npm run lint:fix |
Ejecuta ESLint y corrige |
npm run type-check |
Verifica tipos TypeScript |
🎨 CONVENCIONES
Nomenclatura
Seguir ESTANDARES-NOMENCLATURA.md:
- Componentes:
PascalCase.tsx - Páginas:
PascalCasePage.tsx - Hooks:
useCamelCase.ts - Stores:
camelCase.store.ts - Tipos:
camelCase.types.ts
Path Aliases
import { Button } from '@components/ui/Button';
import { useAuth } from '@hooks/useAuth';
import { projectStore } from '@stores/project.store';
import type { Project } from '@types/project.types';
📚 REFERENCIAS
Mantenido por: Frontend-Agent Última actualización: 2025-11-20