Proyecto de demostración y práctica desarrollado mientras sigo un curso de React con TypeScript. No es un producto terminado: es un espacio para probar conceptos, equivocarme y dejar ejemplos funcionando que pueda consultar o reutilizar en proyectos reales.
La app es un pequeño panel con inicio de sesión (email y Google), gestión de tareas y perfil de usuario, construida sobre Firebase.
Estado: en desarrollo continuo. Algunas secciones (como el chat) todavía son un esqueleto.
- Componentes funcionales con props tipadas (
interface, props opcionales, valores por defecto). - Hooks personalizados para separar la lógica de la UI (
useAuthActions,useTaskActions). - Levantar el estado (lifting state up) y callbacks entre componentes padre e hijo.
- Componentes controlados (por ejemplo, un modal que se cierra al terminar de guardar).
- Suspense para estados de carga y
useTransitionpara acciones asíncronas. - Tipos utilitarios de TypeScript como
Omit<T, K>yz.infer<typeof schema>.
- React Hook Form con
Controller. - Zod para los esquemas de validación, incluidas validaciones entre campos con
.refine()(por ejemplo, "las contraseñas no coinciden").
- React Router: layouts anidados, rutas protegidas según la sesión,
Link,NavLink(estado activo),useNavigatey<Navigate />.
- Authentication: email/contraseña y Google.
- Firestore: lectura en tiempo real, creación, actualización y eliminación de documentos, consultas con
where/orderBye índices compuestos. - Integración con React mediante ReactFire.
La interfaz usa shadcn/ui sobre Tailwind CSS v4, pero customizado con un sistema de diseño propio en lugar del tema por defecto.
- Tokens de diseño (colores, tipografía, radios, sombras, movimiento) definidos como variables CSS en
src/styles/design.css. - Preset en
src/styles/trabajaya-preset.cssque conecta esos tokens con Tailwind y shadcn:- Las variables de shadcn (
--primary,--card,--border…) apuntan a los tokens, así que cualquier componente que se agregue connpx shadcn addya sale con la marca. - Agrega utilidades propias:
bg-brand,text-anchor,text-h1…text-label-sm,rounded-card,shadow-focus, entre otras.
- Las variables de shadcn (
- Los componentes de
src/components/ui/(Button, Card, Input, Field, Dialog, Sonner, Skeleton, Spinner…) se adaptaron uno a uno para coincidir con el diseño. - Dos tipos de notificación con Sonner: alertas de sistema (errores y avisos) y confirmaciones de acciones.
- Íconos de Lucide.
| Área | Tecnología |
|---|---|
| Base | React 19, TypeScript, Vite |
| Estilos | Tailwind CSS v4, shadcn/ui (Base UI), Lucide |
| Formularios | React Hook Form, Zod |
| Rutas | React Router |
| Backend | Firebase (Auth, Firestore), ReactFire |
| Notificaciones | Sonner |
Requisitos: Node.js 20 o superior y un proyecto de Firebase con Authentication (Email/Password y Google) y Firestore habilitados.
-
Instala las dependencias:
npm install
-
Crea un archivo
.env.localen la raíz con la configuración web de tu proyecto de Firebase:VITE_FIREBASE_API_KEY= VITE_FIREBASE_AUTH_DOMAIN= VITE_FIREBASE_PROJECT_ID= VITE_FIREBASE_STORAGE_BUCKET= VITE_FIREBASE_MESSAGING_SENDER_ID= VITE_FIREBASE_APP_ID= VITE_FIREBASE_MEASUREMENT_ID=
-
Levanta el servidor de desarrollo:
npm run dev
src/
├── components/
│ ├── ui/ # Componentes de shadcn adaptados al diseño
│ ├── tasks/ # Lista, tarjeta, formulario y modal de tareas
│ └── profile/ # Formulario de perfil
├── hooks/ # Lógica reutilizable (auth, tareas, perfil)
├── layouts/ # Layouts raíz, público, de autenticación y admin
├── lib/ # Esquemas de Zod, mensajes de error, notificaciones, utils
├── models/ # Tipos de datos (Task…)
├── pages/ # Páginas por sección: public, auth y admin
├── styles/ # Tokens de diseño y preset de Tailwind/shadcn
└── config/ # Configuración de Firebase
Este repositorio tiene fines educativos y de muestra. El código prioriza la claridad y el aprendizaje, y por eso incluye comentarios que explican el porqué de varias decisiones.