Build Job Portal Registration Page in Next.js + TypeScript 🚀 React Hooks & ShadCN UI | Ep 7

In this video, I’ll show you how to build the Registration Page of our Job Portal App using Next.js, TypeScript, React Hooks, and ShadCN UI. 🚀
We’ll cover everything step by step — from creating your first .tsx file, defining interfaces in TypeScript, managing state with useState, handling form input changes, and building a fully functional registration form with validation-ready fields like name, email, role, and password.

📂 Source Code: https://github.com/thapatechnical/job-portal-nextjs

🔗 Useful Links:
Next.js Playlist Link: https://youtube.com/playlist?list=PLwGdqUZWnOp0lwvSBaIzzgV9X0ZiZ-42O&si=aQ_TNBNNx5L7V_bn

React.js Playlist Link: https://youtube.com/playlist?list=PLwGdqUZWnOp1Rab71vx2zMF6qpwGDB2Z1&si=sDZRxsYNetYmojKd

TypeScript Playlist Link:https://youtube.com/playlist?list=PLwGdqUZWnOp0xfHQFmlL52b_6-QZ0mnk_&si=c4jfsd5ElDC1p0A5

By the end, you’ll clearly understand why TypeScript makes React development easier and safer, plus a small task for you: create the Login Page of our job portal app as practice. 💡
------------------------------------------------------------------------
🚀 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 – Job Portal App – Registration Page with TS
0:55 – What we are going to build
1:18 – How to use React Router in Next.js
2:15 – Our first .tsx file in Next.js
4:00 – Why we need TypeScript in projects
4:30 – What is React.FC in TypeScript
5:35 – Must-watch React, Next.js & TS playlist
6:30 – Using useState for register form data
7:05 – What is Interface in TypeScript
8:00 – Must-watch TypeScript playlist
8:18 – Creating Interface for register fields
10:20 – Adding role property in Interface
11:10 – Passing Interface to useState as generics
13:00 – Using ShadCN UI to create form
15:45 – Client vs Server Components in Next.js
18:50 – Copy-paste UI part for register form
20:45 – Understanding our code
21:20 – Value and onChange props in TSX
23:00 – Defining parameter types in handleInput
25:35 – Select input field in Next.js
26:30 – Password & Confirm Password fields
28:20 – handleInputChange function to update states
30:30 – handleFormSubmit function defined
30:52 – POV: Why TypeScript makes Job Portal better
32:45 – Task for you → Build the Login Page