A multi-step Job Application form built using Nextjs 14, Zustand for state management, and Zod for schema validation. This form captures personal information, experience, and educational background from applicants, with validation to ensure correctness of the data entered.
🔗 GitHub Repo: https://github.com/thetechmaze/job-app-multi-step-form-nextjs
🔧 Technologies Used:
Nextjs
Tailwind CSS
Zustand
Zod
📦 Similar Videos:
Get Form Submissions to your Inbox in Nextjs 14 with web3forms - https://youtu.be/23C_-FpEQg8
Step-by-Step: Build a Todo App with Next.js 14, DynamoDB - https://youtu.be/BSD7sHSWrLw
🔔 Don't forget to subscribe!
If you found this tutorial helpful, please like the video, comment, and subscribe for more tech tutorials!
TimeStamps:
00:00:00 - Intro
00:00:25 - Demo
00:02:08 - Nextjs Setup and Dependency Installation
00:03:28 - Creating Schema for Validation and its types
00:06:16 - Creating ExperienceInfoSchema
00:10:32 - Creating EducationBackgroundSchema
00:13:20 - Creating FormDataSchema
00:14:11 - Creating types for the data
00:17:27 - Building store.ts
00:29:45 - Creating Initial Component files
00:39:33 - Creating ProgressBar
00:52:07 - Creating PersonalInfo Component
01:02:42 - Creating ExperienceInfo Component
01:22:38 - Creating EducationBackground Component
01:30:29 - Creating ReviewSubmit Component
01:38:26 - Buillding the App