In this video, you will learn how to build a Production-Ready Full Stack Gen AI Job Preparation Web Application in One Shot — from authentication and resume processing to AI-powered interview preparation using React, Node.js, JWT, Gemini AI, and Puppeteer.

This project is designed to simulate a real-world product where users can upload their resumes, analyze job descriptions, detect skill gaps, and generate AI-powered interview questions and ATS-optimized resumes.
If you want to master Full Stack + Gen AI by building a real-world application, this complete project walkthrough is for you.

Instructor: Ankur Prajapati

📁 Source Code (GitHub):
https://github.com/ankurdotio/interview-ai-yt

🚀 What You Will Learn

Full Stack Web Application Architecture
Secure Authentication using JWT
Token Blacklisting Implementation
AI Integration using Gemini
Resume Parsing & Skill Extraction Logic
AI-Based Skill Gap Detection
ATS-Optimized Resume Generation
Puppeteer for Dynamic PDF Creation
Real-World Project Structuring

🛠 Tech Stack Used

Frontend: React.js
Backend: Node.js + Express.js
Authentication: JWT + Token Blacklisting
AI: Gemini API
PDF Generation: Puppeteer

🧭 Project Timeline
00:00:00 – Introduction & Project Overview
00:01:50 – Basic Server Setup & Authentication APIs
00:05:16 – Setting Up MongoDB Atlas & Database Configuration
00:13:45 – Database Setup & User Model Schema
00:16:48 – Creating Auth Routes
00:20:43 – Auth Controller & Register User Implementation
00:30:43 – Login User Controller
00:38:28 – Testing APIs Using Postman
00:44:07 – Logout Logic, Cookies & Token Blacklisting Concept
00:51:35 – Blacklist Model Schema & Logout API Implementation
01:00:11 – GetMe API, Auth Middleware & Controller
01:10:24 – Frontend Setup with Vite
01:16:04 – React Router Setup, Folder Structure & Auth Pages
01:25:28 – Login & Register UI (Dummy Setup + Styling)
01:35:03 – Authentication Form Styling & Architecture Overview (4 Layers)
01:51:54 – Service Layer Setup (Axios, Auth APIs) + Context State Management
02:14:30 – Custom Hooks (useAuth) & Two-Way Binding
02:24:54 – CORS Setup, Protected Routes & getMe Integration
02:47:54 – AI Feature Architecture Explanation
02:55:05 – Interview Report Model, Zod Schema & AI Response Structure
03:23:35 – Interview Routes, Controllers & Multer File Upload Setup
03:46:27 – AI Service Integration & Postman Testing
03:56:22 – Integrating AI APIs in Frontend & Home Page Setup
04:10:17 – Styling Home & Interview Page UI
04:26:35 – Interview APIs (Generate, Get by ID, Get All Reports) + Context Setup
04:43:07 – use Interview Hook & Report Management Logic
04:56:45 – Generate Report Function & Rehydration Logic
05:11:01 – Recent Reports Feature
05:17:01 – Resume PDF Generation using Puppeteer (AI to PDF Pipeline)
05:29:24 – Generate Resume PDF Controller & Backend Integration
05:44:41 – Frontend Integration of Resume PDF Feature
05:55:15 – Outro

🌐 Visit Our Website:
https://sheryians.com/

🌐 Explore Our Courses:
https://sheryians.com/courses


📲 Follow Us On:

📷 Instagram: https://www.instagram.com/sheryians_coding_school/
📘 Facebook: https://www.facebook.com/sheryians.community
💌 Telegram: https://t.me/sheryiansCommunity
💼 LinkedIn: https://in.linkedin.com/company/the-sheryians-coding-school
🎮 Discord: https://discord.gg/Au3TquBarQ

Peace out ✌

full stack development, gen ai project, ai web application, resume analyzer project, job preparation app, react js project, node js backend, jwt authentication, gemini api integration, puppeteer pdf generation, mern stack project, ai interview preparation, ats resume generator, web development project, full stack gen ai app, sheryians coding school

Gen AI + Full Stack Web Development Project | React, Node, JWT, Gemini