🖤 Tattoo Studio — Plataforma Web

Sistema completo para estudio de tatuajes con galería interactiva, cotizador inteligente, calendario con sistema de puntos de energía y panel administrativo. Cumple los 150 requerimientos funcionales especificados.

📦 Stack

• Frontend: HTML5 + CSS3 + JavaScript ES6 modules (sin frameworks)
• Backend: Python 3.10+ · FastAPI · SQLAlchemy 2.0 · MySQL · JWT Auth · Pillow · SMTP
• Pagos: Stripe / MercadoPago (configurable)
• Correos: SMTP + 8 templates Jinja2

🏗️ Estructura

tattoo-studio/
├── frontend/                 ← Wireframe blanco listo para PNGs del artista
│   ├── index.html            Web pública
│   ├── admin.html            Panel admin
│   ├── css/
│   │   ├── main.css          Sistema de diseño (variables CSS)
│   │   ├── wireframe.css     Overlay wireframe (eliminar al integrar)
│   │   └── admin.css
│   ├── js/
│   │   ├── app.js
│   │   ├── admin.js
│   │   └── modules/
│   │       ├── api.js
│   │       ├── navbar.js
│   │       ├── carousel.js
│   │       ├── bodyExplorer.js    SVG cuerpo humano (15 zonas)
│   │       ├── gallery.js         Filtros + lightbox
│   │       ├── quote.js           Cotizador
│   │       └── calendar.js        Calendario inteligente
│   └── assets/               ← Aquí van los PNGs del artista
│
├── backend/
│   ├── app/
│   │   ├── main.py
│   │   ├── core/              config, security, deps
│   │   ├── db/
│   │   ├── models/            SQLAlchemy
│   │   ├── schemas/           Pydantic
│   │   ├── api/endpoints/     9 módulos REST
│   │   └── services/          pricing, calendar, mailer, images, scheduler
│   ├── scripts/               init_db, create_admin, seed
│   ├── uploads/
│   ├── requirements.txt
│   └── .env.example
│
└── docs/
    └── REQUIREMENTS.md        Mapeo de los 150 requerimientos

🚀 Instalación

1. Base de datos MySQL

CREATE DATABASE tattoo_studio CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

2. Backend

cd backend
python -m venv venv
source venv/bin/activate        # Windows: venv\Scripts\activate
pip install -r requirements.txt

cp .env.example .env            # editar credenciales
python scripts/init_db.py       # crea tablas
python scripts/create_admin.py  # crea usuario admin (interactivo)
python scripts/seed.py          # opcional: datos prueba

uvicorn app.main:app --reload --port 8000

Docs interactivas: http://localhost:8000/api/docs

3. Frontend

• Opción A: El propio FastAPI lo sirve en http://localhost:8000
• Opción B: VS Code Live Server (puerto 5500, ya permitido en CORS)

🎨 Cómo integrar los PNGs del artista

Tu interfaz actual está en modo wireframe: fondo blanco, bordes punteados, cada elemento etiquetado para que identifiques qué es qué. Cuando el artista exporte sus PNGs:

1. Copia los PNGs en frontend/assets/
2. En css/main.css reemplaza las variables:

   :root {
     --color-bg: #tu-color;
     --color-accent: #acento;
     --font-display: 'FuenteDelArtista', serif;
   }

3. Carga fuentes con @font-face (WOFF2 recomendado)
4. Para botones/fondos con PNG:

   .btn--primary {
     background: url('../assets/btn-primary.png') no-repeat center/cover;
   }

5. Elimina <link rel="stylesheet" href="css/wireframe.css"> de ambos HTML
6. Listo: la interfaz queda lista para producción

🔐 Seguridad incluida

• JWT con expiración + refresh
• Bcrypt (passlib) para contraseñas
• Bloqueo de cuenta tras 5 intentos fallidos (req 98)
• Auto-logout a las 2h de inactividad (req 104)
• Rate limiting (10 cotizaciones/hora)
• CORS restringido por whitelist
• Validación de tipo y tamaño de imágenes subidas (req 58-59)

🧪 Flujo completo de prueba

1. http://localhost:8000
2. Explora galería (filtros + lightbox)
3. Clic en zona del cuerpo → filtra galería (req 16-17)
4. Clic en una imagen → "Quiero uno como este" (req 30, 40)
5. Datos se prellenan en el cotizador (req 21)
6. Completa el formulario → "Ver precio y agendar" (req 65)
7. Aparece el calendario verde/amarillo/rojo (req 79-81)
8. Elige día + turno → "Enviar solicitud" (req 88)
9. Modal con número de ticket (req 89)
10. Login admin: http://localhost:8000/admin.html
11. Aparece la solicitud pendiente → aprobar/rechazar (req 109, 112)
12. Se envía correo automático al cliente (req 141)

📋 Los 150 requerimientos

Ver docs/REQUIREMENTS.md para el mapeo completo.

🔮 Escalabilidad

Diseñado para crecer:

• Nuevo endpoint: crea archivo en app/api/endpoints/, regístralo en router.py
• Nuevo modelo: app/models/ + importar en __init__.py + migraciones con Alembic
• Migrar a Postgres: cambiar DATABASE_URL y driver
• Colas de tareas: reemplazar scheduler simple por Celery + Redis
• CDN de imágenes: reemplazar /uploads/ por S3 en images.py

---

Hecho para que crezca contigo. 🖤