Tesegunda (Ventitas)

Marketplace de productos de segunda mano desarrollado con React. Permite a los usuarios registrarse, iniciar sesión, ver y añadir productos al carrito, y a los vendedores publicar sus artículos.

¿Qué hace el proyecto?

• Catálogo de productos: Muestra productos de segunda mano (electrónicos, moda, etc.) con imagen, precio, descripción y datos del vendedor.
• Registro e inicio de sesión: Los usuarios pueden registrarse (nombre, correo, teléfono, contraseña) e iniciar sesión para poder comprar.
• Carrito de compras: Los usuarios autenticados pueden añadir productos al carrito, ver resumen (cantidad y total) y proceder a “Comprar” (con modal de pago).
• Publicar productos: Usuarios logueados pueden subir nuevos productos (nombre, tipo, precio, descripción e imagen).
• Rutas según autenticación: Si no estás logueado ves Home, Registro, Login y Términos; si estás logueado ves Home, Añadir producto y Carrito.

Cómo funciona

1. Estado global (Redux): Se usa Redux Toolkit para manejar auth, user, products, car (carrito) y show (modal de usuario). Los productos iniciales y los añadidos se guardan en el store.
2. Rutas: React Router define las rutas. Según auth se muestran unas u otras (ver MainRoutes.jsx).
3. Flujo de compra: En Home se listan los productos; al hacer clic en “Añadir al carrito” se despacha setCar(product). Solo usuarios logueados pueden añadir. En /carrito se ve el listado, el resumen y el botón “Comprar”, que abre un modal de pago.
4. Formularios: Registro, Login y Añadir producto usan react-hook-form para validación y envío. En registro hay validación de nombre (solo letras) y contraseñas.
5. Datos: Por ahora no hay backend; usuarios y productos viven en el store de Redux (los productos iniciales están en slices.js). El “pago” es solo la apertura del modal.

Tecnologías utilizadas

Tecnología	Uso
React (18.x)	Interfaz y componentes
Redux Toolkit	Estado global (auth, usuario, productos, carrito)
React Router DOM (v6)	Navegación y rutas condicionales
Tailwind CSS	Estilos y tema (incl. paleta custom alabaster)
React Hook Form	Formularios (registro, login, añadir producto)
Font Awesome (React)	Iconos (carrito, usuario, ojo, candado, etc.)
Create React App	Scaffolding y scripts de desarrollo/build

Estructura del proyecto (resumen)

src/
├── App.jsx                 # Punto de entrada, renderiza MainRoutes
├── index.js                # ReactDOM + Provider de Redux
├── routes/
│   └── MainRoutes.jsx      # Router, Header, Footer y rutas según auth
├── pages/
│   ├── Home.jsx            # Listado de productos y “Añadir al carrito”
│   ├── Login.jsx           # Inicio de sesión
│   ├── Register.jsx        # Registro de usuario
│   ├── CarPage.jsx         # Carrito y resumen de compra
│   ├── AddProduct.jsx      # Formulario para subir producto
│   └── Terminos.jsx        # Página de términos
├── Components/
│   ├── Header.jsx          # Logo, título “Tesegunda”, carrito, usuario
│   ├── Footer.jsx          # Pie de página
│   ├── HiddenUser.jsx      # Componente de usuario (oculto por defecto)
│   ├── Modal.jsx           # Modal reutilizable
│   └── ModalPayment.jsx    # Modal “Proceder a Pago”
├── store/
│   ├── store.js            # configureStore con mainSlice
│   └── slices.js           # mainSlice: estado y reducers (auth, user, products, car)
└── assets/                 # Imágenes (logo, productos, etc.)

Requisitos previos

• Node.js (recomendado v18 o superior)
• npm o yarn

Instalación y ejecución

# Clonar el repositorio (si aplica) y entrar al proyecto
cd TeseVenta

# Instalar dependencias
npm install

# Modo desarrollo (abre http://localhost:3000)
npm start

# Build de producción
npm run build

# Ejecutar tests
npm test

Scripts disponibles

Comando	Descripción
npm start	Arranca la app en modo desarrollo en http://localhost:3000.
npm run build	Genera la versión de producción en la carpeta build.
npm test	Lanza el test runner en modo interactivo.
npm run eject	Expone la configuración de CRA (irreversible).

Notas

• Este proyecto se creó con Create React App.
• La autenticación y los datos son solo en frontend (Redux); no hay persistencia en base de datos ni API real. Ideal para prototipo o práctica.