Create Employer Settings Page in Next.JS | React Hook Form + Shadcn UI

In this video, we will build a complete Employer Settings Page using React Hook Form, shadcn/ui, and Tailwind CSS from scratch.
You will learn how to create clean, professional input fields, manage form state, validate data, and capture user inputs.

We start with a simple example using name & email fields to help beginners understand React Hook Form basics.
Then we move ahead and build the full employer settings form with textarea, multiple inputs, and proper UI design.

At the end, you’ll see how to submit and console all form data when the user clicks the Save/Submit button.
In the next video, we will implement the Controller component to handle SELECT fields like organization type and team size.
----------------------------------------------------------------------------------
📂 Source Code
👉 GitHub Repo: https://github.com/thapatechnical/job-portal-nextjs

------------------------------------------------------------------------------------
🔗 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 – Employer Settings Page Overview
0:50 – Introducing the Tiptap Editor (Highlight Only)
1:35 – Why React Hook Form is Important (Must-Watch)
1:55 – Don’t Worry! Full Step-By-Step Guide
2:35 – Employer Settings Page Folder Structure
3:20 – Writing the Settings Page Code
4:10 – Using shadcn/ui to Build Form UI
6:00 – Creating Beautiful Form UI with shadcn Form Components
8:05 – Implementing React Hook Form to Capture Data
12:40 – Making the Component Client-Side
13:30 – Styling Inputs with Tailwind CSS
17:32 – Adding Textarea Field (Company Description)
20:25 – Adding Remaining Input Fields
23:10 – Testing the Form & Submitting Data
24:00 – What’s Coming in the Next Video (Controller + Select)