Build a GitHub star tracker

To build a GitHub star tracker, you can create a simple web app that fetches and displays star count data for repositories. Here’s a full implementation using React (frontend) and GitHub’s REST API:

Features:

• Search for any GitHub repository.

• Display current star count.

• Optional: Show star count trends over time using a simple chart (requires backend or local storage).

1. Frontend (React + TailwindCSS)

javascript
CopyEdit
// File: App.jsx
import React, { useState } from "react";
import axios from "axios";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

export default function App() {
  const [repo, setRepo] = useState("");
  const [starCount, setStarCount] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchStars = async () => {
    setLoading(true);
    setError(null);
    try {
      const [owner, name] = repo.split("/");
      const res = await axios.get(`https://api.github.com/repos/${owner}/${name}`);
      setStarCount(res.data.stargazers_count);
    } catch (err) {
      setError("Failed to fetch repository. Check the format (e.g., vercel/next.js)");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 p-4">
      <Card className="w-full max-w-md p-4 shadow-xl rounded-2xl">
        <CardContent className="space-y-4">
          <h1 className="text-2xl font-bold text-center">GitHub Star Tracker</h1>
          <Input
            placeholder="Enter repository (e.g., vercel/next.js)"
            value={repo}
            onChange={(e) => setRepo(e.target.value)}
          />
          <Button onClick={fetchStars} disabled={loading || !repo}>
            {loading ? "Loading..." : "Get Star Count"}
          </Button>
          {starCount !== null && (
            <div className="text-center text-lg font-semibold">
              ⭐ {starCount.toLocaleString()} Stars
            </div>
          )}
          {error && <p className="text-red-500 text-sm text-center">{error}</p>}
        </CardContent>
      </Card>
    </div>
  );
}

2. Styling and Component Setup

Use TailwindCSS for styling. Add these to your React project setup:

Install dependencies:

bash
CopyEdit
npm install axios
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Add Tailwind to tailwind.config.js:

js
CopyEdit
module.exports = {
  content: ["./src/**/*.{js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add Tailwind to your CSS (src/index.css):

css
CopyEdit
@tailwind base;
@tailwind components;
@tailwind utilities;

3. Optional: Track Star History (Requires Backend)

You could create a simple backend (Node.js or Python) to store daily star counts in a database and then render charts using Recharts or Chart.js on the frontend.

Backend pseudocode example:

js
CopyEdit
// node.js + cron job
GET https://api.github.com/repos/:owner/:repo
→ store stargazers_count + timestamp in DB

Frontend could then show trends:

jsx
CopyEdit
<LineChart data={starHistory}>...</LineChart>

4. Deployment Suggestions

• Use Vercel or Netlify for deploying the frontend.

• Add a .env file for GitHub API token if needed (for higher rate limits).

Let me know if you want the backend added or enhanced charting features.