|
| 1 | +# Architecture |
| 2 | + |
| 3 | +## 1. High-Level Architecture |
| 4 | + |
| 5 | +Browser -> Next.js App (Vercel) |
| 6 | + |-- /app/page.tsx Landing page |
| 7 | + |-- /app/dashboard/page.tsx Dashboard (auth-guarded) |
| 8 | + +-- /app/api/ |
| 9 | + |-- auth/[...nextauth]/ GitHub OAuth |
| 10 | + |-- metrics/contributions/ Commit activity |
| 11 | + |-- metrics/prs/ PR analytics |
| 12 | + |-- metrics/streak/ Commit streak |
| 13 | + |-- metrics/repos/ Top repositories |
| 14 | + +-- goals/ Supabase weekly goals |
| 15 | + |
| 16 | +## 2. Folder Structure |
| 17 | + |
| 18 | +devtrack/ |
| 19 | +|-- src/ |
| 20 | +| |-- app/ |
| 21 | +| | |-- api/ |
| 22 | +| | | |-- auth/[...nextauth]/ # GitHub OAuth |
| 23 | +| | | |-- metrics/contributions/ # GET commit activity |
| 24 | +| | | |-- metrics/prs/ # GET PR analytics |
| 25 | +| | | |-- metrics/streak/ # GET commit streak |
| 26 | +| | | |-- metrics/repos/ # GET top repositories |
| 27 | +| | | +-- goals/ # GET + POST weekly goals |
| 28 | +| | |-- dashboard/page.tsx # Main dashboard |
| 29 | +| | +-- page.tsx # Landing page |
| 30 | +| |-- components/ |
| 31 | +| | |-- ContributionGraph.tsx |
| 32 | +| | |-- PRMetrics.tsx |
| 33 | +| | |-- GoalTracker.tsx |
| 34 | +| | |-- StreakTracker.tsx |
| 35 | +| | |-- TopRepos.tsx |
| 36 | +| | +-- DashboardHeader.tsx |
| 37 | +| +-- lib/ |
| 38 | +| |-- auth.ts # NextAuth config |
| 39 | +| +-- supabase.ts # Supabase admin client |
| 40 | +|-- supabase/schema.sql |
| 41 | ++-- .github/workflows/ci.yml |
| 42 | + |
| 43 | +## 3. Data Flow |
| 44 | + |
| 45 | +User visits /dashboard |
| 46 | + -> NextAuth checks session |
| 47 | + -> no session: redirect to / |
| 48 | + -> session ok: render dashboard |
| 49 | + |
| 50 | +Each component fetches its own API route: |
| 51 | + ContributionGraph -> GET /api/metrics/contributions -> GitHub GraphQL -> Recharts |
| 52 | + StreakTracker -> GET /api/metrics/streak |
| 53 | + PRMetrics -> GET /api/metrics/prs |
| 54 | + TopRepos -> GET /api/metrics/repos |
| 55 | + GoalTracker -> GET/POST /api/goals (Supabase) |
| 56 | + |
| 57 | +## 4. State Management |
| 58 | + |
| 59 | +No global state library is used. |
| 60 | +- Each widget manages its own data via useEffect + fetch |
| 61 | +- Loading/error states are local useState per component |
| 62 | +- Auth state comes from NextAuth.js SessionProvider (React context) |
| 63 | +- Goal state is re-fetched after every POST |
| 64 | + |
| 65 | +## 5. Key Components |
| 66 | + |
| 67 | +| Component | Responsibility | |
| 68 | +|---|---| |
| 69 | +| ContributionGraph.tsx | Commit activity bar chart, time range selector | |
| 70 | +| StreakTracker.tsx | Current streak, longest streak, active days | |
| 71 | +| PRMetrics.tsx | Avg review time, merge rate, open/closed PR counts | |
| 72 | +| TopRepos.tsx | Repositories ranked by commit activity | |
| 73 | +| GoalTracker.tsx | Weekly goals via Supabase, progress bars | |
| 74 | +| DashboardHeader.tsx | User avatar, name, sign-out button | |
| 75 | +| lib/auth.ts | NextAuth config, Supabase user upsert on login | |
| 76 | +| lib/supabase.ts | Supabase admin client for server-side operations | |
| 77 | + |
| 78 | +## 6. Environment Variables |
| 79 | + |
| 80 | +| Variable | Purpose | |
| 81 | +|---|---| |
| 82 | +| NEXT_PUBLIC_SUPABASE_URL | Supabase project URL | |
| 83 | +| NEXT_PUBLIC_SUPABASE_ANON_KEY | Supabase anon key | |
| 84 | +| SUPABASE_SERVICE_ROLE_KEY | Server-only key, bypasses RLS | |
| 85 | +| NEXTAUTH_URL | Full app URL | |
| 86 | +| NEXTAUTH_SECRET | Random secret for NextAuth JWTs | |
| 87 | +| GITHUB_ID | GitHub OAuth App Client ID | |
| 88 | +| GITHUB_SECRET | GitHub OAuth App Client Secret | |
| 89 | + |
| 90 | +See .env.example for a ready-to-fill template. |
0 commit comments