Tech Stack

import { useState, useEffect, useCallback } from 'react'

export default function App() {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(false)
  
  const search = useCallback(async (username) => {
    setLoading(true)
    const data = await getUser(username)
    setUser(data)
    setLoading(false)
  }, [getUser])
  
  return <div>...</div>
}

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts'

export function LanguageChart({ data }) {
  return (
    <ResponsiveContainer width="100%" height={200}>
      <PieChart>
        <Pie
          data={data}
          cx="50%"
          cy="50%"
          innerRadius={55}
          outerRadius={85}
          paddingAngle={2}
          dataKey="value"
        >
          {data.map((entry, i) => (
            <Cell key={entry.name} fill={entry.color} stroke="none" />
          ))}
        </Pie>
        <Tooltip content={<CustomTooltip />} />
      </PieChart>
    </ResponsiveContainer>
  )
}

import { Star, GitFork, Clock } from 'lucide-react'

export function RepoCard({ repo }) {
  return (
    <div>
      <span><Star size={12} /> {repo.stars}</span>
      <span><GitFork size={12} /> {repo.forks}</span>
      <span><Clock size={12} /> {timeAgo(repo.updated_at)}</span>
    </div>
  )
}

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/github-dashboard/',
})

// Old way (React 16)
import React from 'react'
export function Component() { ... }

// New way (React 17+)
export function Component() { ... }  // ✅ No import needed!

npm run deploy
# Internally runs: npm run build && gh-pages -d dist

{
  "homepage": "https://David-Andino.github.io/github-dashboard",
  "scripts": {
    "deploy": "npm run build && gh-pages -d dist"
  }
}

{
  'Accept': 'application/vnd.github+json',
  'Authorization': `Bearer ${token}`  // Optional but recommended
}

x-ratelimit-limit: 5000        // Total limit
x-ratelimit-remaining: 4987    // Requests left
x-ratelimit-reset: 1738560000  // Unix timestamp when resets

const response = await fetch('https://api.github.com/users/torvalds', {
  headers: {
    'Accept': 'application/vnd.github+json',
    'Authorization': 'Bearer ghp_xxxxxxxxxxxx'
  }
})
const user = await response.json()

.header {
  background: var(--bg-card);
  padding: 1rem;
}

.title {
  font-size: 1.5rem;
  color: var(--accent);
}

import styles from './Header.module.css'

export function Header() {
  return (
    <header className={styles.header}>
      <h1 className={styles.title}>GitScope</h1>
    </header>
  )
}

<header class="Header_header__a3f4e">
  <h1 class="Header_title__b7c9d">GitScope</h1>
</header>

:root {
  --bg: #f6f8fa;
  --bg-card: #ffffff;
  --text: #1a2332;
  --accent: #2563eb;
  --border: #e1e7ef;
}

[data-theme="dark"] {
  --bg: #0d1117;
  --bg-card: #161b22;
  --text: #e6edf3;
  --accent: #58a6ff;
  --border: #30363d;
}

.card {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
}

const toggleTheme = () => {
  const newTheme = theme === 'dark' ? 'light' : 'dark'
  document.documentElement.setAttribute('data-theme', newTheme)
  localStorage.setItem('theme', newTheme)
}