Add form validation, providers, and onboarding hooks by Chaithra0206 · Pull Request #48 · Developer-Kommunity-24/hire-me

Chaithra0206 · 2026-09-06T09:08:43Z

Standardized state management, form handling, and validation across apps/web.

Changes

Added TanStack Query, React Hook Form, Zod, and Sonner.
Added a global Providers component for React Query and toast notifications.
Updated login and onboarding forms to use React Hook Form with Zod validation.
Added mutation hooks for social sign-in, profile saving, and user role updates.
Added lib/env.ts for validating required environment variables.
Improved form input performance and removed the typing lag in the existing forms.

dev-shetty · 2026-09-06T09:30:35Z

+    defaultValues: {
+      name: '',
+      email: '',
+    },


default values can be a seperate object outside, to keep the code lean

dev-shetty · 2026-09-06T09:40:30Z

                      <input
                        id="name-input"
                        type="text"
-                        value={name}
-                        onChange={(e) => setName(e.target.value)}
+                        {...register('name')}
                        onFocus={() => {
                          setState((s) => ({ ...s, focusedField: 'email' }))
                          sound.playPop(380)
                        }}
                        onBlur={() => setState((s) => ({ ...s, focusedField: 'none' }))}
                        placeholder="Your full name"
-                        className="w-full px-3.5 py-2.5 rounded-xl border border-zinc-200 text-sm focus:outline-none focus:ring-2 focus:ring-zinc-900/10 focus:border-zinc-900 transition bg-zinc-50/50 hover:bg-zinc-50"
+                        className="w-full px-3.5 py-2.5 rounded-xl border border-zinc-200 text-sm focus:outline-none focus:ring-2 focus:ring-zinc-900/10 focus:border-zinc-900 transition bg-zinc-50/50 hover:bg-zinc-50 text-zinc-900"
                      />


lets use the shadcn input, also ig it has inbuilt support for react-hook-form iirc

dev-shetty · 2026-09-06T09:40:51Z

+    defaultValues: {
+      companyName: '',
+      companyMail: '',
+      companyUrl: '',
+      headquartersLocation: '',
+    },


move outside

dev-shetty · 2026-09-06T09:41:14Z

+
+      setTimeout(() => {
+        router.push('/landing')
+      }, 1400)


okay, what is the obsession with 1400? and can we have it as a constant var

Not strictly necessary for functionality it was just added to let the confetti play before redirecting.

yeah but the 1400 ms timer is weird, either it can be 1s or 2s, not sure how we came with 1400. wanted to know that

I saw 1400 in 4-5 places, if its a calculated number then it shld be written in constants, so it can be easier to share with others, if not we shld follow whole seconds to keep things simple

dev-shetty · 2026-09-06T09:52:07Z

+          spread: 80,
+          origin: { y: 0.6 },
+          colors: ['#00C26D', '#34D399', '#6366F1', '#3B82F6'],
+        })


saw the same thing above, we can make this a reusable util function, so we just call showConfetti() and we dont have to define the colors and all again.

Even the particleCount and spread are different from the above one, is it intended?

if yes we can just make the CONFETTI_COLORS a shared constant, and keep others same

dev-shetty · 2026-09-06T09:52:55Z

+      graduationYear: '2026',
+      gpa: '',
+      specialization: '',
+      skills: ['React', 'TypeScript', 'Next.js', 'Tailwind CSS'],


why is this hardcoded as default skills? we shld not, not everyone will be web dev, will create bad UX. and will overpopulate these skills for no reason

dev-shetty · 2026-09-06T09:54:30Z

@@ -216,7 +220,7 @@ export default function RecruiterOnboardingPage() {
                  <g transform="translate(102, 172)">
                    <circle cx="9" cy="9" r="8" fill="var(--brand-green)" />
                    <circle cx="9" cy="7" r="3.2" fill="#FFFFFF" />
-                    <path d="M 4,14 C 4,11 6.5,10 9,10 C 11.5,10 14,14 14,14 Z" fill="#FFFFFF" />
+                    <path d="M 4,14 C 4,11 6.5,10 9,10 C 11.5,10 14,11 14,14 Z" fill="#FFFFFF" />
                    <rect x="24" y="4" width="65" height="4" rx="2" fill="#94A3B8" />
                    <rect x="24" y="11" width="40" height="3" rx="1.5" fill="var(--border-muted)" />
                  </g>


lets avoid hardcoded svgs, please use icon libraries, iirc lucide-icons comes with shadcn

dev-shetty · 2026-09-06T09:55:09Z

+                      })}
+                      onFocus={() => {
+                        setState((s) => ({ ...s, focusedField: 'email' }))
+                        sound.playPop(420)


whats 420 here? magic number, please put it in a constant, and why are we playing sounds?

420 Hz is the pitch for the playful sound effect. I can pull it into a named constant or disable the sounds if you’d rather keep it silent!

yeah lets keep it silent

Chaithra0206 · 2026-09-06T10:51:45Z

Move defaultValues out of the page components and define them as constants in login/page.tsx, recruiter/page.tsx, and student/page.tsx.
Replace the raw <input> elements in login/page.tsx with the shared shadcn Input component.
Define and share the SelfAssignableRole type across auth.schema.ts, use-auth.ts, use-onboarding.ts, and role-select/page.tsx.
Remove the localStorage logic from use-onboarding.ts
Created a reusable generic useSaveProfile<TData>(role) hook to handle both student and recruiter profile save mutations.
Added a shared showConfetti() helper and ONBOARDING_REDIRECT_DELAY_MS constant in lib/utils/confetti.ts.
Reset the default student onboarding skills value to an empty array
Replace the error banner in student onboarding with inline, per-field error messages below the relevant inputs.
Replaced the hardcoded SVG illustration in recruiter/page.tsx with Lucide icons.

dev-shetty · 2026-09-06T12:05:43Z

+                      className={`w-full px-3.5 py-2.5 rounded-xl border text-sm text-zinc-900 placeholder:text-zinc-400 focus:outline-none transition bg-zinc-50/40 hover:bg-zinc-50 ${
+                        state.focusedField === 'email'
+                          ? 'border-zinc-900 ring-2 ring-zinc-900/10 bg-white'
+                          : 'border-zinc-200'


lets avoid ternaries, can u use classNames here from shadcn package?

Add form validation, providers, and onboarding hooks

9df0aaf

dev-shetty requested changes Sep 6, 2026

View reviewed changes

address code review feedback across auth and onboarding

047506e

dev-shetty reviewed Sep 6, 2026

View reviewed changes

Disable sound effects in login UI

da79718

Chaithra0206 merged commit d65e6de into Developer-Kommunity-24:main Sep 6, 2026
1 check passed

Conversation

Chaithra0206 commented Sep 6, 2026

Changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Chaithra0206 commented Sep 6, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants