Loading video player...
π Source Code π GitHub Repo: https://github.com/thapatechnical/job-portal-nextjs ---------------------------------------------------------------------------------- Learn how to build a complete Applicant Profile Settings Page UI using Next.js, React Hook Form, TypeScript, Tailwind CSS, and ShadCN UI. In this tutorial, we create a structured profile form divided into Basic Details, Personal Details, and Professional Details using RHF best practices like register, Controller, and Select components. This video focuses purely on UI + Form Handling, no backend or database β perfect for frontend developers mastering real-world dashboard forms. ------------------------------------------------------------------------------------ π 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 Intro β Applicant Profile Settings Form 1:30 How We Will Build It β Overview 3:20 Understanding the UI Structure 6:20 ShadCN vs RHF Select Issue β Theory 8:40 Folder Structure of Settings Page 9:20 Applicant Settings Page Code 10:30 Understanding React Hook Form Setup 12:02 Card Layout β Basic Details 15:40 Handling Text Inputs with register() 18:05 Personal Details Card 19:32 Controller Component for Select 23:10 Professional Profile Card Explained 24:12 Resume Upload Card Code 26:30 Save Changes Button Logic 26:50 Form Submission using RHF 28:05 Outro