🎨 Trendora Frontend – E-commerce Web App (React)

Trendora Frontend es la aplicación web del e-commerce Trendora, desarrollada con React + TypeScript, enfocada en rendimiento, escalabilidad y una experiencia de usuario moderna.

La aplicación consume una API REST en producción construida con NestJS y ofrece autenticación, roles, filtrado por URL, paginación y rutas protegidas.

---

🌐 Producción

• Backend API
  👉 https://trendora-backend-nq5o.onrender.com/api

---

✨ Características principales

• React con Vite
• TypeScript
• UI moderna con Tailwind CSS y shadcn/ui
• Manejo de estado global con Zustand
• Fetching y cacheo de datos con TanStack Query
• Autenticación y roles
• Rutas protegidas con React Router
• Filtros sincronizados con URL (searchParams)
• Formularios con React Hook Form
• Arquitectura modular por dominio
• Separación clara entre admin, auth y shop

---

🛠 Tecnologías utilizadas

Área	Tecnología
Framework	React
Build Tool	Vite
Lenguaje	TypeScript
Estilos	Tailwind CSS, shadcn/ui
Estado global	Zustand
Data fetching	TanStack Query
HTTP Client	Axios
Formularios	React Hook Form
Routing	React Router
Testing	Vitest

---

🧱 Arquitectura del proyecto

src/
├── admin/
│ ├── actions/
│ ├── components/
│ ├── hooks/
│ ├── layouts/
│ └── pages/
│ ├── dashboard/
│ ├── product/
│ └── products/
│
├── api/
│
├── assets/
│
├── auth/
│ ├── actions/
│ ├── interfaces/
│ ├── layouts/
│ ├── pages/
│ │ ├── login/
│ │ └── register/
│ └── store/
│
├── components/
│ ├── custom/
│ ├── routes/
│ └── ui/
│
├── interfaces/
├── lib/
├── mocks/
│
├── shop/
│ ├── actions/
│ ├── components/
│ ├── hooks/
│ ├── layouts/
│ └── pages/
│ ├── gender/
│ ├── home/
│ └── product/
│
├── app.router.tsx
├── index.css
├── main.tsx
└── trendoraApp.tsx

La aplicación sigue una arquitectura basada en dominios, facilitando:

• Escalabilidad
• Reutilización de componentes
• Separación clara de responsabilidades
• Mantenimiento a largo plazo

---

🔐 Autenticación y rutas protegidas

• Autenticación basada en JWT
• Persistencia de sesión
• Protección de rutas según rol
• Separación de layouts públicos y privados

---

🔎 Filtros y navegación

• Filtros sincronizados con la URL usando searchParams
• Navegación compartible (URLs reproducibles)
• Paginación integrada con el estado del router

---

⚙️ Instalación y ejecución

📌 Requisitos

• Node.js >= 18
• npm o yarn

---

📥 Clonar el repositorio

git clone https://github.com/Gerardoprogramer/trendora-frontend.git

cd trendora-frontend

📦 Instalar dependencias

npm install

▶️ Ejecutar en desarrollo

npm run dev

La aplicación estará disponible en:

http://localhost:5173