Next.js Job Portal Project 🔥 Apply Job Flow (Part 1) | Check Applied + Prepare Modal Data
📂 Source Code
👉 GitHub Repo: https://github.com/thapatechnical/job-portal-nextjs
----------------------------------------------------------------------------------
In this video, we start building the Apply Job feature for our Full Stack Job Portal Application using Next.js, MySQL, Drizzle ORM, and TypeScript.
So far in the project, the applicant can log in, browse job listings, and open a single job page. Now the next step is allowing users to apply for a job.
Instead of building the entire flow in one video, we are breaking it into 3 structured parts.
In Part 1, we will prepare all the necessary data required for the Apply Job Modal.
What you will learn in this video:
• How to get the jobId from params
• Fetch complete job details
• Check if the user has already applied for the job
• Create the hasApplied logic to disable the Apply button
• Fetch user resumes to show in the modal
• Prepare and pass props to the ApplyJobModal component
At the end of this video, we will have all the required data ready to open the Apply Job Modal in the next part.
In the upcoming videos:
Part 2 → Building the Apply Job Modal UI
Part 3 → Submitting the application and saving data to the database
This project is perfect for developers who want to learn how real-world job portals work using Next.js App Router, Drizzle ORM, MySQL, and TypeScript.
------------------------------------------------------------------------------------
🔗 Useful Playlists
📘 Next.js Full Stack Playlist:
https://youtube.com/playlist?list=PLwGdqUZWnOp0lwvSBaIzzgV9X0ZiZ-42O&si=aQ_TNBNNx5L7V_bn
⚛️ React.js Playlist:
https://youtube.com/playlist?list=PLwGdqUZWnOp1Rab71vx2zMF6qpwGDB2Z1&si=sDZRxsYNetYmojKd
💻 TypeScript Playlist:
https://youtube.com/playlist?list=PLwGdqUZWnOp0xfHQFmlL52b_6-QZ0mnk_&si=c4jfsd5ElDC1p0A5
------------------------------------------------------------------------------------
💸 Get All My YouTube Videos' Source Code for just ₹199! Grab Now - https://thapatechnical.shop/source-code
📺 Watch the complete Node.JS Playlist here :https://youtube.com/playlist?list=PLwGdqUZWnOp3KELplHtc-RnJ5xTUPqdgH&si=_ob8F88HYxCdspup
🔥 Access Source Code, PPT & Notes here for Free : https://www.thapatechnical.com/2024/11/introduction-to-nodejs.html
------------------------------------------------------------------------
🚀 Boost Your Skills with these Pre-Requisite Videos:
🔗 Best HTML Course - https://youtu.be/5ccq_nLHneE
🔗 Best CSS Course - https://youtu.be/MSICFljRcb4
🔗 JavaScript Basics Course Part 1 - https://youtu.be/13gLB6hDHR8
🔗 JavaScript Advanced Course Part 2 - https://youtu.be/YwsOCN8woA8
------------------------------------------------------------------------
💸 Build Your Own E-commerce Website for Free! - https://www.thapatechnical.com/2024/03/build-complete-ecommerce-website-using.html
------------------------------------------------------------------------
✌️ Join Us!
🚀 Become a Member: Unlock perks, free source code, and more Join Now : https://www.youtube.com/channel/UCwfaAHy4zQUb2APNOGXUCCA/join
📷 Connect on Instagram: https://www.instagram.com/thapatechnical
🗨️ Join Our Discord Server: Hang out with fellow programmers Discord Link: https://discord.gg/MdScmCsua6
------------------------------------------------------------------------
⌛TIMELINE⏳
0:00 Applicant Apply Job Flow – Overview
0:12 What We Have Built So Far
1:25 Apply Job Feature Structure (3 Parts Explained)
1:48 Support the Channel ❤️
2:12 Understanding the Single Job Page Logic
3:20 Preparing Data for ApplyModal Component
4:10 Checking if Applicant Already Applied
7:10 Fetching User Resume Data
9:10 Props Required for ApplyModal Component
9:40 What We Will Build in the Next Video