AI-powered voice interview practice. Speak with an AI interviewer, get adaptive follow-ups, and receive a scored post-call analysis — all wrapped in a Next.js 15 PWA with a real-time dashboard.
🔗 Live demo: https://conveyai.live 🔗 Backend repo: github.com/ahmedraza-96/conveyai-backend
This is a public showcase mirror of my Final Year Project — about a year of work. The active development repository is kept private to keep environment configuration and internal screenshots out of public view. This repo starts from a single "Initial public release" commit while the private repo continues to receive day-to-day work.
The code here is the same code that runs the live demo above — only environment values and deployment-specific config have been removed.
If you're reviewing my work and would like full commit-history access, a walkthrough of specific design decisions, or to pair on a section, reach out — I'm happy to share read access to the private repo.
- 🎙️ Live voice interview UI — multi-step setup wizard → live call screen with Vapi web SDK → results page with rubric breakdown.
- 📊 Dashboard analytics — score trends over time (line chart), category-wise breakdown (bar chart), session distribution (pie chart) — all backed by real data from the API, not mock fixtures.
- 📄 Resume upload + AI prep questions tailored to the role.
- 📱 Installable PWA via Serwist — works offline for static content, installable on mobile and desktop.
- 🔐 Google OAuth + email/password auth, JWT-based session.
- 🌗 Light / dark theme with a polished landing page.
- 📚 Question bank + prep guides (STAR method, system design refreshers, etc.).
- Live voice interview flow integrated with Vapi Web SDK —
src/components/practice/andsrc/app/dashboard/practice/. - Real-time dashboard analytics rendered with Recharts —
src/components/dashboard/. - Typed API layer in
src/lib/api.ts— a single source of truth wrapping every backend call with consistent auth, error handling, and types. - PWA setup via Serwist with a custom service worker —
src/app/sw.ts. - Custom shadcn/ui design system with Tailwind v4, framer-motion transitions, and a consistent purple/blue gradient theme.
| Layer | Tech |
|---|---|
| Framework | Next.js 15 (App Router, Turbopack) |
| Language | TypeScript |
| UI primitives | shadcn/ui on Radix UI |
| Styling | Tailwind CSS v4 |
| Icons | Lucide |
| Animations | Framer Motion |
| Charts | Recharts |
| Voice client | @vapi-ai/web |
| Auth | JWT (backend-issued) + @react-oauth/google |
| PWA | Serwist |
| Tests | Vitest + Testing Library + jsdom |
| Package manager | pnpm |
Routes live under src/app/ (App Router):
/— landing page/login,/signup— auth/dashboard— main dashboard with analytics/dashboard/preparation— question bank + prep guides/dashboard/practice— interview setup → live call → results/admin/...— admin panel/pricing,/contact,/privacy,/terms,/manual— marketing/legal
All backend communication goes through src/lib/api.ts — components import named functions from it rather than calling fetch directly. The token lives in localStorage as authToken and gets attached as a Bearer header on every authenticated request.
Layout is handled by src/components/dashboard-layout.tsx which renders the sidebar on desktop and a drawer on mobile.
pnpm install
# Create .env.local with at minimum:
# NEXT_PUBLIC_API_BASE_URL=http://localhost:3002
# NEXT_PUBLIC_GOOGLE_CLIENT_ID=<your google oauth client id>
# NEXT_PUBLIC_VAPI_PUBLIC_KEY=<your vapi public key>
pnpm dev # localhost:3000You'll also need the backend running locally on port 3002.
| Script | What it does |
|---|---|
pnpm dev |
Next dev server (Turbopack) |
pnpm build |
Production build (also generates the service worker) |
pnpm start |
Run production build |
pnpm lint |
ESLint |
pnpm test / pnpm test:watch / pnpm test:coverage |
Vitest |
The live site is deployed on Vercel, connected directly to the main branch — every push triggers a new build and deploy.
MIT — see LICENSE.