Live site: https://onyx.thomaspercival.dev/
Backend Repo: https://github.com/tpercival01/Project-Onyx-API
Onyx is a sleek, dark-themed web application that brings the PlayStation "Platinum Trophy" experience to Xbox Live. It allows users to search their Gamertag, view their entire game library, and earn Bronze, Silver, Gold, and "Onyx" (100% completion) coins based on their achievement progress.
This repository contains the Frontend presentation layer. It operates on a read-heavy, cache-first architecture, querying a Neon Serverless PostgreSQL database to render the UI instantly, while offloading external API communication to a decoupled Python microservice.
- Framework: Next.js 15 (App Router, Server Components)
- Language: TypeScript
- Styling: Tailwind CSS (Custom "Sith/Mystic" Dark Mode Aesthetic)
- ORM: Drizzle ORM
- Deployment: Vercel
- Decoupled Backend for Frontend (BFF): To bypass strict external rate limits from the Xbox API, this Next.js app does not talk to Xbox directly. Instead, it signals a Python/Celery backend to fetch data in the background, and polls the PostgreSQL database for UI updates.
- Server Components: Heavy database queries (using Drizzle) are executed entirely on the server, shipping zero JavaScript to the client for the main game grid.
- Idempotent UI: The frontend aggregates raw Gamerscore and achievement data on the fly to calculate Coin distribution (Bronze < 40G, Silver 40-79G, Gold 80G+, Onyx = 100% Completion).
npm installCreate a .env.local file in the root directory:
# Your Neon Serverless Postgres Connection String
DATABASE_URL=postgresql://[user]:[password]@[host]/[dbname]?sslmode=require
# The URL of your FastAPI Sync Engine
NEXT_PUBLIC_API_URL=http://localhost:8000
Ensure your database is up to date with the Drizzle schema:
npx drizzle-kit pushnpm run devOpen http://localhost:3000 to view the application.