blitzbugg/gitprix

Purpose and Runtime

GitPrix is a client-facing Next.js App Router application that converts a public GitHub username into a motorsport-style collectible driver card. It runs as a single-page experience, with a server-side route acting as a narrow proxy to GitHub’s public Users API. No authentication, persistence layer, or database is present.

Primary entry points:

• app/page.tsx — application page and experience host.

• app/layout.tsx — root document/layout boundary.

• app/api/github/[username]/route.ts — GitHub profile lookup endpoint.

Experience Orchestration

The main interactive flow is concentrated in the page-level experience component. It accepts username input, drives intro/loading/error/success states, coordinates profile fetching, and exposes export/share actions once a card is assembled.

Core paths:

• app/page.tsx

• components/gitprix-experience.tsx

• app/globals.css

The UI is designed as an immersive night-race scene rather than a conventional dashboard; motion and reduced-motion behavior are part of the product experience.

GitHub Data Boundary

Browser code requests the internal dynamic API route instead of directly calling GitHub. The route resolves /api/github/:username, fetches public profile fields from GitHub, and returns data or an error response to the experience layer.

Core paths:

• app/api/github/[username]/route.ts

• types/github.ts

• components/gitprix-experience.tsx

This boundary centralizes external-service handling and keeps GitHub API URL/error semantics out of the presentation layer. It is subject to GitHub unauthenticated rate limits.

Rating and Domain Model

GitHub profile data is transformed into a driver-oriented domain model with deterministic ratings: pace, consistency, reliability, experience, versatility, and teamwork. Scores derive from public profile signals—including repository count, account age, followers/following—and a username-derived stable seed.

Core paths:

• lib/driver.ts

• types/github.ts

• components/driver-card.tsx

lib/driver.ts is the principal business-logic boundary: equivalent public profile inputs should yield equivalent driver-card values.

Visual Composition and Card Rendering

The collectible card is a distinct renderable artifact, composed from profile-derived driver data and embedded in a motorsport environment. The scene supplies circuit/stadium/pit-wall atmosphere, while the card owns the information-dense driver presentation and interactive tilt.

Core paths:

• components/driver-card.tsx

• components/ambient-scene.tsx

• components/gitprix-experience.tsx

Framer Motion and GSAP support animation/interaction; Tailwind CSS and global CSS provide styling.

Export and Sharing Output

The completed card can be rasterized into a high-resolution PNG via html-to-image. That generated image is used for download and, where browser support allows, native file sharing. X and Reddit use browser URL-based sharing flows; unsupported native image-sharing cases fall back to download.

Core paths:

• components/gitprix-experience.tsx

• components/driver-card.tsx

This is a browser capability boundary: image generation and native sharing occur client-side after the card is rendered.

Metadata and Deployment Surface

The app provides Next.js-generated icons, social images, robots, and sitemap endpoints for discoverability and link previews.

Core paths:

• app/opengraph-image.tsx

• app/twitter-image.tsx

• app/sitemap.ts

Infrastructure is standard Next.js/Node.js build and serving, configured through next.config.ts; the only named external data service is GitHub’s public API.