██████╗ ██╗████████╗███████╗ ██████╗ ██████╗ ██████╗ ███████╗
██╔════╝ ██║╚══██╔══╝██╔════╝██╔════╝██╔════╝██╔═══██╗██╔════╝
██║  ███╗██║   ██║   ███████╗██║     ██║     ██║   ██║█████╗  
██║   ██║██║   ██║   ╚════██║██║     ██║     █████║   ██╔══╝  
╚██████╔╝██║   ██║   ███████║╚██████╗╚██████╗██╔╝     ███████╗
 ╚═════╝ ╚═╝   ╚═╝   ╚══════╝ ╚═════╝ ╚═════╝ ═╝       ╚═════╝

Tu identidad de desarrollador, visualizada.

---

🏠 Pantalla de inicio

🔍 Ejemplo de búsqueda

---

¿Qué es GitScope?

GitScope convierte un perfil de GitHub en un dashboard visual. Ingresás un usuario y en segundos ves todo lo que importa: en qué lenguajes programa, qué tan activo es, cuáles son sus repos más populares y cómo se ve su historial de contribuciones.

No es un clon. No es un wrapper de otra herramienta. Es una interfaz construida desde cero para leer la API de GitHub y presentar esos datos de una forma que valga la pena mirar.

---

Lo que hace

📌  Perfil completo         →  avatar, bio, ubicación, estadísticas
🥧  Lenguajes               →  pie chart + barras por porcentaje de uso
📈  Actividad               →  área chart de commits por semana
🗓️  Heatmap                 →  calendario de contribuciones del último año  (requiere token)
⭐  Top repos               →  bar chart horizontal ordenado por stars
🃏  Repo cards              →  grid con lenguaje, stars, forks y topics

---

Stack

Capa	Tecnología	Para qué
Build	Vite 6	Dev server ultrarrápido, HMR instantáneo
UI	React 18	Componentes, estado, renderizado
Tipado	TypeScript 5	Tipos para toda la respuesta de la API de GitHub
Estilos	Tailwind CSS v3	Utility-first, sin CSS suelto
Gráficas	Recharts	AreaChart, BarChart, PieChart responsivos
Animaciones	Framer Motion	Stagger de entrada, hover states, transiciones
Data fetching	React Query v5	Caché, loading states, sin useEffect para fetch
HTTP	Axios	Cliente para REST y GraphQL
Heatmap	react-calendar-heatmap	Calendario de contribuciones
Deploy	Vercel	CI/CD automático desde GitHub

---

APIs consumidas

GitHub REST API — pública, sin autenticación para uso básico

GET /users/{username}               →  perfil del usuario
GET /users/{username}/repos         →  lista de repositorios
GET /users/{username}/events        →  actividad reciente
GET /repos/{owner}/{repo}/languages →  bytes por lenguaje

GitHub GraphQL API — requiere Personal Access Token

query ContributionCalendar($username: String!) {
  user(login: $username) {
    contributionsCollection {
      contributionCalendar {
        totalContributions
        weeks {
          contributionDays { date contributionCount color }
        }
      }
    }
  }
}

Sin token la app funciona completa excepto el heatmap. Con token: 5 000 requests/hora y calendario desbloqueado.

---

Arquitectura

src/
├── config/env.ts          ←  único punto de acceso a variables de entorno
├── api/
│   ├── githubRest.ts      ←  todas las llamadas REST
│   └── githubGraphQL.ts   ←  query de contribuciones
├── hooks/                 ←  React Query wrapping cada endpoint
├── components/
│   ├── charts/            ←  Recharts + lógica de presentación
│   ├── profile/           ←  ProfileCard, StatsRow
│   ├── repos/             ←  RepoCard
│   └── ui/                ←  Badge, Spinner, ErrorMessage
└── pages/
    ├── Home.tsx           ←  búsqueda inicial
    └── Dashboard.tsx      ←  resultado completo

Ningún componente toca axios directamente. Todo el fetching vive en src/api/, todo el estado de servidor en src/hooks/. Los componentes solo consumen datos ya procesados.

---

Diseño

Dark mode como base. Tipografía Syne para display y JetBrains Mono para stats y handles. Acento en verde #4ade80 sobre fondos #0a0a0a. Sin gradientes de fondo genéricos — grid sutil y profundidad por capas de superficie.

Las animaciones están pensadas: una entrada escalonada al cargar el dashboard, micro-interacciones en hover de cards, y las gráficas hacen scale de 0 → 1 al aparecer en pantalla.

---

Qué aprendí / qué demuestra

• Consumo de REST API y GraphQL en el mismo proyecto
• React Query para manejo de caché, loading y error states sin código repetitivo
• Transformación de datos crudos de API en estructuras listas para graficar
• Buenas prácticas de seguridad: variables de entorno, .env en .gitignore, .env.example versionado
• Arquitectura de capas: api → hooks → components
• Deploy en Vercel con environment variables en producción

---

hecho con demasiado café · JUXCHXX