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

Description

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