Interviewed — Frontend

Premium AI interview experience with real-time audio, live coding, and analytics

---

📦 Repositories

Repository	Link
Frontend	github.com/Amaru333/interviewed-frontend
Backend	github.com/Amaru333/interviewed-backend

---

✨ Features

• Real-Time AI Interview — Live bidirectional audio with visual waveform feedback and multi-panelist switching
• Live Code Editor — Monaco-based code editor activated on [CODE_CHALLENGE] prompts with syntax highlighting and auto-submission
• Recruiter Portal — Subdomain-routed (hire.*) dashboard for job management, candidate pipeline, bulk invitations, and score analytics
• Performance Analytics — Recharts-powered visualizations for communication, technical, problem-solving, confidence, and relevance scores
• Animated Onboarding — Multi-step flow with resume upload, feature tour, and staggered motion animations
• Dark-Mode UI — Premium glassmorphism design system with Framer Motion transitions throughout

---

🛠️ Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
UI Library	React 19
Styling	Tailwind CSS v4, Framer Motion
Components	Radix UI primitives, Lucide React icons
Code Editor	Monaco Editor
Charts	Recharts
Typography	DM Sans, JetBrains Mono, Syne

---

🏗️ Project Structure

frontend/src/
├── app/
│   ├── (authenticated)/          # Protected candidate routes (dashboard, interview)
│   ├── hire/                     # Recruiter portal (subdomain-routed)
│   │   ├── (authenticated)/      # Protected recruiter routes
│   │   │   ├── dashboard/        # Recruiter dashboard
│   │   │   └── jobs/[id]/        # Job details, candidate pipeline, results
│   │   └── page.tsx              # Recruiter login/register
│   ├── invite/[token]/           # Candidate invite landing page
│   ├── sessions/[id]/            # Live interview session
│   ├── results/[id]/             # Post-interview results & analytics
│   ├── login/                    # Candidate login
│   ├── register/                 # Candidate registration
│   └── page.tsx                  # Landing page
├── components/
│   ├── audio-capture.tsx         # Microphone input & streaming
│   ├── audio-playback.tsx        # AI audio output playback
│   ├── code-editor.tsx           # Monaco live coding interface
│   ├── live-score-panel.tsx      # Real-time interview metrics
│   ├── onboarding-modal.tsx      # Multi-step onboarding flow
│   ├── app-navbar.tsx            # Main navigation bar
│   ├── auth-provider.tsx         # Candidate auth context
│   ├── recruiter-auth-provider.tsx # Recruiter auth context
│   ├── recruiter-sidebar.tsx     # Recruiter portal sidebar
│   └── ui/                      # Reusable Radix-based UI primitives
├── lib/
│   └── api.ts                    # Backend API client & types
└── middleware.ts                 # Subdomain routing (hire.*)

---

System Architecture

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• Backend server running (interviewed-backend)

Setup

# Clone the repository
git clone https://github.com/Amaru333/interviewed-frontend.git
cd interviewed-frontend

# Install dependencies
npm install

# Configure environment
cp .env.example .env.local
# Set NEXT_PUBLIC_API_URL to your backend URL

# Start development server
npm run dev

Open http://localhost:3000 to see the application.

---

⚙️ Environment Variables

Create a .env.local file in the root:

NEXT_PUBLIC_API_URL=http://localhost:8000

For production, point this to your deployed backend URL.

---

📄 License

This project is part of the Interviewed platform.