MockMate: AI-Powered Interview Excellence

MockMate is a cutting-edge platform designed to bridge the gap between preparation and performance. By leveraging the power of Google Gemini, MockMate provides real-time, personalized interview practice, ATS-compliant resume analysis, and a suite of tools to help you land your dream job with confidence.

---

The Innovation Stack

graph TD
    subgraph "The Intelligence (AI)"
        GE["Google Gemini "]
        NLP["Natural Language Processing"]
    end

    subgraph "The Engine (Backend)"
        NO["Node.js / Express"]
        DB[("MongoDB Atlas")]
        SK["Socket.io (Realtime)"]
    end

    subgraph "The Experience (Frontend)"
        RE["React 18 / Vite"]
        FM["Framer Motion"]
        TW["Tailwind CSS"]
    end

    GE <--> NO
    NLP <--> NO
    NO <--> DB
    NO <--> SK
    SK <--> RE
    RE <--> FM
    RE <--> TW

Loading

The Walkthrough Timeline

Follow the journey of an aspiring candidate using MockMate to master their next interview.

Phase 1: Preparation (Context is Key)

Before jumping into a seat, you need to define your targets. MockMate allows you to create specialized practice sessions based on specific job roles and company cultures.

Phase 2: Practice (The Arena)

Practice makes perfect. Choose between HR-style behavioral rounds, session-specific technical drills, the high-intensity Live Interview mode, or the real-time Live Coding Environment.

• Live Coding Mode: A premium, dual-pane IDE experience powered by Monaco Editor. Synchronize your code in real-time natively through WebSockets across multiple languages (JavaScript, Python, Java, C++) while maintaining tightly integrated, split-screen video feeds to simulate an authentic technical pair-programming interview!

Phase 3: Analysis (The Feedback Loop)

Your resume is your gateway. Use our Bento-style resume workspace to manage your source links, get AI-powered improvement tips, and run an ATS analysis against your target roles.

Phase 4: Management (Admin Control)

For administrators, the control center provides a bird's-eye view of users, sessions, and system-wide communications via broadcasts and dynamic toasts.

Phase 5: Coaching (CoachMate)

Your personal AI career companion. CoachMate provides real-time guidance, interview tips, and ATS resume advice in a conversational interface. It's designed to be your supportive placement friend, keeping you motivated and prepared.

System Architecture

User Flow Diagram

graph TD
    Start[Landing Page] --> Auth{Auth Status}
    Auth -- New --> SignUp[Sign Up]
    Auth -- Returning --> Login[Login]
    SignUp --> Dashboard[Dashboard]
    Login --> Dashboard
    
    Dashboard --> Prep[Session Prep]
    Prep --> Practice[Interview Practice]
    Practice --> AIFeedback[AI Feedback & Analysis]
    AIFeedback --> Dashboard
    
    Dashboard --> Resume[Bento Resume Workspace]
    Resume --> ATS[ATS Scoring]
    ATS --> Dashboard
    
    Dashboard -- Admin Only --> Admin[Admin Console]

Loading

High-Level Architecture

graph LR
    subgraph "Frontend (Vite)"
        UI[React Components]
        Context[User/Session Context]
        SocketClient[Socket.io Client]
    end

    subgraph "Backend (Node/Express)"
        API[Rest Endpoints]
        SocketServer[Socket.io Server]
        AIController[Gemini AI Controller]
    end

    subgraph "Infrastructure"
        DB[(MongoDB Atlas)]
        Cloud[Cloudinary]
        AI[Google Gemini 1.5]
    end

    UI <--> Context
    UI <--> API
    SocketClient <--> SocketServer
    API <--> AIController
    AIController <--> AI
    API <--> DB
    API <--> Cloud

Loading

Want to Clone this project?

Prerequisites

• Node.js (v18+)
• MongoDB Atlas Account
• Google Gemini API Key
• Cloudinary Account (for resume/asset storage)

Installation

1. Clone the project

   git clone https://github.com/akhilthirunalveli/MockMate.git
   cd MockMate

2. Backend Configuration

   cd backend
   npm install
   # Create a .env file based on .env.example
   npm run dev

3. Frontend Configuration

   cd ../frontend
   npm install
   # Create a .env file based on .env.example
   npm run dev

Made by Akhil Thirunalveli