Pepe Pixel Year no es el típico tracker anual de "querido diario, hoy estoy triste". Es una aplicación web progresiva (PWA) diseñada para registrar el LORE de tu vida diaria con la estética de internet que mereces y en español.
⚠️ Nota del Dev: Este proyecto es un experimento fan y custom creado para poner a prueba las capacidades de la API de Google GenAI (usando los modelosGemini 3 Flashy2.5 Flash Image) integrado con GitHub y Vercel.
Olvídate de las caritas sonrientes aburridas. Aquí medimos la vida en niveles de Pepe: desde "Rage" hasta "Legendario". Y lo mejor: Pepe el Oráculo analizará tus vivencias para darte un diagnóstico brutalmente honesto, un soundtrack para tu miseria (o éxito) y logros desbloqueables llenos de referencias pop.
- 📅 Calendario de Lore: Visualización anual completa con mapa de calor, scroll fluido y navegación por meses.
- ⚡ Quick Log (Menú Radial): ¿Tienes prisa? Mantén pulsado (Long Press) cualquier día para invocar el menú radial y registrar tu mood en 1 segundo.
- 🐸 Niveles de Mood: 6 niveles de estado de ánimo con GIFs animados de Pepe y paletas de colores neón.
- ✨ Pepe Magic Studio: La IA genera un meme de Pepe único basado en tu nota del día usando
Gemini 2.5 Flash Image. (Experimental: a veces Pepe está durmiendo la siesta). - ⚖️ El Tribunal (IA): Elige entre Roast Mode (sarcasmo puro y duro) o Love Mode (motivación wholesome). La IA leerá tus registros y dictará sentencia.
- 🏆 Logros Pop Culture: Sistema de gamificación con referencias a Taylor Swift, Linkin Park, Pokémon, Prison Break y más.
- ☁️ Pepe Mindset: Una nube de conceptos interactiva que agrupa tus temas recurrentes semánticamente.
- 🔍 Buscador de Lore: Encuentra qué día dijiste que ibas a empezar el gimnasio.
- 🎨 Estética Cyber-Meme:
- Modo Píxel: Transforma las partículas en arte de 8-bits.
- Modo Ahorro: Para cuando tu batería pide clemencia.
- 🔊 ASMR de UI: Efectos de sonido satisfactorios (Web Audio API) para cada interacción (pop, click, magic, trash).
- 💾 Tus datos son tuyos: Exporta e importa copias de seguridad en JSON localmente.
Este proyecto ha sido forjado con las herramientas más frescas del mercado:
- Core: React 19 + TypeScript.
- Build Tool: Vite (Rapidísimo).
- Estilos: Tailwind CSS + Lucide Icons + Animaciones CSS Custom.
- IA & Generación:
Gemini 3 Flash Preview(Texto y Análisis).Gemini 2.5 Flash Image(Generación de Memes).- SDK
@google/genai.
- Gráficos: Recharts (Area, Radar, Pie charts).
- PWA: Instalable en móvil y escritorio.
¿Quieres correr esto en tu máquina local? Sigue el tutorial, compañero:
-
Clona el repositorio:
git clone https://github.com/JuanmaWL/PepeMoodTracker.git cd PepeMoodTracker -
Instala las dependencias:
npm install
-
Configura la API Key: Crea un archivo
.enven la raíz y añade tu clave de Google AI Studio:VITE_PEPE_MOOD_KEY=tu_api_key_aqui
-
Arranca el servidor:
npm run dev
Si lo subes a Vercel o Netlify, asegúrate de configurar las variables de entorno en el panel de control de la plataforma:
| Variable | Descripción |
|---|---|
VITE_PEPE_MOOD_KEY |
Tu API Key de Google Gemini (AI Studio). |
Visualiza tu año en píxeles y mapa de calor.
Elige tu mood, escribe tu historia o genera un meme mágico.
| Estadísticas Detalladas | El Juicio del Oráculo |
|---|---|
| Gráficos de evolución y filtros | Diagnóstico y Soundtrack |
![]() |
![]() |
| Buscador de Lore | Pepe Mindset (Nube) |
|---|---|
| Encuentra tus recuerdos | Tus obsesiones visualizadas |
![]() |
![]() |
Developed with 🐸 by Juasmio
"Feels Good Man"






