feat: add GET /api/stats public endpoint and CityStatsBar UI component (#992) - #1273
feat: add GET /api/stats public endpoint and CityStatsBar UI component (#992)#1273Rakshak05 wants to merge 15 commits into
Conversation
|
Someone is attempting to deploy a commit to the ixotic27-8245's projects Team on Vercel. A member of the Team first needs to authorize it. |
📋 GSSoC Label Validation Report✅ All label requirements met. This PR passes the pre-merge label check. 📖 Label Reference
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
github-actions
Bot
added
backend
There was a problem hiding this comment.
🟡 Not ready to approve
The client fetcher and API route currently risk treating backend failures as successful responses (and therefore caching/displaying misleading “valid” stats) without surfacing an error state.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
This review doesn't count toward merge requirements. Sign up for the private preview to control whether Copilot approvals count.
Pull request overview
Adds a public aggregate stats API and a homepage HUD component to display city-wide metrics (developers, claimed buildings, solves, tallest building), enabling at-a-glance “social proof” on the main experience.
Changes:
- Adds
GET /api/statsendpoint returning aggregate city statistics with caching headers. - Introduces
CityStatsBarclient component that polls/api/statsvia SWR and renders a HUD overlay on the homepage. - Updates homepage overlay stack to render the new stats bar (and reintroduces
useGLTFimport needed byAtmosphereCycleManager).
File summaries
| File | Description |
|---|---|
| src/components/CityStatsBar.tsx | New SWR-powered HUD component to display aggregate city metrics. |
| src/components/AtmosphereCycleManager.tsx | Re-adds useGLTF import to support GLTF usage in the component. |
| src/app/page.tsx | Integrates CityStatsBar into the homepage overlay layer. |
| src/app/api/stats/route.ts | Implements the new public aggregate stats endpoint with caching headers. |
| src/app/api/stats/route.test.ts | Adds unit test coverage for the new stats endpoint response shape and calculations. |
Review details
- Files reviewed: 5/5 changed files
- Comments generated: 4
- Review effort level: Lite
We're testing this review assessment. Please use 👍 or 👎 to tell us if it's correct.
| import useSWR from "swr"; | ||
| import { HiUsers, HiBuildingOffice2, HiCheckCircle, HiTrophy } from "react-icons/hi2"; | ||
|
|
||
| const fetcher = (url: string) => fetch(url).then((r) => r.json()); |
| {stats.map((s, idx) => { | ||
| const Icon = s.icon; | ||
| return ( | ||
| <div | ||
| key={idx} | ||
| className="flex items-center space-x-2 px-2 py-1 transition-transform hover:scale-105" | ||
| > |
| expect(json.tallestBuilding).toEqual({ | ||
| username: "top-coder", | ||
| hardSolved: 30, | ||
| }); | ||
| expect(json.totalSolves).toBe(60); // (10+5+2) + (20+15+8) = 60 | ||
|
|
| const [totalResult, claimedResult, tallestResult, solveResult] = await Promise.all([ | ||
| sb.from("developers").select("id", { count: "exact", head: true }), | ||
| sb.from("developers").select("id", { count: "exact", head: true }).eq("claimed", true), | ||
| sb | ||
| .from("developers") | ||
| .select("github_login, easy_solved, medium_solved, hard_solved") | ||
| .order("hard_solved", { ascending: false }) | ||
| .limit(1) | ||
| .maybeSingle(), | ||
| sb.from("developers").select("easy_solved, medium_solved, hard_solved"), | ||
| ]); | ||
|
|
github-actions
Bot
added
the
status:blocked
|
🚨 Hey @Rakshak05, the CI Pipeline is failing on this PR and it has been marked as 🔍 What failed:
📋 Error Details (first 2):
Please fix the issues before this can be reviewed. Here's how: 1. Run checks locally before pushing: npm run lint # Run ESLint
npm run build # Verify production build passes2. Auto-fix common issues: npm run lint -- --fix # Auto-fix lint errors where possible3. Check the full failure log here: Once you push a fix and the CI passes, the |
github-actions
Bot
removed
the
status:blocked
Ixotic27
added
the
quality:clean
Ixotic27
left a comment
Ixotic27
left a comment
There was a problem hiding this comment.
LGTM! Verified and approved. Great contribution!
|
@Rakshak05 Hi! This PR currently has merge conflicts with main. Please rebase against main and resolve the conflicts so it can be merged. |
github-actions
Bot
added
the
needs-rebase
|
Please pull the latest changes and resolve the conflicts so we can review it! git fetch origin
git rebase origin/main
# resolve any conflicts, then:
git push --force-with-leaseOnce resolved, the |
1 similar comment
|
Please pull the latest changes and resolve the conflicts so we can review it! git fetch origin
git rebase origin/main
# resolve any conflicts, then:
git push --force-with-leaseOnce resolved, the |
What does this PR do?
Adds a public
GET /api/statsendpoint and a client-sideCityStatsBarHUD component for displaying aggregate city statistics on the homepage:src/app/api/stats/route.ts): Returns total developers count, claimed buildings, total problem solves (easy + medium + hard), tallest building username & hard solved count, and timestamp (generatedAt) withCache-Controlheaders.src/components/CityStatsBar.tsx): Implements a sleek glassmorphic HUD bar showcasing developers, claimed buildings, total solves, and tallest building usinguseSWRwith 5-minute auto-refresh.src/app/page.tsx): Integrates<CityStatsBar />in the top HUD overlay layer.src/app/api/stats/route.test.ts): Unit test suite validating endpoint output structure, status 200, calculations, and caching headers.Related issue
Fixes #992
Screenshots
N/A (HUD overlay stats bar rendered cleanly above the 3D canvas on the main homepage)
Checklist
npm run lintpasses