Playeras NFC

Aplicación web de e-commerce y landing para la venta de playeras con tecnología NFC. Permite conocer el producto, comprar playeras de equipos de fútbol, recargar saldo (tickets) y gestionar la cuenta, con integración de pagos mediante Stripe.

---

¿Qué hace el proyecto?

• Landing y catálogo: Muestra la propuesta de valor, ventajas de las playeras NFC, catálogo de playeras (América, Chivas, Atlas, Pumas, Tigres, Cruz Azul) y testimonios en carrusel.
• Compra: Flujo de compra con formulario de datos y sección de pago (datos de envío y confirmación).
• Recarga: Recarga de saldo (tickets) asociado a una tarjeta, con búsqueda por número y pago con Stripe (tarjeta).
• Cuenta: Página de cuenta del usuario.
• Soporte: Modal de soporte (controlado por Redux) y modales de tienda y pago.

La interfaz está pensada con un ancho fijo tipo móvil (35% en escritorio) para simular vista de app/tienda móvil.

---

Tecnologías utilizadas

Tecnología	Uso
React 18	UI y componentes
React Router DOM	Rutas (Home, datos de compra, recarga, cuenta)
Redux Toolkit	Estado global (modal soporte, ticket/saldo, página)
React Hook Form	Formularios (datos de compra, validación)
Stripe (@stripe/react-stripe-js, @stripe/stripe-js)	Pagos con tarjeta (recarga y flujo de pago)
Tailwind CSS	Estilos y diseño responsive (colores custom: prussianBlue, celadon)
Font Awesome / React Icons	Iconos
Animate.css	Animaciones en modales y transiciones
Create React App	Scaffolding y scripts de build

---

Estructura del proyecto

PlayerasNFC/
├── public/
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.jsx                 # Contenedor principal (layout 35% + MainRoutes)
│   ├── index.js
│   ├── index.css
│   ├── reportWebVitals.js
│   ├── routes/
│   │   └── MainRoutes.jsx      # Router: NavBar, rutas, Footer
│   ├── Pages/
│   │   ├── Home.jsx            # Landing, productos, testimonios, modales Shop/Soporte
│   │   ├── DataShirt.jsx       # Formulario de pago / datos de compra
│   │   ├── Recharge.jsx        # Recarga de tickets con Stripe
│   │   ├── Account.jsx         # Página de cuenta
│   │   └── Components/
│   │       ├── Button.jsx
│   │       ├── Loader.jsx
│   │       ├── Modal.jsx
│   │       ├── ModalSupport.jsx
│   │       ├── ModalShop.jsx
│   │       └── ModalPayment.jsx
│   ├── Components.jsx/
│   │   ├── NavBar.jsx
│   │   └── Footer.jsx
│   └── store/
│       ├── store.js            # configureStore (mainSlice)
│       └── slices.js           # mainSlice: show, ticket, page
├── tailwind.config.js          # Tema (prussianBlue, celadon, animaciones)
├── package.json
└── README.md

Rutas

Ruta	Página	Descripción
/	Home	Landing, catálogo y testimonios
/datos_compra	DataShirt	Formulario y sección de pago de la compra
/recarga	Recharge	Recarga de saldo con Stripe
/cuenta	Account	Cuenta del usuario

Estado global (Redux)

• show: control del modal de soporte.
• ticket: saldo/tickets del usuario (se actualiza al recargar).
• page: página actual o contexto de navegación.

---

Cómo ejecutarlo

Requisitos

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

Instalación

npm install

Desarrollo

npm start

Abre http://localhost:3000. La app se recarga al guardar cambios.

Build para producción

npm run build

Genera la carpeta build lista para desplegar.

Tests

npm test

Ejecuta el test runner en modo interactivo (Create React App + Jest).

---

Notas

• Stripe: El proyecto usa claves de prueba (pk_test_...). Para producción hay que usar claves live y, si aplica, un backend que cree PaymentIntent y maneje webhooks.
• Datos de tarjetas: En Recharge.jsx hay tarjetas de ejemplo para probar la búsqueda; en producción esto vendría de un backend/API.
• El ancho fijo w-[35%] en App.jsx da un layout tipo “móvil centrado”; puedes ajustarlo o hacerlo 100% para pantalla completa.

---

Licencia

Proyecto privado.