GitWire Web

L2BEAT-inspired professional data dashboard for GitHub repository trends
and tech investment insights. Dark/light mode with institutional design.

---

Pages

Route	Page	Description
/	Trends Dashboard	Sortable data table with summary stats, language filter, sparklines
/repo/[id]	Repository Detail	Full metrics, 7-day star chart, repository info, related insights
/insights	Insights Feed	Editorial reviews + investment data (Markdown rendered)
/admin	Admin Panel	Repository URL input, Markdown editor, investment form

Design System

L2BEAT-inspired institutional aesthetic with semantic color system:

Token	Light	Dark	Usage
--positive	#007408	#4eab5e	Star growth, positive indicators
--warning	#ab8000	#d4a72c	Caution states
--negative	#d70000	#ef4444	Decline, negative indicators
--background	#e6e7ec	#1b1b1e	Page background
--surface/card	#fafafa	#222225	Card surfaces

Typography: Roboto (data/UI) + Noto Sans KR (Korean readability) Theme: Dark/light toggle via next-themes

Architecture

flowchart LR
    WEB[gitwire-web<br/>Next.js 15 SSR/ISR] -->|/api/v1/repositories| CORE[gitwire-core<br/>Vercel API]
    WEB -->|/api/v1/insights| CORE
    CORE --> DB[(Supabase)]

Loading

Key decisions:

• No direct DB access — all data via gitwire-core REST API
• ISR (1h revalidation) — fast loads with fresh data
• Client-side sorting/filtering — re-fetches via API on user interaction
• Semantic color tokens — CSS variables for consistent theming

Tech Stack

Layer	Technology
Framework	Next.js 15 (App Router)
Language	TypeScript 5.7
Styling	TailwindCSS 3.4 + Shadcn UI
Theming	next-themes (SSR-safe dark/light)
Markdown	react-markdown + remark-gfm
Icons	Lucide React
Linting	ESLint 9 (flat config)
Hosting	Vercel (ISR enabled)

Getting Started

Prerequisites

• Node.js >= 18
• A running gitwire-core instance

Install & Run

# npm
npm install

# pnpm
pnpm install

cp .env.local.example .env.local   # set your API URL
npm run dev                         # http://localhost:3000
# or
pnpm dev

Environment Variables

Variable	Required	Description
NEXT_PUBLIC_API_URL	Yes	GitWire Core API URL

Pages show dummy data when gitwire-core is not reachable.

Project Structure

src/
├── app/
│   ├── layout.tsx ................ Root layout (Roboto + Noto Sans KR, ThemeProvider)
│   ├── page.tsx .................. Trends dashboard (SSR + ISR)
│   ├── globals.css ............... Design tokens (light/dark CSS variables)
│   ├── repo/[id]/page.tsx ........ Repository detail page
│   ├── insights/page.tsx ......... Insights feed (SSR + ISR)
│   └── admin/page.tsx ............ Admin panel
├── components/
│   ├── navbar.tsx ................ Clean nav with theme toggle
│   ├── repository-dashboard.tsx .. Client dashboard (sort/filter/fetch)
│   ├── repo-table.tsx ............ Full-width sortable data table
│   ├── repo-detail.tsx ........... Repository detail layout
│   ├── sparkline.tsx ............. Inline 80x24 SVG trend line
│   ├── star-chart.tsx ............ Large 7-day SVG trend chart
│   ├── summary-stats.tsx ......... Financial terminal-style stats bar
│   ├── filter-bar.tsx ............ Language filter + time window toggle
│   ├── theme-toggle.tsx .......... Dark/light mode switch
│   ├── insight-card.tsx .......... Insight card (Markdown render)
│   ├── admin-form.tsx ............ Admin input form
│   ├── providers.tsx ............. next-themes ThemeProvider wrapper
│   └── ui/ ....................... Shadcn UI primitives (semantic variants)
├── lib/
│   ├── api.ts .................... API fetch wrappers
│   ├── dummy-data.ts ............. Development dummy data
│   └── utils.ts .................. cn() utility
└── types/
    └── index.ts .................. Shared TypeScript interfaces

Deployment

vercel

Set NEXT_PUBLIC_API_URL in the Vercel dashboard to point to your deployed gitwire-core instance.

Related

• gitwire-core - Backend API & data pipeline
• gitwire-cli - Terminal interface for developers & AI agents

License

MIT