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
ADVERTISEMENT
iske liye prior knowledge needed hai kya?
Why do we need the token when the user registers? The token is basically used to handle the redundant login problem and it would be needed when the user log's in and not when the user registers right?
Password :- Unique - False, Kyunki globally bahut saare users identical passwords use karte hain (jaise Password123). Agar UNIQUE constraint apply kiya, toh jab koi dusra user wahi password choose karega, toh database ek constraint violation error throw karega. Isse us user ko enumerate ho jayega ki kisi aur ka bhi wahi password hai — jo ek Information Disclosure Vulnerability aur serious security risk hai. Do alag users ka plaintext password same ho sakta hai, aur Cryptographic Hashing (bcrypt/Argon2) + Salting ise securely handle kar leti hai — kyunki har user ka unique salt hash ko database mein cryptographically distinct bana deta hai.
This comprehensive project tutorial is structured into the following parts, based on the video timeline: Phase 1: Project Overview & Backend Foundation Introduction & Setup: Project introduction and server environment setup (0:00:00 - 0:13:45). Database & Auth: MongoDB configuration, User Model creation, and Registration/Login API development (0:13:45 - 0:44:07). Security & Middleware: Implementing JWT token blacklisting and logout logic (0:44:07 - 1:00:11). User API: Creating the 'GetMe' API and authentication middleware (1:00:11 - 1:10:24). Phase 2: Frontend Development React Initialization: Vite setup, router configuration, and project folder structure (1:10:24 - 1:35:03). UI Styling: Login and Register form creation and custom styling (1:35:03 - 1:51:54). State Management: Setting up the service layer (Axios), Context APIs, and custom hooks (1:51:54 - 2:24:54). Routing: CORS setup and protected route implementation (2:24:54 - 2:47:54). Phase 3: GenAI Feature Integration AI Architecture: Overview of the interview report logic and Zod schema (2:47:54 - 3:23:35). Interview APIs: Handling file uploads (Multer) and integrating the Gemini API for report generation (3:23:35 - 3:56:22). Home & Interview UI: Designing the user dashboard and report views (3:56:22 - 4:26:35). Report Management: Implementing API logic for report generation, retrieval, and rehydration (4:26:35 - 5:17:01). Phase 4: PDF Generation & Finalization Resume PDF Pipeline: Integrating Puppeteer for converting AI-generated content into downloadable PDFs (5:17:01 - 5:44:41). Final Integration: Connecting the PDF generation feature to the frontend and project wrap-up (5:44:41 - 5:56:05).
Thankyou bhaiya!! for this amazing project😇😇
God of Backend
This project improved my skills my well . Thankyou I love this project ❤❤❤
Not for complete beginners I have observed one thing in this full stack project videos, if someone here is watching this video to learn something from you the challenges he faces are way more different than yours. Second thing is as we progress in the video the use of copilot is used a lot viewer expects explaination of code when he sees the tutorial then only he will understand if he was supposed to google everything he's not understanding why would he see this project videos . your project videos or good no doubt but sheriyans is known for there uniqueness of each and everything so keep that thing in consideration. Thankyou
bro i am very thankful to youu
React with generative ai sikhayo
Ek redis pr dedicated video bana do maja aa jayega...BTW I am watching and learning backend from all your videos.
You are so good bhaiya Means a lot project to me ❤❤❤❤
Need more tutorial on Gen-AI
thanks bhaiya
this guy teaching style is good. Ive been taking few courses from ur channel, but after this guy started making on react and backend. I've started following more tutorials
1:59:57 ankur bhaiya ke saath padhne me alag he maza aate hai
Learnt quite a good things from this project
done and added in my resume too ! thanks for this project
Already made such a project !! Nice concept 👏👏🪭
Very nice and informative video. never saw this type of real projects on this plateform.