Mockrithm Docs

Developer Documentation Hub

Welcome to the Developer Documentation for Mockrithm. This documentation hub serves as the single source of truth for engineering teams building, deploying, and maintaining the Mockrithm platform.

Here you will find deep architectural blueprints, schema diagrams, core AI websocket pipeline configs, design system guidelines, and step-by-step instructions to initialize your local development workspace.


1. System Architecture Overview

Mockrithm utilizes a highly decoupled, dual-layer architecture built on Next.js (App Router). This separates the public-facing marketing assets and static docs from the secure candidate workspace.

Core Decoupling

  1. Layer 1: Public Marketing & SEO Docs Hub
    • High-performance, statically generated landing pages and dynamic technical documentation.
    • Powered by Fumadocs to serve static MDX files with zero server load overhead.
    • Visually engaging transitions configured using GreenSock (GSAP) scroll pinning, Framer Motion, and Three.js canvas particle visualizers.
  2. Layer 2: Private Candidate Cockpit & Sandbox
    • A highly secure app console guarded by Clerk authentication middleware.
    • Real-time interactive tools: ATS resume checklist builder, inline JSON Resume editor, WebSockets-based mock interview simulator.
    • Fast transactional persistence using Google Cloud Firestore.

System Data Flow

When a user logs in, authentication tokens are validated by the Clerk SDK. All subsequent transactional data (resumes, interview configs, feedback history) is synced to Firestore. AI evaluations are routed via Groq and Gemini depending on latency requirements.

graph TD
    subgraph Client Layer
        A[Next.js Client Components]
        B[GSAP & Three.js Canvas]
        C[WebSocket Client]
    end

    subgraph Authentication & Security
        D[Clerk Middleware Guard]
        E[Clerk Auth Server API]
    end

    subgraph Application & Compute
        F[Next.js Server Actions]
        G[REST API Routes]
        H[WebSocket Stream Server]
    end

    subgraph Third-Party Integrations
        I[Google Cloud Firestore]
        J[Groq Inference Engine]
        K[Gemini AI API]
        L[Stripe Billing API]
    end

    A --> D
    D --> F
    F --> I
    C --> H
    H --> J
    H --> K
    F --> L
    F --> E

2. Directory Layout Blueprint

The codebase is organized into modular layers to promote maintainability and code-splitting.

package.json
source.config.ts

3. Technology Stack & Key Integrations

Below is a breakdown of the primary technology choices powering the Mockrithm application:


4. Key Platform Features


5. Next Steps

To get started, follow our comprehensive technical guides:

Developer Introduction

Understand the business logic, goals, and architectural philosophies.

Local Quickstart Guide

Install dependencies, mock services, and spin up your development server.

Production Deployment

Configure subdomains, build settings, and environment maps on Vercel and Firebase.

On this page