Ai-Powered Job Portal: Next.Js 15, Strapi 5 & React Query

Posted By: ELK1nG

Ai-Powered Job Portal: Next.Js 15, Strapi 5 & React Query
Published 8/2025
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 3.50 GB | Duration: 6h 46m

Build a full-stack AI job portal with Next.js 15, Strapi 5, React Query. Learn auth, AI, APIs, UI & deployment.

What you'll learn

Develop a complete AI-powered job portal from scratch using Next.js 15 (App Router) for the frontend and Strapi v5 as the backend.

Manage APIs with Axios and TanStack React Query, and build validated forms using React Hook Form with Zod.

Implement secure authentication and user management with Auth.js (NextAuth.js), enabling signup, login, and protected routes for candidates and employers.

Integrate AI features with OpenAI to analyze resumes and job descriptions, giving students hands-on experience with real-world AI applications.

Design responsive and modern UIs using Tailwind CSS v4 and ShadCN UI components, ensuring a professional look and smooth user experience.

Deploy a production-ready full-stack application using platforms like Vercel (frontend) and Render (backend), covering environment setup, APIs, and performance

Requirements

Basic knowledge of JavaScript and React will be helpful, but not strictly required — I’ll guide you step by step.

A computer (Windows, macOS, or Linux) with internet access.

Node.js and npm installed (free and open-source).

A text editor like VS Code (free).

Curiosity and willingness to learn modern web development — no prior backend or AI experience needed.

Description

Step into the future of web development and learn how to build a modern, AI-powered job portal from the ground up using the latest technologies. In this hands-on course, you’ll develop a full-stack web application with Next.js 15 (App Router) for the frontend and Strapi v5 as a headless CMS backend, creating a professional platform that can handle real-world job postings, candidate profiles, and AI-driven resume analysis.This course is designed to give you practical, real-world experience with modern full-stack development, even if you have little to no backend or AI experience. You’ll go beyond simple tutorials and learn how to architect, build, and deploy a production-ready web application with all the features a professional job portal requires.What you’ll learn in this course:Next.js 15 App Router: Build the frontend using the latest version of Next.js, mastering the modern App Router, server components, and optimized routing strategies.TypeScript: Implement strong typing for your project, reducing bugs and making your code more maintainable and professional.Tailwind CSS v4 & ShadCN UI: Create a responsive, modern, and visually appealing interface using utility-first CSS and pre-built components from ShadCN UI.Strapi v5 CMS: Learn API-first development by setting up a Strapi backend, managing content, creating models, and handling authentication.Authentication with NextAuth.js (Auth.js): Implement secure login and signup functionality, role-based access for candidates and employers, and protected routes.OpenAI API Integration: Add AI-powered features like resume and job description analysis, providing students with experience in integrating cutting-edge AI technologies.API Communication with TanStack React Query and Axios: Efficiently fetch and manage data between frontend and backend.Form Validation & Handling: Use React Hook Form and Zod for building robust, validated forms.Modern Development Tools: Learn how to use Biome for linting and formatting, PostCSS for CSS processing, and modern JavaScript/TypeScript development best practices.Deployment & Environment Management: Deploy your full-stack application to production using platforms like Vercel (frontend) and Render (backend), including environment variables and performance optimization strategies.Who this course is for:Beginner and intermediate developers who want hands-on experience building a real-world, full-stack application.React and Next.js learners eager to master the latest App Router and modern full-stack development practices.Backend beginners looking to get practical experience with Strapi v5 and RESTful API development.Students, freelancers, and professionals interested in integrating AI capabilities into practical web applications.Developers who want to build production-ready projects for their portfolios, including job boards, SaaS applications, or career platforms.Anyone motivated to learn modern web technologies, AI integration, and professional development workflows.By the end of this course, you’ll have built a complete, functional, and deployable AI-powered job portal, fully equipped with secure authentication, AI-driven features, and a polished, responsive interface. This course gives you the confidence and skills to build production-ready web applications and opens the door to advanced full-stack development opportunities.

Overview

Section 1: Creating Next js Project

Lecture 1 Creating Next js project

Lecture 2 Configuring Biome and Ultracice formatter

Lecture 3 Configuring Shadcnui

Lecture 4 Creating the landing page

Lecture 5 Creating navbar component

Lecture 6 Creating jobs page

Lecture 7 Creating search component

Lecture 8 Creating job details page

Lecture 9 Completing job details page

Lecture 10 Creating company details page

Lecture 11 Initializing a github repository

Lecture 12 Updated frontend github url

Section 2: Creating the backend

Lecture 13 Creating a new Strapi project

Lecture 14 Explaining the backend diagram

Lecture 15 Creating tables, fields and relationships

Lecture 16 Configuring roles and permissions

Lecture 17 Adding data to our backend

Lecture 18 Initializing github repository for backend

Section 3: Configuring Tanstack React Query

Lecture 19 Installing necessary packages

Lecture 20 Configuring React Query

Section 4: Connecting frontend with backend

Lecture 21 Creating types for api responses

Lecture 22 Explaining Strapi pagination and population

Lecture 23 Explaining Strapi filtering system

Lecture 24 Implementing jobs api services and hooks

Lecture 25 Completing jobs api services and hooks

Lecture 26 Displaying jobs from the backend

Lecture 27 Completing job filters component

Lecture 28 Creating job details page

Lecture 29 Creating company details page

Section 5: Implementing Authentication Using Auth js

Lecture 30 Installing and configuring Nextauth

Lecture 31 Extra configuration before creating auth pages

Lecture 32 Creating the login page

Lecture 33 Creating the signup page

Lecture 34 Pushing changes to github

Section 6: Job apply section

Lecture 35 Creating api services and hooks

Lecture 36 Creating the apply form page

Lecture 37 Connecting apply form to the backend

Lecture 38 Checking for applied jobs status

Lecture 39 Pushing changes to github

Section 7: Settings section

Lecture 40 Showing user details on navbar

Lecture 41 Creating the api service

Lecture 42 Creating the query hook

Lecture 43 Retrieving user details identifier

Lecture 44 Creating the settings page

Lecture 45 Updating session data

Section 8: Jobs applied section

Lecture 46 Creating the api service

Lecture 47 Creating the query hook

Lecture 48 Creating the applied jobs page

Section 9: Doing some refactoring

Lecture 49 Doing some refactoring

Section 10: Job qualification AI analyzer

Lecture 50 Configuring AI platform

Lecture 51 Creating the api route

Lecture 52 Creating the dialog

Lecture 53 Completing the ai job analyzer section

Section 11: Deployment and final words

Lecture 54 Deploying our backend to live server

Lecture 55 Adding some manual data to Strapi

Lecture 56 Deploying the frontend

Lecture 57 Fixing deployment bugs

Lecture 58 Final words

Beginner to intermediate web developers who want to build a real-world, full-stack application from scratch.,React and Next.js learners who want to level up by working with the latest Next.js 15 App Router.,Backend beginners who want hands-on experience with Strapi v5 CMS and databases.,Students and professionals interested in learning how to integrate AI features (OpenAI API) into practical web projects.,Aspiring full-stack developers who want to strengthen their portfolio with a production-ready, modern project.,Freelancers and entrepreneurs who want to create job boards, career portals, or SaaS-style platforms.