Architecture Overview

Understanding the architecture of Trackr is crucial for developers contributing to the project, as well as users who want to know how their data is processed and secured.

Trackr is built on a modern, decoupled, cloud-native stack designed for high availability, rapid iteration, and seamless AI integration. This document provides a comprehensive look at the various layers of the Trackr system.

High-Level System Architecture

At its core, Trackr utilizes a Jamstack-inspired approach, separating the presentation layer from the backend services and databases. We leverage Edge computing where possible to minimize latency, and rely on managed services for robust data storage and authentication.

graph TD
    Client[Web Browser / Extension] -->|HTTPS| CDN[Vercel Edge Network]
    CDN --> Frontend[Next.js Frontend]
    Frontend -->|GraphQL / REST| API[Backend API Routes]
    
    API --> Auth[Supabase Auth]
    API --> DB[(Supabase PostgreSQL)]
    API --> Storage[Supabase Storage]
    
    API --> AI[OpenAI / Anthropic APIs]
    API --> Email[Resend / Nylas Integration]
    
    DB --> Realtime[Supabase Realtime]
    Realtime --> Frontend

1. The Frontend Layer

The frontend is the user's primary interface with Trackr, engineered for speed, responsiveness, and a premium aesthetic experience.

Next.js & React

Trackr's frontend is built using Next.js (App Router), the premier React framework. This choice allows us to utilize Server Components (RSC) for heavy data fetching and rendering, drastically reducing the JavaScript bundle size shipped to the client.

• Server-Side Rendering (SSR): Used for dynamic pages that require SEO or immediate data freshness, such as public profile pages.
• Static Site Generation (SSG): Used for documentation (like this site) and marketing pages for optimal load times.

Styling and UI

The application employs Tailwind CSS combined with Radix UI primitives and Framer Motion for animations. This combination ensures a highly accessible, customizable, and visually stunning interface.

State Management

For global state, we rely on a combination of React Context and Zustand. For server state and data fetching, we heavily utilize React Query (TanStack Query), which provides built-in caching, optimistic updates, and background data synchronization.

2. The Backend Layer

Trackr does not use a traditional monolithic backend server. Instead, it relies on Next.js API routes and Supabase for a serverless, scalable infrastructure.

API Routes (Serverless Functions)

Next.js API routes act as the connective tissue between the frontend and external services. These functions are deployed globally on the Vercel Edge Network. They handle:

• Webhook processing (e.g., incoming emails or Stripe payments)
• AI model orchestration (preparing prompts and handling LLM responses)
• Complex business logic that shouldn't reside on the client

Database: Supabase (PostgreSQL)

Trackr relies on Supabase, an open-source Firebase alternative, for its core data infrastructure. Under the hood, this is a robust PostgreSQL database.

erDiagram
    USERS ||--o{ APPLICATIONS : tracks
    USERS ||--o{ RESUMES : owns
    APPLICATIONS ||--o{ INTERVIEWS : has
    APPLICATIONS ||--o{ NOTES : contains
    COMPANIES ||--o{ APPLICATIONS : receives
 
    USERS {
        uuid id PK
        string email
        string name
        jsonb settings
    }
    
    APPLICATIONS {
        uuid id PK
        uuid user_id FK
        uuid company_id FK
        string status
        timestamp applied_at
    }
    
    RESUMES {
        uuid id PK
        uuid user_id FK
        string file_url
        boolean is_default
    }

Row Level Security (RLS)

Security is handled directly at the database level using PostgreSQL's Row Level Security. This ensures that even if an API route is compromised, a user can only ever access data associated with their own user_id.

3. The AI & Automation Engine

The AI features are what separate Trackr from a standard spreadsheet. We orchestrate multiple language models to provide insights.

Parsing and Extraction

When a user inputs a job description URL or pastes text, Trackr uses a lightweight, fast LLM to perform Named Entity Recognition (NER) and extract structured data (Company Name, Salary, Requirements) into JSON format.

sequenceDiagram
    participant User
    participant Frontend
    participant API
    participant LLM
    participant DB
 
    User->>Frontend: Pastes Job Description
    Frontend->>API: POST /api/parse-job
    API->>LLM: Send prompt + job text
    LLM-->>API: Return structured JSON
    API->>DB: Insert new Application Record
    DB-->>API: Success
    API-->>Frontend: Return application data
    Frontend-->>User: Display new record in UI

Match Scoring and Recommendations

For deep analysis, such as comparing a user's resume against a job description, we utilize more capable models (like GPT-4). The system vectorizes the resume and job description, analyzes the semantic overlap, and generates a detailed report highlighting strengths and missing keywords.

4. Integration Services

Trackr's power multiplies when connected to the tools users already use daily.

Email Integration (Nylas/Resend)

We utilize external APIs to sync email correspondence. When a user connects their Gmail or Outlook account, Trackr sets up webhooks to listen for incoming emails from domains associated with their active applications.

• Outgoing: Emails sent from within Trackr are routed through our trusted transactional email provider (Resend).
• Incoming: Replies from recruiters are ingested, parsed, and attached to the relevant Application Record automatically.

Storage

User uploads (resumes in PDF format, cover letters, portfolio images) are stored in Supabase Storage, which is backed by AWS S3. These files are served via CDN for fast retrieval and are protected by the same Row Level Security policies as the database.

5. Security and Compliance

Architecture is meaningless without rigorous security protocols.

• Authentication: Handled entirely by Supabase Auth (JWT based). We support OAuth providers (Google, GitHub, LinkedIn) and magic link email logins.
• Data Residency: Primary databases are hosted in SOC2 compliant data centers (AWS us-east-1 for US users, AWS eu-central-1 for European users).
• Rate Limiting: All API routes are protected by Upstash Redis-based rate limiting to prevent abuse and DDoS attacks.

Summary

Trackr's architecture is designed to be as invisible as possible to the end-user while providing a robust, lightning-fast, and secure foundation. By utilizing a serverless Edge architecture, PostgreSQL, and deep LLM integration, we have built a platform capable of handling the demands of millions of job applications without breaking a sweat.