Una aplicación web interactiva, moderna y privada de analíticas para visualizar tu consumo anual de TikTok. Procesa tus datos 100% de forma local en tu navegador a partir de tu archivo oficial de exportación de privacidad (GDPR) de TikTok o mediante el Modo Demo Instantáneo.
-
📱 Experiencia de Historias Interactivas (8 Slide Story Viewer):
- Formato idéntico a las historias de TikTok/Instagram con temporizadores, barras de progreso, pausado táctil y atajos de teclado.
- Efectos de sonido integrados mediante Web Audio API Synthesizer (sin necesidad de archivos de audio externos) y cañón de confeti dinámico en Canvas.
-
🎙️ Narrador de Voz con IA (Web Speech API):
- Sistema de locución en tiempo real con filtrado de voces humanas/naturales en español e inglés, ajuste de cadencia (
0.95x) y prueba de voz.
- Sistema de locución en tiempo real con filtrado de voces humanas/naturales en español e inglés, ajuste de cadencia (
-
⚔️ Modo Duelo / Versus ("TikTok Wrapped Battle"):
- Enfrentamiento cara a cara en 5 rondas (Maratón, Noctambulismo, Búsquedas, Comentarios, Likes) para comparar tus estadísticas contra un amigo (subiendo su archivo JSON) o contra los datos Demo.
- Generación de Tarjeta de Batalla Canvas HD (Retina 2x) lista para descargar o copiar al portapapeles.
-
📅 Calendario de Maratón Anual de 365 Días (Estilo GitHub Contribution Graph):
- Matriz visual interactiva de 52 semanas x 7 días con Tarjeta de Inspección de Cristal (
Detalle del Día) que muestra la fecha exacta, reproducciones e intensidad de consumo (🔥 Maratón Récord, ⚡ Consumo Alto, ☕ Consumo Relajado, Sin actividad).
- Matriz visual interactiva de 52 semanas x 7 días con Tarjeta de Inspección de Cristal (
-
💬 Nube de Palabras & Lore Generator de Comentarios:
- Algoritmo de filtrado de stop-words en español que analiza todos tus comentarios y genera una nube visual interactiva con tus muletillas y palabras más utilizadas.
-
⚙️ Modal Global de Ajustes & Soporte Multi-Idioma (i18n):
- Alterna en tiempo real entre Tema Oscuro (Cyberpunk OLED) y Tema Claro (Neón Glow).
- Cambia toda la interfaz y la locución del narrador entre Español 🇪🇸 y English 🇬🇧.
-
📖 Tutorial Visual Integrado:
- Modal interactivo de 5 pasos que guía al usuario para exportar y descargar su archivo
user_data.jsondirectamente desde la app de TikTok.
- Modal interactivo de 5 pasos que guía al usuario para exportar y descargar su archivo
-
🔍 Analítica de Historial de Búsquedas ("Radar de Curiosidad"):
- Extrae y categoriza tus términos de búsqueda más frecuentes, volumen de consultas y palabras clave más buscadas en TikTok.
-
⏰ Reloj Circadiano de 24 Horas:
- Mapa de calor horario para determinar si eres un Noctámbulo del Feed (22:00 a 04:00) o un Espectador Diurno, junto a tu día de la semana más activo.
-
🧠 Motor de 8 Personalidades TikTok con Porcentaje de Afinidad:
- Clasificación inteligente entre 8 arquetipos distintos (El Detective del Algoritmo, Doomscroller Legendario, El Arquitecto de Comentarios, El Conector Social, Master Streamer VIP, El Distribuidor de Amor, El Coleccionista de Gemas, El Espectador Chill).
-
📊 Radar de Hábitos & Perfil Digital (Scores 0–100):
- Puntuaciones relativas en 5 ejes clave: Tiempo de Maratón, Curiosidad & Búsquedas, Difusión Social, Nivel de Reacción (Likes) e Índice Nocturno.
-
🎨 Tarjeta para Compartir Personalizable en Alta Definición (Retina 2x):
- Renderizado en canvas nativo con 4 temas visuales (Cyberpunk, Neon Gold, Dark OLED, Prism Emerald).
- Descarga en imagen PNG e integración directa para Copiar al Portapapeles en 1 clic (
navigator.clipboard.write).
-
⚡ Modo Demo Instantáneo:
- ¿No tienes tu archivo JSON a mano? Explora la experiencia completa con 1 solo clic cargando un dataset realista generado dinámicamente.
-
🔒 Privacidad Garantizada 100% Client-Side:
- Ningún dato sale de tu dispositivo. El archivo JSON se procesa en la memoria del navegador usando
FileReaderAPI.
- Ningún dato sale de tu dispositivo. El archivo JSON se procesa en la memoria del navegador usando
src/
├── components/
│ ├── DashboardView.jsx # Vista de métricas avanzadas, Heatmap 365 días, Nube de palabras y gráficos
│ ├── FileUploadModal.jsx # Modal Drag & Drop con lector FileReader y cargador Demo
│ ├── SettingsModal.jsx # Modal de Ajustes Globales (Tema Claro/Oscuro, Idioma ES/EN, Narrador de Voz)
│ ├── ShareCardModal.jsx # Renderizador Canvas Retina 2x con paleta de temas y portapapeles
│ ├── StatsCard.jsx # Componente contenedor de estadísticas reutilizable
│ ├── StoryViewer.jsx # Lector de historias con Narrador Web Speech API, Web Audio y Confetti
│ ├── TutorialModal.jsx # Modal de tutorial paso a paso para descargar datos de TikTok
│ └── VersusModal.jsx # Modal de Duelo Versus entre 2 usuarios con tarjeta de batalla Canvas
├── utils/
│ ├── demoData.js # Generador de datos sintéticos realistas para el Modo Demo
│ ├── processData.js # Motor principal de extracción, normalizador, 365-day map y Word Cloud
│ └── translations.js # Diccionario i18n para soporte completo en Español e Inglés
├── App.jsx # Gestión del estado global, temas, idioma y navegabilidad
└── index.css # Sistema de diseño Cyberpunk Glassmorphic con Tailwind v4
Las exportaciones GDPR de TikTok varían según la plataforma (iOS, Android, Web) y el idioma del usuario. El helper extractArray evalúa múltiples rutas fallback de forma segura:
const watchHistory = extractArray(data, [
"Your Activity.Watch History.VideoList",
"Your Activity.Watch History.Video List",
"Activity.Watch History.VideoList",
"Watch History.VideoList"
]);Las reproducciones registradas con un intervalo menor a 30 minutos entre sí se agrupan en una misma "Sesión de Visualización", permitiendo determinar el número total de sesiones, la duración promedio y la sesión más larga (Maratón récord).
| Arquetipo | Criterio de Activación Principal |
|---|---|
| El Detective del Algoritmo 🔍 | Búsquedas activas > 200 consultas |
| Doomscroller Legendario ⚡ | Videos vistos > 10,000 o Tiempo total > 250 horas |
| El Arquitecto de Comentarios ✍️ | Comentarios > 250 o Ratio Comentarios/Likes > 12% |
| El Conector Social 🚀 | Compartidos > 150 o Ratio Shares/Likes > 8% |
| Master Streamer VIP 🎙️ | Directos vistos > 40 o Comentarios en Live > 15 |
| El Distribuidor de Amor 💖 | Me Gusta otorgados > 2,000 |
| El Coleccionista de Gemas 🔖 | Videos guardados en Favoritos > 15 |
| El Espectador Chill ☕ | Perfil de consumo equilibrado y relajado |
El proyecto incluye un entorno Dockerizado de producción en 2 etapas (Multi-stage build con Node 20 Alpine + Nginx Alpine) ultraligero y optimizado.
Ejecuta el contenedor en segundo plano con una sola línea de comando:
docker compose up -dAbre tu navegador en http://localhost:8080.
Para detener el contenedor:
docker compose down-
Construir la imagen de Docker:
docker build -t tiktok-wrapped:latest . -
Iniciar el contenedor:
docker run -d -p 8080:80 --name tiktok_wrapped_app tiktok-wrapped:latest
Abre tu navegador en http://localhost:8080.
- Detener y eliminar el contenedor:
docker stop tiktok_wrapped_app docker rm tiktok_wrapped_app
Para analizar tu propio consumo de TikTok:
- Abre la aplicación de TikTok en tu dispositivo móvil.
- Ve a tu Perfil → Menú de hamburguesa (☰) → Ajustes y privacidad.
- Selecciona Cuenta → Descargar tus datos.
- En el formato de archivo, selecciona JSON (¡Importante: no selecciones TXT!).
- Haz clic en Solicitar datos.
- En 24-48 horas recibirás la notificación para descargar el archivo zip que contiene el
user_data.json.
(También puedes ver este tutorial directamente en la app haciendo clic en el botón "Tutorial").
- Node.js v18 o superior.
- npm o pnpm.
-
Clonar el repositorio (o navegar a la carpeta del proyecto):
cd "tiktokwrapper"
-
Instalar dependencias:
npm install
-
Ejecutar servidor de desarrollo:
npm run dev
Abre http://localhost:5173 en tu navegador.
-
Compilar para producción:
npm run build
- Framework: React 19
- Empaquetador & Dev Server: Vite 7
- Estilos: TailwindCSS v4
- Contenedor: Docker & Nginx Alpine
- Animaciones UI: Framer Motion
- Iconografía: Lucide React
- Síntesis de Voz: Web Speech API (
SpeechSynthesis) - Audio Synthesizer: Web Audio API (
AudioContextSingleton) - Renderizado Canvas: HTML5 Canvas API (Retina 2x)
- Internacionalización: i18n personalizable (ES / EN)
Este proyecto está disponible bajo la licencia MIT. Privado, libre y 100% procesado en el cliente.