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
- 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.
- 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 --> E2. Directory Layout Blueprint
The codebase is organized into modular layers to promote maintainability and code-splitting.
3. Technology Stack & Key Integrations
Below is a breakdown of the primary technology choices powering the Mockrithm application:
Next.js (App Router)
Powers SSR/ISR pages, Server Actions, API routes, and static docs generation.
Firebase Firestore
NoSQL database utilized for storing user states, resumes, and interview telemetry.
Clerk Auth
Handles secure user identity, session management, and subdomain forwarding routing.
Stripe Payments
Manages pricing tiers, client subscriptions, checkout workflows, and webhook validation.
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.