Apr 9
Loading video player...
https://hostinger.com/albertnode Building a real coding interview platform from scratch sounds intimidating, but this tutorial walks you through every single step. In this full build, you will create Interview Ninja: a full stack AI-powered interview platform where candidates write code in a browser-based VS Code-style editor and get instant AI feedback on every submission, while recruiters create sessions, manage questions, and track candidate performance. By the end of this video you will know how to combine authentication, a PostgreSQL backend, a live code editor, and an AI evaluation pipeline into one production-ready application. What You Will Learn Core Setup and Architecture Next.js 16 App Router project structure and routing patterns TypeScript interfaces and discriminated union state management Tailwind CSS for building clean dark-themed UI components InsForge SDK setup and client initialization Authentication and Role-Based Access Google OAuth sign-in with InsForge Auth Building a client-side AuthGuard with session verification Role-based routing for candidate and recruiter portals Protected layouts using Next.js nested layout files Database and Backend PostgreSQL schema design with enums, foreign keys, and triggers Row Level Security policies to enforce per-user data access InsForge database queries, upserts, and joins from the frontend Building API routes in Next.js App Router AI Evaluation Pipeline Sending code submissions to Anthropic Claude for evaluation Designing structured prompts for consistent JSON feedback responses Retry logic with exponential backoff for rate limit handling Fallback heuristics when the AI service is unavailable Uploading raw code files to InsForge storage Candidate Experience Monaco Editor integration with dynamic import and SSR disabled Multi-question interview session flow with per-question state Real-time AI feedback with score, strengths, weaknesses, and complexity analysis Submission history and dashboard stats Deployment The live demo you see at the beginning of this video is deployed using the exact same steps shown in the deployment section. No shortcuts, no special setup. What you see running live is what you will have by the end. Deploying a Next.js full stack app on Hostinger Setting environment variables and connecting GitHub for CI/CD Verifying end-to-end data flow in production Tech Stack ⚙️ Next.js 16 (App Router) ⚙️ TypeScript ⚙️ React 19 ⚙️ InsForge (@insforge/sdk) — Auth, PostgreSQL, Storage ⚙️ Anthropic Claude (@anthropic-ai/sdk) ⚙️ Monaco Editor (@monaco-editor/react) ⚙️ Tailwind CSS v4 ⚙️ Lucide React ⚙️ date-fns ⚙️ clsx Materials and References 🚀 Starter Repo: https://github.com/mendsalbert/interview-ninja-starter ✅ Finished Repo: https://github.com/mendsalbert/interview-ninja 📖 InsForge Docs: https://docs.insforge.dev 📖 Anthropic Docs: https://docs.anthropic.com 📖 Next.js Docs: https://nextjs.org/docs 📖 Monaco Editor: https://github.com/suren-atoyan/monaco-react Hosting The live app you see in the demo at the start of this video is hosted on Hostinger using the exact same deployment process covered in the tutorial. If you want to deploy your own version, use code ALBERTAI at checkout for a discount on your plan. 👉 https://www.hostinger.com/albertai 👋 Social Media https://twitter.com/mendsalbert https://linkedin.com/in/mends-albert 💼 Business Inquiries albert.k.mends@gmail.com #Nextjs #TypeScript #InsForge #AnthropicClaude #MonacoEditor #AIApps #FullStackDevelopment #WebDevelopment #Programming #Coding #InterviewNinja #AppRouter #React #TailwindCSS #SoftwareEngineering #BuildInPublic #TechTutorial #CodingInterview #AIEvaluation #hostingerpromocode ⏰ Timestamps 00:00:00 — Intro + Demo 00:00:55 — Architecture walkthrough 00:06:33 — Hostinger deployment walkthrough 00:09:11 — Clone starter and project setup 00:16:03 — InsForge project creation and SDK setup 00:23:00 — Database schema and TypeScript types 00:43:45 — AuthGuard component 00:49:17 — Role-aware Sidebar 00:52:58 — Protected route layouts 00:56:06 — Candidate dashboard with live data 01:01:52 — AI evaluation API route (Claude integration) 01:11:48 — Anthropic API key setup 01:15:31 — Session page setup 01:20:52 — Session ID page setup 01:36:30 — End-to-end testing and platform verification 01:41:23 — Outro and recruiter assignment