Summary of Full Stack React Project ( AI Career Coach ) - Next JS, Tailwind, Gemini AI, Prisma, Shadcn UI 🔥

The video presents a comprehensive tutorial on building Sensei, a full-stack AI-powered career coach web application using Next.js, Tailwind CSS, Prisma ORM, Shadcn UI, and Gemini AI. The project integrates advanced features including AI resume building, interview preparation, industry insights, cover letter generation, and user authentication, with a focus on modern development practices and deployment.

Key Technological Concepts and Features

1. Project Overview: Sensei AI Career Coach
   • User onboarding with industry, experience, and skills selection.
   • Interactive dashboard showing weekly-updated industry insights, salary trends, and in-demand skills.
   • AI-powered Resume Builder generating ATS-optimized, customizable markdown resumes.
   • Mock Interview feature with role-specific questions generated by Gemini AI, performance tracking, and AI-generated improvement tips.
   • Intelligent Cover Letter Generator analyzing job descriptions to create tailored letters.
   • Fully responsive UI built with Next.js and Shadcn UI components.
   • Background jobs (cron jobs) to update industry insights weekly using Inest.
2. Frontend Technologies and UI
   • Next.js 13+ with App Router for server and client components.
   • Tailwind CSS for styling and responsiveness.
   • Shadcn UI: Pre-built, customizable components (buttons, cards, accordions, dropdowns, tabs, dialogs, toasts, etc.).
   • Dark mode support with next-themes.
   • Smooth scroll animations and modern landing page design.
   • Use of React hooks (useState, useEffect, useRef) and React Hook Form + Zod for form handling and validation.
   • Markdown editing and rendering with @uiw/react-md-editor.
   • PDF generation from markdown using html2pdf.js.
   • Charts for data visualization with Recharts.
   • Toast notifications via Sonor.
3. Backend and API
   • User authentication and management via Clerk (email, Google login).
   • Database design and management using PostgreSQL hosted on Neon.
   • ORM with Prisma for schema design, migrations, and queries.
   • Models include User, Industry, Resume, Assessment (mock interviews), Cover Letter, and Industry Insights.
   • Server actions in Next.js for API logic (user onboarding, resume saving, quiz generation and results saving, cover letter generation).
   • AI integration with Gemini API (Google’s generative AI) for:
     • Resume content improvement.
     • Generating interview questions.
     • Creating industry insights.
     • Generating cover letters.
     • Improving resume entries.
   • Background jobs setup with Inest for weekly industry insights update using cron expressions.
4. Key Features Implementation Highlights
   • Industry Insights: Weekly updated market data, salary ranges, growth rates, top skills, and trends fetched via background jobs and displayed with charts.
   • Resume Builder: Form-based input with dynamic fields for contact info, summary, skills, work experience, education, and projects; live markdown preview and editing; PDF export.
   • Interview Prep: AI-generated quizzes with multiple choice questions, explanations, performance tracking, improvement tips, and historical quiz review.
   • Cover Letter Generator: AI-generated cover letters tailored to job descriptions (assignment for viewers to implement).
   • User Onboarding: Collects user data, stores in DB, redirects based on onboarding status.
   • Authentication: Clerk integration with sign-in, sign-up, profile management, and route protection middleware.
   • Deployment: Full deployment on Vercel with environment variables and integration with Inest for background jobs.
5. Development Tools and Practices
   • Use of Next.js Server and Client Components for optimized rendering.
   • Use of React Hook Form + Zod for schema-based validation.
   • Modular component design (e.g., separate components for onboarding form, dashboard view, interview quiz, resume builder).
   • Custom hooks (e.g., useFetch) for API calls and state management.
   • State management with React hooks.
   • Use of Tailwind CSS utilities and Shadcn UI’s design tokens.
   • Use of Next.js middleware for route protection.
   • GitHub repository setup and pushing code.
   • Deployment best practices including post-install scripts for Prisma.
   • Integration of third-party APIs and libraries for enhanced functionality.

Tutorials, Guides, and Assignments Covered

• Step-by-step tutorial on setting up Next.js app with TypeScript, Tailwind CSS, Shadcn UI.
• User authentication setup with Clerk including middleware for protected routes.
• Designing database schema using Prisma for complex relations.
• Background job creation using Inest with cron scheduling for weekly tasks.

Category

Technology

Video