MradulKSharma06/fullstack

Desarrollo Web Full-Stack y Arquitectura Ciber-Resiliente

Bienvenido al manual de ingeniería definitivo y al sistema de tecnología creativa para construir aplicaciones web full-stack modernas. Esta habilidad te prepara para desempeñarte simultáneamente como un Tecnólogo Creativo, un Arquitecto Full-Stack Principal y un Director de Seguridad.

---

Navegación Rápida y Arquitectura del Conocimiento

Esta habilidad utiliza la Arquitectura de Divulgación Progresiva de Antigravity. El orquestador principal a continuación proporciona los flujos de trabajo maestros, las taxonomías de arquetipos de sitio, los árboles de decisión y los protocolos de aislamiento de fallos. Para implementaciones de dominio profundo, consulte inmediatamente los manuales de referencia especializados enlazados a continuación:

#	Manual de Dominio	Capacidades Principales y Contenido de Referencia
01	Identidad Visual y Ciencia del Color	Síntesis de diseño de 50 sitios, tokens Obsidian/Alabaster, matemática armónica Oklch 60-30-10, curvas de contraste, reglas de cero-neón.
02	Tipografía Curada y Familias de Fuentes	Serifas de alto contraste, neo-grotescas, carga de fuentes variables, ecuaciones fluidas clamp, optimización de CLS cero.
03	Canvas WebGL 3D Inmersivo y R3F	React Three Fiber, Drei, OGL para WebGL móvil primero, campos de partículas Pixi.js, maquetas de cámara, sujeción de DPR, mallas LOD.
04	Biblioteca de Shaders GLSL Personalizados	Desplazamiento arquitectónico de nubes de puntos, ondas de agua Gerstner en tiempo real, cáusticas de vidrio, grano de película analógico.
05	Orquestación de Movimiento Cinético y Desplazamiento	Sincronización de ticker de desplazamiento suave de Lenis, líneas de tiempo de GSAP ScrollTrigger, resortes físicos de Motion One y Framer Motion.
06	Sistema de Diseño de Componentes de UI Personalizados	Botones líquidos magnéticos, menús desplegables de resorte, tarjetas bento iluminadas, muelles HUD táctiles, esqueletos shimmer.
07	Arquitectura Limpia y Aislamiento de Errores	Arquitectura de Slice Vertical (VSA), contención de radio de explosión de un solo archivo, código mínimo de 10 líneas, comentarios de seniors.
08	Maestría en Bases de Datos: PostgreSQL y Supabase	Modelado relacional 3NF, UUIDv7, índices GIN JSONB, vistas materializadas con actualización concurrente, RLS hermética.
09	Maestría en Bases de Datos: MySQL y SQLite	Índices agrupados InnoDB de MySQL, poda de particiones, pragmas WAL de SQLite / Turso / D1, esquemas estrictos de borde.
10	Autenticación, Identidad y SSO Empresarial	OAuth2, Passkeys / WebAuthn, cookies de sesión HttpOnly, huella digital, MFA, matrices RBAC/ABAC, SAML SSO.
11	Pagos, Facturación y Suscripciones	Stripe, Lemon Squeezy, Paddle, PayPal, Elementos personalizados, webhooks idempotentes, máquinas de estado de suscripción.
12	Chatbot de IA y Motor RAG en Streaming	Streaming SSE de Gemini 2.0 / OpenAI, RAG pgvector, ejecución de herramientas agénticas, poda de conversación, UI de chat en markdown.
13	WebSockets en Tiempo Real y Presencia	Supabase Realtime, WebSockets nativos, Pusher, canales de presencia, indicadores de escritura, retrocesos de UI optimistas.
14	Pipelines de Almacenamiento y Procesamiento Multimedia	PUT prefirmado de almacenamiento directo (S3/R2/Supabase), cargas fragmentadas, pipelines de imágenes Sharp serverless AVIF/WebP.
15	Trabajadores en Segundo Plano, Colas y Cron	BullMQ con Redis, Inngest, Trigger.dev, retroceso exponencial con jitter, colas de mensajes fallidos (DLQ).
16	Motores de Búsqueda y Descubrimiento	Meilisearch, Typesense, Algolia, tsvector de PostgreSQL con coincidencia difusa pg_trgm y clasificación BM25.
17	Notificaciones por Email, SMS y Push	Resend + React Email, SendGrid, Twilio SMS, service workers de Web Push VAPID, centros multicanal Novu / Knock.
18	Pruebas, QA y Diagnóstico Automatizado	Pruebas unitarias Vitest, pruebas de integración contenerizadas, pruebas E2E multidispositivo Playwright, diff de píxeles, pruebas de carga k6.
19	Endurecimiento de Seguridad y Anti-Hacking	Mitigación de OWASP Top 10, CSP con nonces dinámicos por solicitud, defensa SSRF, cifrado AES-256-GCM, registros de auditoría a prueba de manipulaciones.
20	Caché Multinivel y Ultra-Rendimiento	Caché de navegador HTTP/ETag/Workbox, Etiquetas de Caché de Edge/CDN, Redis Cache-Aside y Redlock, ajuste de búfer de base de datos.
21	Escalabilidad, Límite de Tasa y Colas	Algoritmo de ventana deslizante de Redis, limitación de tasa de cubeta de tokens, autoescalado horizontal/vertical de pods (HPA/VPA).
22	DevOps: Docker, Kubernetes y CI/CD	Docker multi-etapa sin distribución (<80MB, no root), manifiestos de Kubernetes HPA/VPA, CI/CD de GitHub Actions con cero tiempo de inactividad.
23	Observabilidad, Registro y Telemetría	Trazado distribuido con OpenTelemetry, seguimiento de errores de Sentry con mapas de origen, análisis de PostHog, logs JSON estructurados.

---

1. Los Mandamientos Principales de Ingeniería

Cada línea de código y decisión arquitectónica en un proyecto full-stack debe adherirse a estos cinco mandamientos no negociables:

Mandamiento I: Artesanía No Genérica y a Medida (El Estándar de los 50 Sitios)

• Cero Plantillas Genéricas: Nunca generar héroes estándar de 2 columnas sin inspiración con fotografía de stock y botones predeterminados.
• Clichés Visuales Prohibidos: Prohibir estrictamente las manchas neón púrpura/cian, los bordes de degradado arcoíris y las estéticas "cyberpunk de IA" sobresaturadas.
• La Estética de Producto Moderna: Codificar la restricción de diseño de los 50 mejores productos del mundo (Linear, Stripe, Apple, Teenage Engineering, Vercel, Raycast, Aesop, Bang & Olufsen, Arc, Framer):
  • Modo Oscuro: Obsidiana profunda (#09090B), grafito titanio (#18181B), zinc apagado (#27272A), texto blanco nítido (#F4F4F5) y micro-bordes de 1px (border-white/[0.08]).
  • Modo Claro: Alabastro de museo cálido (#FBFBF9), blanco hueso (#F4F4F0), tipografía de carbón táctil (#18181B) y líneas finas sutiles de 1px (border-black/[0.06]).
  • Profundidad: Sombras de oclusión ambiental difusa multicapa (box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06)).

Mandamiento II: Código Mínimo e Idiomático ("10 Líneas en lugar de 100")

• Nunca escribir boilerplate inflado y multicapa con DTOs redundantes, clases de mapeo manual verbosas o abstracciones artificiales.
• Aprovechar TypeScript 5+ moderno, inferencia de esquemas Zod, consultas expresivas de Drizzle/Prisma y pipelines funcionales ligeros.
• Si una tarea se puede resolver de manera robusta en 10 líneas de código idiomático, nunca escribir 100 líneas.

Mandamiento III: Aislamiento de Radio de Explosión de un Solo Archivo Desacoplado

• Organizar el código en Slices Verticales / Módulos de Característica (src/modules/<feature>/), nunca en vertederos horizontales donde los archivos se dispersan en controllers/, services/, models/, utils/.
• Cada módulo de característica es autocontenido con su propio esquema, servicio, rutas y adaptadores externos.
• Regla Estricta para Correcciones de Errores y Refactorización: Cuando ocurre un error (por ejemplo, en webhooks de pago de Stripe o una consulta de base de datos), la modificación debe confinarse estrictamente al único archivo de adaptador o servicio afectado. El resto de la base de código debe tener cero efectos colaterales.

Mandamiento IV: Comentarios Reales de Desarrollador Sénior (El "Por Qué", no el "Qué")

• Relleno de IA Prohibido: Nunca generar comentarios inútiles como // Función para obtener datos o // Devuelve una promesa.
• Comentario de Desarrollador Sénior: Cada comentario debe explicar compensaciones arquitectónicas, invariantes de concurrencia, justificación de casos extremos, presupuestos de rendimiento o consideraciones de seguridad.
• Ejemplo:

  // Protección de concurrencia: Uso de limitación de tasa de ventana deslizante basada en Redis antes de acceder
  // al pool de conexiones de la base de datos para evitar el agotamiento de conexiones durante picos de ventas flash.
  

Mandamiento V: Seguridad a Prueba de Hackeos y Ciber-Resiliente por Defecto

• Tratar cada entrada como maliciosa. Aplicar análisis estricto de Zod en cada límite de API.
• Todas las consultas de base de datos deben estar vinculadas a parámetros o compiladas por AST por un ORM (cero concatenación de cadenas).
• Implementar Política de Seguridad de Contenido (CSP) con nonces criptográficos dinámicos por solicitud, tokens CSRF de doble envío, CORS estricto y bloqueo de IP privada contra SSRF.
• La PII sensible debe cifrarse en reposo usando AES-256-GCM; las contraseñas deben hashearse usando Argon2id.

---

2. Matriz de Clasificación de Arquetipos de Sitio

Antes de escribir una sola línea de código frontend, clasifique el proyecto del usuario en su arquetipo visual principal:

┌────────────────────────────────────────────────────────────────────────────────────────┐
│                             SELECTOR DE ARQUETIPO DE SITIO                            │
├────────────────────┬────────────────────────────────────┬──────────────────────────────┤
| Arquetipo          | Experiencia Canvas 3D y WebGL     | Tipografía y Paleta de Color |
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
| 1. Arquitectura,   | Wireframe de nube de puntos CAD   | Mono geométrico de alto      |
|    Espacial y Diseño| Three.js a pantalla completa;     | contraste + neo-grotesca     |
|    (Alder & Stone) | rotación interactiva del ratón;    | (Cabinet Grotesk / Space     |
|                    | superposición HUD de coordenadas;  | Mono); Obsidiana profunda    |
|                    | líneas de cuadrícula arquitectónicas.| con gris titanio.            |
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
| 2. Producto de Lujo,| Ondas de agua GLSL en tiempo real| Serif editorial de alto      |
|    Sensorial y     | con ondas Gerstner; pétalos        | contraste (Cormorant / Ogg) + |
|    E-com (Lotus    | orgánicos 3D en floración; frasco  | sans minimalista; Alabastro  |
|    Mist)           | de vidrio levitante con shaders de | cálido, piedra ruborizada u  |
|                    | transmisión física.                | obsidiana crepuscular.       |
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
| 3. Fintech y SaaS  | Inclinación de tarjeta 3D basada  | Sans técnica de filo         |
|    Moderno (Crest  | en física con seguimiento giroscópico| (Geist, Satoshi, Inter) +    |
|    Card)           | del ratón; reflejos de malla       | micro mono; Grafito          |
|                    | dinámicos; tarjetas de borde       | monocromático con esmeralda/ |
|                    | iluminado bento interactivas.      | cobalto de punto único.      |
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
| 4. Agencia Vanguardista| Distorsión de partículas      | Pantalla cinética            |
|    y Creativa      | fluidas WebGL interactivas; cursor | experimental (Syne, Clash    |
|                    | magnético flotante; secciones de   | Display); Negro azabache con |
|                    | desplazamiento horizontal inercial | superposiciones de papel     |
|                    | fijado con Lenis.                  | crudo táctil blanco.         |
└────────────────────┴────────────────────────────────────┴──────────────────────────────┘

---

3. El Flujo de Trabajo de Ejecución Full-Stack en 8 Etapas

Siga este riguroso pipeline de desarrollo de extremo a extremo para cada proyecto:

Etapa 1: Descubrimiento y Derivación de Tokens Armónicos

1. Identificar el arquetipo del sitio y la personalidad de la marca.
2. Obtener o seleccionar 2-3 colores semilla (por ejemplo, Primario #0A0A0C, Acento #2563EB).
3. Ejecutar la matemática de color Oklch 60-30-10 de Referencia 01 para generar los árboles de tokens de diseño completos para Modo Claro y Oscuro.
4. Establecer la jerarquía tipográfica de Referencia 02 con fórmulas fluidas clamp.

Etapa 2: Esquema de Base de Datos y Modelado Relacional

1. Dibujar el Diagrama de Entidad-Relación (ERD) mapeando entidades, claves externas y cardinalidades.
2. Formular un esquema normalizado 3NF con redundancia mínima.
3. Seleccionar el motor de base de datos (PostgreSQL/Supabase vs MySQL vs SQLite) y aplicar los patrones específicos del motor de Referencia 08 o Referencia 09.
4. Escribir migraciones DDL idempotentes que presenten UUIDv7, TIMESTAMPTZ, índices GIN JSONB, vistas analíticas y políticas de Seguridad a Nivel de Fila (RLS).

Etapa 3: Andamiaje Backend de Slice Vertical Desacoplado

1. Andamiar slices de característica en src/modules/<feature>/ según Referencia 07.
2. Definir contratos de validación de entrada/salida con Zod.
3. Escribir funciones de servicio ligeras de 10 líneas utilizando constructores de consultas modernos (Drizzle ORM / Prisma).
4. Envolver pasarelas externas (Stripe, Resend, S3) en archivos de adaptador aislados para garantizar la contención del radio de explosión de un solo archivo.

Etapa 4: Integración de Canvas 3D, Shaders y Movimiento Cinético

1. Configurar el Canvas interactivo con React Three Fiber, Drei u OGL de Referencia 03.
2. Implementar shaders GLSL personalizados (nube de puntos, agua líquida, refracción de vidrio) de Referencia 04.
3. Inicializar el desplazamiento suave de Lenis sincronizado con el ticker de GSAP y los resortes físicos de Framer Motion de Referencia 05.

Etapa 5: Composición de Componentes de UI Personalizados

1. Ensamblar el shell de la UI utilizando componentes personalizados de Referencia 06.
2. Implementar botones líquidos magnéticos, menús desplegables de resorte renderizados en portal, tarjetas bento iluminadas y [truncado para traducción]