初始化 GitHub Trending 项目收藏器

功能：每日抓取 GitHub Top 10 趋势项目，展示中文描述、功能摘要与安装命令，支持用户收藏，未收藏项目 7 天后自动删除。技术栈：Node.js + Express + SQLite / React + Vite + Tailwind CSS Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-03 23:44:14 +08:00 · 2026-05-03 23:44:14 +08:00 · 34ce3a3cf9
commit 34ce3a3cf9
33 changed files with 6036 additions and 0 deletions
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,2 @@
+GITHUB_TOKEN=
+PORT=3001
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+node_modules/
+data/
+.env
+frontend/dist/
--- a/README.md
+++ b/README.md
@ -0,0 +1,76 @@
+# GitHub Trending 项目收藏器
+
+每日自动抓取 GitHub 热度最高的 10 个项目，展示功能介绍与安装代码，支持收藏保存，未收藏项目 7 天后自动删除。
+
+## 快速启动
+
+### 方式一：生产模式（单端口，推荐 demo）
+
+```bash
+# 1. 安装依赖
+npm run install:all
+
+# 2. 构建前端
+npm run build
+
+# 3. 启动服务
+npm start
+```
+
+访问 → **http://localhost:3001**
+
+---
+
+### 方式二：开发模式（热更新）
+
+```bash
+npm run install:all
+npm run dev
+```
+
+- 前端：http://localhost:5173（热更新）
+- 后端 API：http://localhost:3001
+
+---
+
+## 可选配置
+
+添加 GitHub Token 可将 API 速率限制从 60次/小时 提升至 5000次/小时：
+
+```bash
+cp .env.example .env
+# 编辑 .env，填入 GITHUB_TOKEN=ghp_xxx
+```
+
+---
+
+## 功能说明
+
+| 功能 | 说明 |
+|------|------|
+| 自动抓取 | 每天凌晨 2:00 自动抓取 GitHub 当日 Top 10 趋势项目 |
+| 手动刷新 | 点击页面右上角「↻ 刷新」按钮立即触发抓取 |
+| 功能摘要 | 自动从 README 提取功能介绍段落 |
+| 安装代码 | 自动从 README 提取安装/快速开始代码块 |
+| 收藏保存 | 点击「☆ Save」收藏项目，收藏后永久保留 |
+| 自动删除 | 未收藏的项目在首次抓取 7 天后自动删除 |
+| 删除倒计时 | 卡片上显示「⏱ Auto-deletes in Nd」徽章 |
+| 筛选标签 | All Repos / Today's Trending / Favorites 三个视图 |
+
+## API 接口
+
+```
+GET  /api/repos?filter=all|today|favorites  # 获取项目列表
+GET  /api/repos/:id                          # 获取单个项目
+POST /api/repos/:id/favorite                 # 收藏
+DELETE /api/repos/:id/favorite               # 取消收藏
+GET  /api/stats                              # 统计数据
+POST /api/scrape                             # 手动触发抓取
+```
+
+## 技术栈
+
+- **后端**：Node.js + Express + SQLite (better-sqlite3)
+- **前端**：React + Vite + Tailwind CSS
+- **抓取**：cheerio 解析 github.com/trending + GitHub REST API
+- **调度**：node-cron 每日定时任务
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
--- a/backend/package.json
+++ b/backend/package.json
@ -0,0 +1,19 @@
+{
+  "name": "github-trending-backend",
+  "version": "1.0.0",
+  "private": true,
+  "main": "src/server.js",
+  "scripts": {
+    "dev": "node --watch src/server.js",
+    "start": "node src/server.js"
+  },
+  "dependencies": {
+    "axios": "^1.7.9",
+    "better-sqlite3": "^11.7.0",
+    "cheerio": "^1.0.0",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.7",
+    "express": "^4.21.2",
+    "node-cron": "^3.0.3"
+  }
+}
--- a/backend/src/cleanup.js
+++ b/backend/src/cleanup.js
@ -0,0 +1,15 @@
+const db = require('./db');
+
+function cleanup() {
+  const result = db.prepare(`
+    DELETE FROM repositories
+    WHERE is_favorited = 0
+      AND date(first_fetched_at) <= date('now', '-7 days')
+  `).run();
+
+  if (result.changes > 0) {
+    console.log(`[cleanup] Deleted ${result.changes} unfavorited repo(s) older than 7 days`);
+  }
+}
+
+module.exports = { cleanup };
--- a/backend/src/db.js
+++ b/backend/src/db.js
@ -0,0 +1,37 @@
+const Database = require('better-sqlite3');
+const path = require('path');
+const fs = require('fs');
+
+const dataDir = path.join(__dirname, '../../data');
+if (!fs.existsSync(dataDir)) fs.mkdirSync(dataDir, { recursive: true });
+
+const db = new Database(path.join(dataDir, 'github_trending.db'));
+
+db.pragma('journal_mode = WAL');
+db.pragma('foreign_keys = ON');
+
+db.exec(`
+  CREATE TABLE IF NOT EXISTS repositories (
+    id                INTEGER PRIMARY KEY AUTOINCREMENT,
+    full_name         TEXT    NOT NULL UNIQUE,
+    name              TEXT    NOT NULL,
+    owner             TEXT    NOT NULL,
+    description       TEXT,
+    language          TEXT,
+    stars             INTEGER NOT NULL DEFAULT 0,
+    html_url          TEXT    NOT NULL,
+    avatar_url        TEXT,
+    features_summary  TEXT,
+    install_code      TEXT,
+    first_fetched_at  TEXT NOT NULL,
+    last_fetched_at   TEXT NOT NULL,
+    is_favorited      INTEGER NOT NULL DEFAULT 0,
+    favorited_at      TEXT,
+    created_at        TEXT NOT NULL DEFAULT (datetime('now'))
+  );
+
+  CREATE INDEX IF NOT EXISTS idx_repos_favorited  ON repositories(is_favorited);
+  CREATE INDEX IF NOT EXISTS idx_repos_fetched_at ON repositories(first_fetched_at);
+`);
+
+module.exports = db;
--- a/backend/src/routes/admin.js
+++ b/backend/src/routes/admin.js
@ -0,0 +1,14 @@
+const { scrape } = require('../scraper');
+const { cleanup } = require('../cleanup');
+
+async function triggerScrape(req, res) {
+  try {
+    await scrape();
+    cleanup();
+    res.json({ success: true, message: 'Scrape completed' });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+}
+
+module.exports = { triggerScrape };
--- a/backend/src/routes/favorites.js
+++ b/backend/src/routes/favorites.js
@ -0,0 +1,27 @@
+const db = require('../db');
+
+function favorite(req, res) {
+  const row = db.prepare('SELECT id FROM repositories WHERE id = ?').get(req.params.id);
+  if (!row) return res.status(404).json({ error: 'Not found' });
+
+  db.prepare(`
+    UPDATE repositories SET is_favorited = 1, favorited_at = datetime('now')
+    WHERE id = ?
+  `).run(req.params.id);
+
+  res.json({ success: true });
+}
+
+function unfavorite(req, res) {
+  const row = db.prepare('SELECT id FROM repositories WHERE id = ?').get(req.params.id);
+  if (!row) return res.status(404).json({ error: 'Not found' });
+
+  db.prepare(`
+    UPDATE repositories SET is_favorited = 0, favorited_at = NULL
+    WHERE id = ?
+  `).run(req.params.id);
+
+  res.json({ success: true });
+}
+
+module.exports = { favorite, unfavorite };
--- a/backend/src/routes/repos.js
+++ b/backend/src/routes/repos.js
@ -0,0 +1,59 @@
+const db = require('../db');
+
+function computeDaysUntilDeletion(row) {
+  if (row.is_favorited) return null;
+  const first = new Date(row.first_fetched_at);
+  const now = new Date();
+  const daysSince = Math.floor((now - first) / (1000 * 60 * 60 * 24));
+  return Math.max(0, 7 - daysSince);
+}
+
+function formatRepo(row) {
+  return { ...row, days_until_deletion: computeDaysUntilDeletion(row) };
+}
+
+function getRepos(req, res) {
+  const filter = req.query.filter || 'all';
+  let rows;
+
+  if (filter === 'today') {
+    rows = db.prepare(`
+      SELECT * FROM repositories
+      WHERE date(last_fetched_at) = date('now')
+      ORDER BY stars DESC
+    `).all();
+  } else if (filter === 'favorites') {
+    rows = db.prepare(`
+      SELECT * FROM repositories
+      WHERE is_favorited = 1
+      ORDER BY favorited_at DESC
+    `).all();
+  } else {
+    rows = db.prepare(`
+      SELECT * FROM repositories
+      ORDER BY stars DESC
+    `).all();
+  }
+
+  res.json(rows.map(formatRepo));
+}
+
+function getRepo(req, res) {
+  const row = db.prepare('SELECT * FROM repositories WHERE id = ?').get(req.params.id);
+  if (!row) return res.status(404).json({ error: 'Not found' });
+  res.json(formatRepo(row));
+}
+
+function getStats(req, res) {
+  const total = db.prepare('SELECT COUNT(*) as count FROM repositories').get().count;
+  const favorited = db.prepare('SELECT COUNT(*) as count FROM repositories WHERE is_favorited = 1').get().count;
+  const pendingDeletion = db.prepare(`
+    SELECT COUNT(*) as count FROM repositories
+    WHERE is_favorited = 0
+      AND date(first_fetched_at) <= date('now', '-6 days')
+  `).get().count;
+
+  res.json({ total, favorited, pendingDeletion });
+}
+
+module.exports = { getRepos, getRepo, getStats };
--- a/backend/src/scheduler.js
+++ b/backend/src/scheduler.js
@ -0,0 +1,23 @@
+const cron = require('node-cron');
+const { scrape } = require('./scraper');
+const { cleanup } = require('./cleanup');
+
+async function runJob() {
+  try {
+    await scrape();
+    cleanup();
+  } catch (err) {
+    console.error('[scheduler] Job failed:', err.message);
+  }
+}
+
+function initScheduler() {
+  // Run daily at 2:00 AM
+  cron.schedule('0 2 * * *', runJob);
+  console.log('[scheduler] Daily scrape scheduled at 02:00');
+
+  // Run once immediately on startup
+  runJob();
+}
+
+module.exports = { initScheduler };
--- a/backend/src/scraper.js
+++ b/backend/src/scraper.js
@ -0,0 +1,178 @@
+const axios = require('axios');
+const cheerio = require('cheerio');
+const db = require('./db');
+const { translate } = require('./translate');
+
+const TRENDING_URL = 'https://github.com/trending?since=daily';
+const README_URL = (owner, repo) => `https://api.github.com/repos/${owner}/${repo}/readme`;
+
+function buildHeaders() {
+  const headers = { 'User-Agent': 'github-trending-app/1.0' };
+  if (process.env.GITHUB_TOKEN) {
+    headers['Authorization'] = `token ${process.env.GITHUB_TOKEN}`;
+  }
+  return headers;
+}
+
+async function fetchTrending() {
+  const res = await axios.get(TRENDING_URL, {
+    headers: {
+      'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36',
+      'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
+      'Accept-Language': 'en-US,en;q=0.5',
+    },
+    timeout: 30000,
+  });
+  const $ = cheerio.load(res.data);
+  const repos = [];
+
+  $('article.Box-row').slice(0, 10).each((_, el) => {
+    const $el = $(el);
+    const href = $el.find('h2 a').attr('href') || '';
+    const parts = href.replace(/^\//, '').split('/').filter(Boolean);
+    const [owner, name] = parts;
+    if (!owner || !name) return;
+
+    const descEl = $el.find('p').first();
+    const description = descEl.text().trim() || null;
+
+    const starsText = $el.find('a[href$="/stargazers"]').first().text().replace(/,/g, '').trim();
+    const stars = parseInt(starsText, 10) || 0;
+
+    const language = $el.find('span[itemprop="programmingLanguage"]').text().trim() || null;
+
+    repos.push({ owner, name, full_name: `${owner}/${name}`, description, stars, language });
+  });
+
+  return repos;
+}
+
+async function fetchReadme(owner, repo) {
+  try {
+    const res = await axios.get(README_URL(owner, repo), {
+      headers: buildHeaders(),
+      timeout: 10000,
+    });
+    const content = Buffer.from(res.data.content, 'base64').toString('utf-8');
+    return content;
+  } catch {
+    return null;
+  }
+}
+
+// 候选标题关键词：英文 + 中文 + emoji前缀容忍
+const FEATURES_RE = /^#{1,3}[^#\n]*(?:features?|highlights?|overview|about|what is|why|introduction|capabilities|framework|skills?|development|功能|特性|特点|介绍|亮点)[^#\n]*/im;
+
+function extractSection(readme, headingMatch) {
+  const start = readme.indexOf(headingMatch) + headingMatch.length;
+  const nextHeading = readme.slice(start).search(/^#{1,3}\s/m);
+  const section = nextHeading === -1
+    ? readme.slice(start)
+    : readme.slice(start, start + nextHeading);
+  return section
+    .replace(/```[\s\S]*?```/g, '')
+    .replace(/!\[.*?\]\(.*?\)/g, '')
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+    .replace(/[*_`#>\-|]/g, '')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .slice(0, 500) || null;
+}
+
+function extractFeaturesSection(readme, description) {
+  if (!readme) return description || null;
+
+  // 优先匹配功能相关标题
+  const match = readme.match(FEATURES_RE);
+  if (match) {
+    const result = extractSection(readme, match[0]);
+    if (result && result.length > 20) return result;
+  }
+
+  // 兜底：取README正文第一段有意义的文字（跳过徽章行）
+  const lines = readme.split('\n');
+  const paragraphs = [];
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith('#') || trimmed.startsWith('!') || trimmed.startsWith('[!') || trimmed.startsWith('<')) continue;
+    if (trimmed.startsWith('[![') || trimmed.match(/^\[!\[/)) continue;
+    if (trimmed.length > 40) paragraphs.push(trimmed);
+    if (paragraphs.length >= 3) break;
+  }
+  const fallback = paragraphs.join(' ').replace(/\s+/g, ' ').trim().slice(0, 500);
+  return fallback.length > 20 ? fallback : (description || null);
+}
+
+function extractInstallCode(readme) {
+  if (!readme) return null;
+  const installMatch = readme.match(
+    /#{1,3}\s*(?:install(?:ation)?|setup|getting[- ]started|quick[- ]start)\b[^\n]*/i
+  );
+  const searchFrom = installMatch
+    ? readme.indexOf(installMatch[0])
+    : 0;
+  const slice = readme.slice(searchFrom);
+  const codeMatch = slice.match(/```[^\n]*\n([\s\S]*?)```/);
+  return codeMatch ? codeMatch[1].trim() : null;
+}
+
+async function fetchOwnerAvatar(owner) {
+  try {
+    const res = await axios.get(`https://api.github.com/users/${owner}`, {
+      headers: buildHeaders(),
+      timeout: 5000,
+    });
+    return res.data.avatar_url || null;
+  } catch {
+    return null;
+  }
+}
+
+const upsert = db.prepare(`
+  INSERT INTO repositories
+    (full_name, name, owner, description, language, stars, html_url, avatar_url,
+     features_summary, install_code, first_fetched_at, last_fetched_at)
+  VALUES
+    (@full_name, @name, @owner, @description, @language, @stars, @html_url, @avatar_url,
+     @features_summary, @install_code, date('now'), date('now'))
+  ON CONFLICT(full_name) DO UPDATE SET
+    stars            = excluded.stars,
+    description      = excluded.description,
+    language         = excluded.language,
+    avatar_url       = excluded.avatar_url,
+    features_summary = excluded.features_summary,
+    install_code     = excluded.install_code,
+    last_fetched_at  = excluded.last_fetched_at
+`);
+
+async function scrape() {
+  console.log('[scraper] Starting scrape...');
+  const repos = await fetchTrending();
+  console.log(`[scraper] Found ${repos.length} trending repos`);
+
+  for (const repo of repos) {
+    const readme = await fetchReadme(repo.owner, repo.name);
+    const avatar_url = await fetchOwnerAvatar(repo.owner);
+    const features_summary_raw = extractFeaturesSection(readme, repo.description);
+    const install_code = extractInstallCode(readme);
+
+    const [description_zh, features_summary] = await Promise.all([
+      translate(repo.description),
+      translate(features_summary_raw),
+    ]);
+
+    upsert.run({
+      ...repo,
+      description: description_zh,
+      html_url: `https://github.com/${repo.full_name}`,
+      avatar_url,
+      features_summary,
+      install_code,
+    });
+    console.log(`[scraper] Saved ${repo.full_name}`);
+  }
+
+  console.log('[scraper] Done.');
+}
+
+module.exports = { scrape };
--- a/backend/src/server.js
+++ b/backend/src/server.js
@ -0,0 +1,33 @@
+require('dotenv').config({ path: require('path').join(__dirname, '../../.env') });
+
+const express = require('express');
+const cors = require('cors');
+const path = require('path');
+const { getRepos, getRepo, getStats } = require('./routes/repos');
+const { favorite, unfavorite } = require('./routes/favorites');
+const { triggerScrape } = require('./routes/admin');
+const { initScheduler } = require('./scheduler');
+
+const app = express();
+const PORT = process.env.PORT || 3001;
+
+app.use(cors());
+app.use(express.json());
+
+app.get('/api/repos', getRepos);
+app.get('/api/stats', getStats);
+app.get('/api/repos/:id', getRepo);
+app.post('/api/repos/:id/favorite', favorite);
+app.delete('/api/repos/:id/favorite', unfavorite);
+app.post('/api/scrape', triggerScrape);
+
+const frontendDist = path.join(__dirname, '../../frontend/dist');
+app.use(express.static(frontendDist));
+app.get('*', (req, res) => {
+  res.sendFile(path.join(frontendDist, 'index.html'));
+});
+
+app.listen(PORT, () => {
+  console.log(`[server] Running on http://localhost:${PORT}`);
+  initScheduler();
+});
--- a/backend/src/translate.js
+++ b/backend/src/translate.js
@ -0,0 +1,36 @@
+const axios = require('axios');
+
+const CJK_RE = /[一-鿿㐀-䶿]/;
+const HTML_TAG_RE = /<[^>]{1,100}>/g;
+
+function cleanText(text) {
+  if (!text) return text;
+  return text
+    .replace(HTML_TAG_RE, ' ')   // 去除 HTML 标签
+    .replace(/&[a-z]+;/gi, ' ')  // 去除 HTML 实体
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+async function translate(text) {
+  const cleaned = cleanText(text);
+  if (!cleaned || cleaned.length < 5) return cleaned || text;
+  if (CJK_RE.test(cleaned)) return cleaned; // 已含中文，跳过
+
+  try {
+    const res = await axios.get('https://api.mymemory.translated.net/get', {
+      params: { q: cleaned.slice(0, 500), langpair: 'en|zh-CN' },
+      headers: { 'User-Agent': 'github-trending-app/1.0' },
+      timeout: 10000,
+    });
+    const translated = res.data?.responseData?.translatedText;
+    if (!translated || translated === cleaned || translated.startsWith('PLEASE SELECT')) {
+      return cleaned;
+    }
+    return translated.trim();
+  } catch {
+    return cleaned; // 失败静默降级，返回清理后原文
+  }
+}
+
+module.exports = { translate };
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GitHub Trending</title>
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔥</text></svg>" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,22 @@
+{
+  "name": "github-trending-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 5173",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17",
+    "vite": "^6.0.7"
+  }
+}
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@ -0,0 +1,127 @@
+import { useState, useEffect } from 'react';
+import { FilterBar } from './components/FilterBar.jsx';
+import { RepoCard } from './components/RepoCard.jsx';
+import { useRepos } from './hooks/useRepos.js';
+import { fetchStats, triggerScrape } from './api.js';
+
+export default function App() {
+  const [filter, setFilter] = useState('all');
+  const [stats, setStats] = useState(null);
+  const [scraping, setScraping] = useState(false);
+  const { repos, loading, error, reload, toggleFavorite } = useRepos(filter);
+
+  const loadStats = async () => {
+    try {
+      const s = await fetchStats();
+      setStats(s);
+    } catch {}
+  };
+
+  useEffect(() => { loadStats(); }, [repos]);
+
+  const handleToggleFavorite = async (id, current) => {
+    await toggleFavorite(id, current);
+    loadStats();
+  };
+
+  const handleScrape = async () => {
+    setScraping(true);
+    try {
+      await triggerScrape();
+      await reload();
+    } finally {
+      setScraping(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen" style={{ background: 'var(--surface-0)' }}>
+      {/* Ambient background glow */}
+      <div className="fixed inset-0 pointer-events-none overflow-hidden" aria-hidden>
+        <div className="absolute top-[-20%] left-[10%] w-[600px] h-[600px] rounded-full opacity-[0.03]"
+          style={{ background: 'radial-gradient(circle, #00e5a0 0%, transparent 70%)' }} />
+        <div className="absolute top-[30%] right-[-5%] w-[400px] h-[400px] rounded-full opacity-[0.025]"
+          style={{ background: 'radial-gradient(circle, #4f8ef7 0%, transparent 70%)' }} />
+      </div>
+
+      <header className="sticky top-0 z-20 backdrop-blur-xl" style={{ borderBottom: '1px solid var(--border)', background: 'rgba(6,8,16,0.85)' }}>
+        <div className="max-w-5xl mx-auto px-5 py-3.5 flex items-center justify-between gap-4">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 rounded-xl flex items-center justify-center text-base flex-shrink-0"
+              style={{ background: 'linear-gradient(135deg, rgba(0,229,160,0.2), rgba(0,229,160,0.05))', border: '1px solid rgba(0,229,160,0.25)' }}>
+              🔥
+            </div>
+            <div>
+              <h1 className="text-sm font-bold tracking-tight" style={{ color: 'var(--text-1)' }}>
+                github<span style={{ color: 'var(--accent)' }}>.</span>趋势
+              </h1>
+              <p className="text-xs" style={{ color: 'var(--text-3)' }}>每日 Top 10 · 自动更新</p>
+            </div>
+          </div>
+          <button
+            onClick={handleScrape}
+            disabled={scraping}
+            className="btn disabled:opacity-40 disabled:cursor-not-allowed"
+            style={{
+              background: scraping ? 'transparent' : 'var(--accent-dim)',
+              borderColor: 'var(--accent-border)',
+              color: scraping ? 'var(--text-2)' : 'var(--accent)',
+            }}
+          >
+            <span className={scraping ? 'animate-spin' : ''} style={{ display: 'inline-block' }}>↻</span>
+            {scraping ? 'scraping…' : '刷新'}
+          </button>
+        </div>
+      </header>
+
+      <main className="max-w-5xl mx-auto px-5 py-7">
+        <div className="mb-7">
+          <FilterBar active={filter} onChange={setFilter} stats={stats} />
+        </div>
+
+        {loading && (
+          <div className="flex flex-col items-center justify-center py-24 gap-3">
+            <div className="flex gap-1">
+              {[0,1,2].map(i => (
+                <span key={i} className="w-1.5 h-1.5 rounded-full animate-bounce"
+                  style={{ background: 'var(--accent)', animationDelay: `${i * 150}ms` }} />
+              ))}
+            </div>
+            <span className="text-xs" style={{ color: 'var(--text-3)' }}>正在获取项目…</span>
+          </div>
+        )}
+
+        {error && (
+          <div className="flex flex-col items-center justify-center py-24 gap-3">
+            <span className="text-2xl">⚠</span>
+            <p className="text-sm" style={{ color: '#f87171' }}>加载失败：{error}</p>
+            <button onClick={reload} className="text-xs" style={{ color: 'var(--accent)' }}>重试 →</button>
+          </div>
+        )}
+
+        {!loading && !error && repos.length === 0 && (
+          <div className="flex flex-col items-center justify-center py-24 gap-3">
+            <span className="text-3xl opacity-30">{filter === 'favorites' ? '☆' : '⊙'}</span>
+            <p className="text-sm text-center max-w-xs" style={{ color: 'var(--text-3)' }}>
+              {filter === 'favorites'
+                ? '还没有收藏的项目，点击星标收藏吧'
+                : '暂无数据，点击刷新抓取今日趋势'}
+            </p>
+          </div>
+        )}
+
+        {!loading && !error && repos.length > 0 && (
+          <div className="grid gap-4 lg:grid-cols-2">
+            {repos.map(repo => (
+              <RepoCard
+                key={repo.id}
+                repo={repo}
+                onToggleFavorite={handleToggleFavorite}
+              />
+            ))}
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@ -0,0 +1,26 @@
+const BASE = '/api';
+
+export async function fetchRepos(filter = 'all') {
+  const res = await fetch(`${BASE}/repos?filter=${filter}`);
+  if (!res.ok) throw new Error('Failed to fetch repos');
+  return res.json();
+}
+
+export async function fetchStats() {
+  const res = await fetch(`${BASE}/stats`);
+  if (!res.ok) throw new Error('Failed to fetch stats');
+  return res.json();
+}
+
+export async function setFavorite(id, value) {
+  const method = value ? 'POST' : 'DELETE';
+  const res = await fetch(`${BASE}/repos/${id}/favorite`, { method });
+  if (!res.ok) throw new Error('Failed to update favorite');
+  return res.json();
+}
+
+export async function triggerScrape() {
+  const res = await fetch(`${BASE}/scrape`, { method: 'POST' });
+  if (!res.ok) throw new Error('Scrape failed');
+  return res.json();
+}
--- a/frontend/src/components/CodeBlock.jsx
+++ b/frontend/src/components/CodeBlock.jsx
@ -0,0 +1,45 @@
+import { useState } from 'react';
+
+export function CodeBlock({ code }) {
+  const [copied, setCopied] = useState(false);
+
+  if (!code) return null;
+
+  const copy = () => {
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  return (
+    <div className="rounded-xl overflow-hidden" style={{ border: '1px solid var(--border)' }}>
+      <div className="flex items-center justify-between px-3 py-2"
+        style={{ background: 'var(--surface-3)', borderBottom: '1px solid var(--border)' }}>
+        <div className="flex items-center gap-1.5">
+          <span className="w-2 h-2 rounded-full" style={{ background: '#ff5f57' }} />
+          <span className="w-2 h-2 rounded-full" style={{ background: '#febc2e' }} />
+          <span className="w-2 h-2 rounded-full" style={{ background: '#28c840' }} />
+          <span className="text-xs ml-2 font-medium" style={{ color: 'var(--text-3)' }}>安装命令</span>
+        </div>
+        <button
+          onClick={copy}
+          className="text-xs font-medium transition-colors duration-150 px-2 py-0.5 rounded"
+          style={copied ? {
+            color: 'var(--accent)',
+            background: 'var(--accent-dim)',
+          } : {
+            color: 'var(--text-3)',
+          }}
+          onMouseEnter={e => { if (!copied) e.currentTarget.style.color = 'var(--text-1)'; }}
+          onMouseLeave={e => { if (!copied) e.currentTarget.style.color = 'var(--text-3)'; }}
+        >
+          {copied ? '✓ 已复制' : '复制'}
+        </button>
+      </div>
+      <pre className="p-4 text-xs overflow-x-auto leading-relaxed" style={{ background: '#070b12', color: '#00e5a0', fontFamily: 'inherit' }}>
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}
--- a/frontend/src/components/DeletionBadge.jsx
+++ b/frontend/src/components/DeletionBadge.jsx
@ -0,0 +1,25 @@
+export function DeletionBadge({ daysUntilDeletion }) {
+  if (daysUntilDeletion === null || daysUntilDeletion === undefined) return null;
+
+  const urgent = daysUntilDeletion <= 2;
+  const label = daysUntilDeletion === 0
+    ? '今日删除'
+    : `${daysUntilDeletion} 天后删除`;
+
+  return (
+    <span
+      className="badge"
+      style={urgent ? {
+        background: 'rgba(239,68,68,0.08)',
+        border: '1px solid rgba(239,68,68,0.25)',
+        color: '#f87171',
+      } : {
+        background: 'rgba(251,191,36,0.06)',
+        border: '1px solid rgba(251,191,36,0.18)',
+        color: '#d97706',
+      }}
+    >
+      ⏱ {label}
+    </span>
+  );
+}
--- a/frontend/src/components/FavoriteButton.jsx
+++ b/frontend/src/components/FavoriteButton.jsx
@ -0,0 +1,33 @@
+export function FavoriteButton({ isFavorited, onClick }) {
+  return (
+    <button
+      onClick={onClick}
+      title={isFavorited ? '取消收藏' : '收藏此项目'}
+      className="btn flex-shrink-0 transition-all duration-200"
+      style={isFavorited ? {
+        background: 'rgba(0,229,160,0.08)',
+        borderColor: 'rgba(0,229,160,0.3)',
+        color: 'var(--accent)',
+      } : {
+        background: 'var(--surface-3)',
+        borderColor: 'var(--border)',
+        color: 'var(--text-2)',
+      }}
+      onMouseEnter={e => {
+        if (!isFavorited) {
+          e.currentTarget.style.borderColor = 'rgba(0,229,160,0.25)';
+          e.currentTarget.style.color = 'var(--accent)';
+        }
+      }}
+      onMouseLeave={e => {
+        if (!isFavorited) {
+          e.currentTarget.style.borderColor = 'var(--border)';
+          e.currentTarget.style.color = 'var(--text-2)';
+        }
+      }}
+    >
+      <span>{isFavorited ? '★' : '☆'}</span>
+      {isFavorited ? '已收藏' : '收藏'}
+    </button>
+  );
+}
--- a/frontend/src/components/FeaturesPanel.jsx
+++ b/frontend/src/components/FeaturesPanel.jsx
@ -0,0 +1,27 @@
+import { useState } from 'react';
+
+export function FeaturesPanel({ summary }) {
+  const [expanded, setExpanded] = useState(false);
+
+  if (!summary) return null;
+
+  const isLong = summary.length > 150;
+  const displayed = !isLong || expanded ? summary : summary.slice(0, 150) + '…';
+
+  return (
+    <div className="pl-3 py-1" style={{ borderLeft: '2px solid rgba(0,229,160,0.2)' }}>
+      <p className="text-xs leading-relaxed" style={{ color: 'var(--text-2)' }}>{displayed}</p>
+      {isLong && (
+        <button
+          onClick={() => setExpanded(e => !e)}
+          className="text-xs mt-1 font-medium transition-colors duration-150"
+          style={{ color: 'var(--accent)', opacity: 0.7 }}
+          onMouseEnter={e => e.currentTarget.style.opacity = '1'}
+          onMouseLeave={e => e.currentTarget.style.opacity = '0.7'}
+        >
+          {expanded ? '↑ 收起' : '↓ 展开'}
+        </button>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/components/FilterBar.jsx
+++ b/frontend/src/components/FilterBar.jsx
@ -0,0 +1,45 @@
+export function FilterBar({ active, onChange, stats }) {
+  const tabs = [
+    { key: 'all', label: '全部项目', icon: '⊞' },
+    { key: 'today', label: '今日趋势', icon: '▲' },
+    { key: 'favorites', label: '已收藏', icon: '★' },
+  ];
+
+  return (
+    <div className="flex items-center gap-2 flex-wrap">
+      <div className="flex items-center gap-1 p-1 rounded-xl" style={{ background: 'var(--surface-2)', border: '1px solid var(--border)' }}>
+        {tabs.map(tab => (
+          <button
+            key={tab.key}
+            onClick={() => onChange(tab.key)}
+            className="tab flex items-center gap-1.5"
+            style={active === tab.key ? {
+              background: 'var(--accent-dim)',
+              border: '1px solid var(--accent-border)',
+              color: 'var(--accent)',
+            } : {
+              background: 'transparent',
+              border: '1px solid transparent',
+              color: 'var(--text-2)',
+            }}
+          >
+            <span className="text-xs opacity-70">{tab.icon}</span>
+            {tab.label}
+            {tab.key === 'favorites' && stats?.favorited > 0 && (
+              <span className="text-xs px-1.5 py-0 rounded-md font-bold"
+                style={{ background: 'rgba(0,229,160,0.15)', color: 'var(--accent)' }}>
+                {stats.favorited}
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+      {stats?.pendingDeletion > 0 && (
+        <span className="text-xs px-2 py-1 rounded-lg"
+          style={{ background: 'rgba(251,191,36,0.08)', border: '1px solid rgba(251,191,36,0.2)', color: '#fbbf24' }}>
+          ⚠ {stats.pendingDeletion} 个即将过期
+        </span>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/components/RepoCard.jsx
+++ b/frontend/src/components/RepoCard.jsx
@ -0,0 +1,120 @@
+import { FavoriteButton } from './FavoriteButton.jsx';
+import { DeletionBadge } from './DeletionBadge.jsx';
+import { CodeBlock } from './CodeBlock.jsx';
+import { FeaturesPanel } from './FeaturesPanel.jsx';
+
+const LANG_COLORS = {
+  JavaScript: '#f0db4f',
+  TypeScript: '#3178c6',
+  Python: '#3572a5',
+  Go: '#00acd7',
+  Rust: '#dea584',
+  Java: '#b07219',
+  'C++': '#f34b7d',
+  C: '#555555',
+  Ruby: '#701516',
+  Swift: '#f05138',
+  Kotlin: '#a97bff',
+  PHP: '#4f5d95',
+  Shell: '#89e051',
+  Nix: '#7e7eff',
+};
+
+function formatStars(n) {
+  if (n >= 1000) return (n / 1000).toFixed(1) + 'k';
+  return String(n);
+}
+
+export function RepoCard({ repo, onToggleFavorite }) {
+  const langColor = LANG_COLORS[repo.language] || '#4a5568';
+
+  return (
+    <div className="card group">
+      {/* Top row: avatar + name + favorite */}
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex items-center gap-3 min-w-0">
+          {repo.avatar_url ? (
+            <img
+              src={repo.avatar_url}
+              alt={repo.owner}
+              className="w-10 h-10 rounded-xl flex-shrink-0 ring-1"
+              style={{ ringColor: 'var(--border)' }}
+            />
+          ) : (
+            <div className="w-10 h-10 rounded-xl flex-shrink-0 flex items-center justify-center text-lg"
+              style={{ background: 'var(--surface-3)', border: '1px solid var(--border)' }}>
+              ⬡
+            </div>
+          )}
+          <div className="min-w-0 flex-1">
+            <a
+              href={repo.html_url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-bold text-sm tracking-tight block truncate transition-colors duration-150"
+              style={{ color: 'var(--text-1)' }}
+              onMouseEnter={e => e.currentTarget.style.color = 'var(--accent)'}
+              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-1)'}
+            >
+              <span style={{ color: 'var(--text-2)', fontWeight: 400 }}>{repo.owner}</span>
+              <span style={{ color: 'var(--text-3)' }}>/</span>
+              <span>{repo.name}</span>
+            </a>
+            {repo.description && (
+              <p className="text-xs mt-0.5 line-clamp-2 leading-relaxed" style={{ color: 'var(--text-2)' }}>
+                {repo.description}
+              </p>
+            )}
+          </div>
+        </div>
+        <FavoriteButton
+          isFavorited={!!repo.is_favorited}
+          onClick={() => onToggleFavorite(repo.id, !!repo.is_favorited)}
+        />
+      </div>
+
+      {/* Meta row: language + stars + badges */}
+      <div className="flex items-center gap-3 flex-wrap" style={{ borderTop: '1px solid var(--border)', paddingTop: '12px' }}>
+        {repo.language && (
+          <span className="flex items-center gap-1.5 text-xs" style={{ color: 'var(--text-2)' }}>
+            <span className="w-2 h-2 rounded-full flex-shrink-0" style={{ background: langColor, boxShadow: `0 0 6px ${langColor}66` }} />
+            {repo.language}
+          </span>
+        )}
+        <span className="flex items-center gap-1 text-xs" style={{ color: 'var(--text-2)' }}>
+          <span style={{ color: '#fbbf24' }}>★</span>
+          <span className="font-medium">{formatStars(repo.stars)}</span>
+        </span>
+        {!repo.is_favorited && (
+          <DeletionBadge daysUntilDeletion={repo.days_until_deletion} />
+        )}
+        {!!repo.is_favorited && (
+          <span className="badge" style={{ background: 'rgba(0,229,160,0.08)', border: '1px solid rgba(0,229,160,0.2)', color: 'var(--accent)' }}>
+            ★ 已收藏
+          </span>
+        )}
+      </div>
+
+      <FeaturesPanel summary={repo.features_summary} />
+      <CodeBlock code={repo.install_code} />
+
+      {/* 项目地址 */}
+      <div className="flex items-center justify-between pt-1" style={{ borderTop: '1px solid var(--border)' }}>
+        <span className="text-xs" style={{ color: 'var(--text-3)' }}>项目地址</span>
+        <a
+          href={repo.html_url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-1.5 text-xs font-medium transition-colors duration-150"
+          style={{ color: 'var(--text-2)' }}
+          onMouseEnter={e => e.currentTarget.style.color = 'var(--accent)'}
+          onMouseLeave={e => e.currentTarget.style.color = 'var(--text-2)'}
+        >
+          <span style={{ opacity: 0.5 }}>github.com/</span>
+          <span>{repo.full_name}</span>
+          <span style={{ fontSize: '10px' }}>↗</span>
+        </a>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/hooks/useRepos.js
+++ b/frontend/src/hooks/useRepos.js
@ -0,0 +1,39 @@
+import { useState, useEffect, useCallback } from 'react';
+import { fetchRepos, setFavorite } from '../api.js';
+
+export function useRepos(filter) {
+  const [repos, setRepos] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await fetchRepos(filter);
+      setRepos(data);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [filter]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const toggleFavorite = useCallback(async (id, currentValue) => {
+    const newValue = !currentValue;
+    setRepos(prev =>
+      prev.map(r => r.id === id ? { ...r, is_favorited: newValue ? 1 : 0 } : r)
+    );
+    try {
+      await setFavorite(id, newValue);
+    } catch {
+      setRepos(prev =>
+        prev.map(r => r.id === id ? { ...r, is_favorited: currentValue ? 1 : 0 } : r)
+      );
+    }
+  }, []);
+
+  return { repos, loading, error, reload: load, toggleFavorite };
+}
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+import './styles/index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@ -0,0 +1,59 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --accent: #00e5a0;
+  --accent-dim: rgba(0, 229, 160, 0.1);
+  --accent-border: rgba(0, 229, 160, 0.25);
+  --surface-0: #060810;
+  --surface-1: #0b0f1a;
+  --surface-2: #10151f;
+  --surface-3: #161c28;
+  --border: rgba(255, 255, 255, 0.07);
+  --border-hover: rgba(255, 255, 255, 0.13);
+  --text-1: #e2e8f5;
+  --text-2: #7d8fa8;
+  --text-3: #3d4a5c;
+}
+
+@layer base {
+  body {
+    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+    background-color: var(--surface-0);
+    color: var(--text-1);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255,255,255,0.08) transparent;
+  }
+  ::-webkit-scrollbar { width: 4px; height: 4px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
+}
+
+@layer components {
+  .card {
+    @apply relative flex flex-col gap-4 p-5 rounded-2xl transition-all duration-300 cursor-default;
+    background: linear-gradient(145deg, var(--surface-1) 0%, var(--surface-2) 100%);
+    border: 1px solid var(--border);
+  }
+  .card:hover {
+    border-color: var(--border-hover);
+    box-shadow: 0 0 0 1px rgba(0, 229, 160, 0.06), 0 12px 40px rgba(0, 0, 0, 0.5);
+    transform: translateY(-2px);
+  }
+  .badge {
+    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium;
+  }
+  .btn {
+    @apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 cursor-pointer border;
+  }
+  .tab {
+    @apply px-4 py-2 rounded-lg text-xs font-medium transition-all duration-200 cursor-pointer;
+  }
+}
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,jsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3001',
+    },
+  },
+});
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,372 @@
+{
+  "name": "github-trending",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "github-trending",
+      "version": "1.0.0",
+      "devDependencies": {
+        "concurrently": "^8.2.2"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/concurrently": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-8.2.2.tgz",
+      "integrity": "sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "date-fns": "^2.30.0",
+        "lodash": "^4.17.21",
+        "rxjs": "^7.8.1",
+        "shell-quote": "^1.8.1",
+        "spawn-command": "0.0.2",
+        "supports-color": "^8.1.1",
+        "tree-kill": "^1.2.2",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "conc": "dist/bin/concurrently.js",
+        "concurrently": "dist/bin/concurrently.js"
+      },
+      "engines": {
+        "node": "^14.13.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
+      }
+    },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
+      "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/spawn-command": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz",
+      "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==",
+      "dev": true
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,14 @@
+{
+  "name": "github-trending",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "install:all": "npm install && npm install --prefix backend && npm install --prefix frontend",
+    "dev": "concurrently \"npm run dev --prefix backend\" \"npm run dev --prefix frontend\"",
+    "build": "npm run build --prefix frontend",
+    "start": "npm run start --prefix backend"
+  },
+  "devDependencies": {
+    "concurrently": "^8.2.2"
+  }
+}