#The Core Concept

Discord Badge Tracker is a specialized utility built for Discord power users. It directly interfaces with the Discord API to monitor, calculate, and visually map a user's progression towards legacy Nitro and Server Boost badges.

#Infrastructure & Stack

This project leverages a modern React architecture paired with a custom network routing solution to ensure stability and bypass restrictions:

• Next.js App Router: The core frontend and serverless backend are built on Next.js, utilizing custom UI components like progress, tooltip, and badge for a seamless interface.
• NextAuth Integration: Secure OAuth2 session management is handled natively via [...nextauth]/route.ts, allowing users to securely authenticate with their Discord accounts.
• Custom Reverse Proxy: To circumvent strict Discord API rate limits and browser CORS policies, the system routes specific requests through a dedicated Node.js reverse-proxy/server.js instance.

#Technical Features

The application does not simply fetch data; it enforces access rules and mathematically visualizes progression:

• Access Control (Gatekeeping): Implements a strict join-server-gate.tsx middleware component. If a user is not present in the required authorized guild, access to the tracker is mathematically denied.
• Timeline Rendering: Features dynamic nitro-timeline.tsx and boost-timeline.tsx components that calculate the exact months remaining to hit the next tier.
• Asset Automation: Uses a backend TypeScript script (scripts/download-badges.ts) to programmatically scrape, download, and cache badge SVGs/PNGs locally, eliminating reliance on external hotlinking.