From 9df0aaf55c4ac331c89f9a5e9d26fa5c93daa687 Mon Sep 17 00:00:00 2001
From: Chaithra S <schaithra2006@gmail.com>
Date: Sun, 6 Sep 2026 14:34:41 +0530
Subject: [PATCH 1/3] Add form validation, providers, and onboarding hooks

---
 apps/web/app/(auth)/login/page.test.tsx       |  27 ++-
 apps/web/app/(auth)/login/page.tsx            | 125 +++++-----
 apps/web/app/(auth)/role-select/page.test.tsx |  15 +-
 apps/web/app/(auth)/role-select/page.tsx      |   7 +-
 apps/web/app/(onboarding)/recruiter/page.tsx  | 140 +++++++-----
 apps/web/app/(onboarding)/student/page.tsx    | 216 ++++++++++--------
 apps/web/app/layout.tsx                       |   3 +-
 apps/web/app/providers.tsx                    |  27 +++
 apps/web/components/ui/form-field.tsx         |  42 ++++
 apps/web/lib/env.ts                           |  28 +++
 apps/web/lib/hooks/use-auth.ts                |  52 +++++
 apps/web/lib/hooks/use-onboarding.ts          |  71 ++++++
 apps/web/lib/schemas/auth.schema.ts           |   8 +
 .../schemas/recruiter-onboarding.schema.ts    |  20 ++
 .../lib/schemas/student-onboarding.schema.ts  |  47 ++++
 apps/web/package.json                         |   7 +-
 pnpm-lock.yaml                                |  71 +++---
 17 files changed, 650 insertions(+), 256 deletions(-)
 create mode 100644 apps/web/app/providers.tsx
 create mode 100644 apps/web/components/ui/form-field.tsx
 create mode 100644 apps/web/lib/env.ts
 create mode 100644 apps/web/lib/hooks/use-auth.ts
 create mode 100644 apps/web/lib/hooks/use-onboarding.ts
 create mode 100644 apps/web/lib/schemas/auth.schema.ts
 create mode 100644 apps/web/lib/schemas/recruiter-onboarding.schema.ts
 create mode 100644 apps/web/lib/schemas/student-onboarding.schema.ts

diff --git a/apps/web/app/(auth)/login/page.test.tsx b/apps/web/app/(auth)/login/page.test.tsx
index ffac55e..fcc8fa3 100644
--- a/apps/web/app/(auth)/login/page.test.tsx
+++ b/apps/web/app/(auth)/login/page.test.tsx
@@ -1,5 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { Providers } from '@/app/providers'
 import LoginPage from './page'
 
 // ==========================================
@@ -17,6 +18,10 @@ vi.mock('./CharactersScene', () => ({
   CharactersScene: () => <div data-testid="characters-scene" />,
 }))
 
+function renderWithProviders(ui: React.ReactElement) {
+  return render(<Providers>{ui}</Providers>)
+}
+
 // ==========================================
 // TESTS
 // ==========================================
@@ -27,14 +32,14 @@ describe('LoginPage', () => {
   })
 
   it('renders the Google and email options', () => {
-    render(<LoginPage />)
+    renderWithProviders(<LoginPage />)
 
     expect(screen.getByRole('button', { name: /continue with google/i })).toBeInTheDocument()
     expect(screen.getByLabelText(/email/i)).toBeInTheDocument()
   })
 
   it('starts the Google handshake and returns to role selection', async () => {
-    render(<LoginPage />)
+    renderWithProviders(<LoginPage />)
 
     fireEvent.click(screen.getByRole('button', { name: /continue with google/i }))
 
@@ -47,7 +52,7 @@ describe('LoginPage', () => {
   })
 
   it('shows a redirect notice while the handshake starts', async () => {
-    render(<LoginPage />)
+    renderWithProviders(<LoginPage />)
 
     fireEvent.click(screen.getByRole('button', { name: /continue with google/i }))
 
@@ -57,18 +62,30 @@ describe('LoginPage', () => {
   it('surfaces a failure to start the handshake', async () => {
     socialMock.mockResolvedValue({ error: { message: 'Provider unavailable' } })
 
-    render(<LoginPage />)
+    renderWithProviders(<LoginPage />)
     fireEvent.click(screen.getByRole('button', { name: /continue with google/i }))
 
     expect(await screen.findByRole('alert')).toHaveTextContent('Provider unavailable')
   })
 
   it('does not fake a session when the email form is submitted', async () => {
-    render(<LoginPage />)
+    renderWithProviders(<LoginPage />)
 
+    fireEvent.change(screen.getByLabelText(/email/i), { target: { value: 'user@example.com' } })
     fireEvent.click(screen.getByRole('button', { name: /continue with email/i }))
 
     expect(await screen.findByRole('alert')).toHaveTextContent(/isn't available yet/i)
     expect(socialMock).not.toHaveBeenCalled()
   })
+
+  it('validates email format with Zod schema', async () => {
+    renderWithProviders(<LoginPage />)
+
+    fireEvent.change(screen.getByLabelText(/email/i), { target: { value: 'invalid-email' } })
+    fireEvent.click(screen.getByRole('button', { name: /continue with email/i }))
+
+    expect(await screen.findByRole('alert')).toHaveTextContent(
+      /please enter a valid email address/i,
+    )
+  })
 })
diff --git a/apps/web/app/(auth)/login/page.tsx b/apps/web/app/(auth)/login/page.tsx
index 9d6d4ea..de7f1b7 100644
--- a/apps/web/app/(auth)/login/page.tsx
+++ b/apps/web/app/(auth)/login/page.tsx
@@ -1,8 +1,13 @@
 'use client'
 
+import { zodResolver } from '@hookform/resolvers/zod'
 import { ArrowRight, Loader2 } from 'lucide-react'
-import { useState, type ChangeEvent, type FormEvent } from 'react'
-import { authClient } from '@/lib/auth/client'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+
+import { FormField } from '@/components/ui/form-field'
+import { useSocialSignIn } from '@/lib/hooks/use-auth'
+import { loginSchema, type LoginInput } from '@/lib/schemas/auth.schema'
 import { CharactersScene, type CharacterSceneState } from './CharactersScene'
 import { sound } from './audio'
 
@@ -42,18 +47,22 @@ export default function LoginPage() {
   })
 
   const [isSignUp, setIsSignUp] = useState(false)
-  const [name, setName] = useState('')
-  const [email, setEmail] = useState('')
   const [isRedirecting, setIsRedirecting] = useState(false)
   const [errorMsg, setErrorMsg] = useState('')
 
-  const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value
-    setEmail(val)
-    setState((s) => ({ ...s, emailLength: val.length }))
-    sound.playKeystroke(val.length)
-    setErrorMsg('')
-  }
+  const socialSignInMutation = useSocialSignIn()
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginInput>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+    },
+  })
 
   const failWith = (message: string) => {
     setIsRedirecting(false)
@@ -62,12 +71,7 @@ export default function LoginPage() {
     sound.playError()
   }
 
-  /**
-   * Email sign-in is not wired up yet — Google is the only provider. The fields
-   * stay in place for a later change, but submitting must never fake a session.
-   */
-  const handleSubmit = (e: FormEvent) => {
-    e.preventDefault()
+  const onSubmit = () => {
     failWith("Email sign-in isn't available yet — continue with Google.")
   }
 
@@ -77,15 +81,15 @@ export default function LoginPage() {
     setState((s) => ({ ...s, isError: false }))
     sound.playPop(520)
 
-    const { error } = await authClient.signIn.social({
-      provider: 'google',
-      callbackURL: '/role-select',
-    })
-
-    // On success the browser navigates to Google, so this only runs when the
-    // handshake could not be started at all.
-    if (error) {
-      failWith(error.message ?? 'Could not start Google sign-in. Please try again.')
+    try {
+      await socialSignInMutation.mutateAsync({
+        provider: 'google',
+        callbackURL: '/role-select',
+      })
+    } catch (err: unknown) {
+      const message =
+        err instanceof Error ? err.message : 'Could not start Google sign-in. Please try again.'
+      failWith(message)
     }
   }
 
@@ -141,59 +145,50 @@ export default function LoginPage() {
                 </div>
 
                 {/* Form */}
-                <form onSubmit={handleSubmit} className="space-y-4">
+                <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
                   {isSignUp && (
-                    <div className="space-y-1.5 text-left">
-                      <label
-                        htmlFor="name-input"
-                        className="text-xs font-semibold text-zinc-700 block"
-                      >
-                        Name
-                      </label>
+                    <FormField label="Name" htmlFor="name-input" error={errors.name?.message}>
                       <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"
                       />
-                    </div>
+                    </FormField>
                   )}
 
                   {/* Email Field */}
-                  <div className="space-y-1.5 text-left">
-                    <label
-                      htmlFor="email-input"
-                      className="text-xs font-semibold text-zinc-700 block"
-                    >
-                      Email
-                    </label>
-                    <div className="relative">
-                      <input
-                        id="email-input"
-                        type="email"
-                        value={email}
-                        onChange={handleEmailChange}
-                        onFocus={() => {
-                          setState((s) => ({ ...s, focusedField: 'email' }))
-                          sound.playPop(420)
-                        }}
-                        onBlur={() => setState((s) => ({ ...s, focusedField: 'none' }))}
-                        placeholder="Enter your email"
-                        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'
-                        }`}
-                      />
-                    </div>
-                  </div>
+                  <FormField label="Email" htmlFor="email-input" error={errors.email?.message}>
+                    <input
+                      id="email-input"
+                      type="email"
+                      {...register('email', {
+                        onChange: (e) => {
+                          const val = e.target.value
+                          setState((s) => ({ ...s, emailLength: val.length }))
+                          sound.playKeystroke(val.length)
+                          setErrorMsg('')
+                        },
+                      })}
+                      onFocus={() => {
+                        setState((s) => ({ ...s, focusedField: 'email' }))
+                        sound.playPop(420)
+                      }}
+                      onBlur={() => setState((s) => ({ ...s, focusedField: 'none' }))}
+                      placeholder="Enter your email"
+                      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'
+                      }`}
+                    />
+                  </FormField>
 
                   {/* Error banner */}
                   {errorMsg && (
diff --git a/apps/web/app/(auth)/role-select/page.test.tsx b/apps/web/app/(auth)/role-select/page.test.tsx
index 63694bf..3099856 100644
--- a/apps/web/app/(auth)/role-select/page.test.tsx
+++ b/apps/web/app/(auth)/role-select/page.test.tsx
@@ -1,6 +1,7 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ApiError } from '@/lib/api-client'
+import { Providers } from '@/app/providers'
 import RoleSelectPage from './page'
 
 // ==========================================
@@ -23,6 +24,10 @@ vi.mock('@/lib/api-client', async (importOriginal) => {
   return { ...actual, apiFetch: apiFetchMock }
 })
 
+function renderWithProviders(ui: React.ReactElement) {
+  return render(<Providers>{ui}</Providers>)
+}
+
 // ==========================================
 // HELPERS
 // ==========================================
@@ -42,7 +47,7 @@ describe('RoleSelectPage', () => {
   })
 
   it('persists the student role before navigating', async () => {
-    render(<RoleSelectPage />)
+    renderWithProviders(<RoleSelectPage />)
 
     clickRole('student')
 
@@ -56,7 +61,7 @@ describe('RoleSelectPage', () => {
   })
 
   it('persists the recruiter role before navigating', async () => {
-    render(<RoleSelectPage />)
+    renderWithProviders(<RoleSelectPage />)
 
     clickRole('recruiter')
 
@@ -72,7 +77,7 @@ describe('RoleSelectPage', () => {
   it('sends an expired session back to sign in', async () => {
     apiFetchMock.mockRejectedValue(new ApiError(401, 'Your session has expired.'))
 
-    render(<RoleSelectPage />)
+    renderWithProviders(<RoleSelectPage />)
     clickRole('student')
 
     await waitFor(() => expect(pushMock).toHaveBeenCalledWith('/login'))
@@ -82,7 +87,7 @@ describe('RoleSelectPage', () => {
   it('reports a failed save and stays put', async () => {
     apiFetchMock.mockRejectedValue(new ApiError(500, 'Something went wrong'))
 
-    render(<RoleSelectPage />)
+    renderWithProviders(<RoleSelectPage />)
     clickRole('student')
 
     expect(await screen.findByRole('alert')).toHaveTextContent('Something went wrong')
@@ -92,7 +97,7 @@ describe('RoleSelectPage', () => {
   it('reports a network failure in plain language', async () => {
     apiFetchMock.mockRejectedValue(new TypeError('Failed to fetch'))
 
-    render(<RoleSelectPage />)
+    renderWithProviders(<RoleSelectPage />)
     clickRole('student')
 
     expect(await screen.findByRole('alert')).toHaveTextContent(/check your connection/i)
diff --git a/apps/web/app/(auth)/role-select/page.tsx b/apps/web/app/(auth)/role-select/page.tsx
index 2982454..40c9605 100644
--- a/apps/web/app/(auth)/role-select/page.tsx
+++ b/apps/web/app/(auth)/role-select/page.tsx
@@ -4,7 +4,8 @@ import { motion } from 'motion/react'
 import { ArrowRight, Check } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { useEffect, useRef, useState, type MouseEvent } from 'react'
-import { ApiError, apiFetch } from '@/lib/api-client'
+import { ApiError } from '@/lib/api-client'
+import { useSetUserRole } from '@/lib/hooks/use-auth'
 
 export default function RoleSelectPage() {
   const router = useRouter()
@@ -37,6 +38,8 @@ export default function RoleSelectPage() {
     return () => clearInterval(interval)
   }, [])
 
+  const setRoleMutation = useSetUserRole()
+
   /**
    * Persists the chosen role, then moves on to the matching dashboard.
    *
@@ -51,7 +54,7 @@ export default function RoleSelectPage() {
     setErrorMsg('')
 
     try {
-      await apiFetch('/api/users/me/role', { method: 'PATCH', body: { role } })
+      await setRoleMutation.mutateAsync(role)
     } catch (error) {
       // An expired session cannot be recovered here — send them back to sign in.
       if (error instanceof ApiError && error.status === 401) {
diff --git a/apps/web/app/(onboarding)/recruiter/page.tsx b/apps/web/app/(onboarding)/recruiter/page.tsx
index 90912ce..d770535 100644
--- a/apps/web/app/(onboarding)/recruiter/page.tsx
+++ b/apps/web/app/(onboarding)/recruiter/page.tsx
@@ -1,10 +1,18 @@
 'use client'
 
+import { zodResolver } from '@hookform/resolvers/zod'
 import { ArrowLeft, ArrowRight, Building2, Globe, Mail, MapPin, Sparkles, X } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
+import { useForm } from 'react-hook-form'
 import confetti from 'canvas-confetti'
 
+import { useSaveRecruiterProfile } from '@/lib/hooks/use-onboarding'
+import {
+  recruiterOnboardingSchema,
+  type RecruiterOnboardingInput,
+} from '@/lib/schemas/recruiter-onboarding.schema'
+
 export interface RecruiterProfileData {
   companyName: string
   companyMail: string
@@ -14,54 +22,50 @@ export interface RecruiterProfileData {
 
 export default function RecruiterOnboardingPage() {
   const router = useRouter()
-
-  const [companyName, setCompanyName] = useState('')
-  const [companyMail, setCompanyMail] = useState('')
-  const [companyUrl, setCompanyUrl] = useState('')
-  const [headquartersLocation, setHeadquartersLocation] = useState('')
   const [errorMsg, setErrorMsg] = useState('')
   const [isCompleted, setIsCompleted] = useState(false)
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-
-    if (!companyName.trim()) {
-      setErrorMsg('Please enter your company name.')
-      return
-    }
-
-    if (!companyMail.trim()) {
-      setErrorMsg('Please enter your company work email.')
-      return
-    }
-
+  const saveRecruiterMutation = useSaveRecruiterProfile()
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<RecruiterOnboardingInput>({
+    resolver: zodResolver(recruiterOnboardingSchema),
+    defaultValues: {
+      companyName: '',
+      companyMail: '',
+      companyUrl: '',
+      headquartersLocation: '',
+    },
+  })
+
+  const onSubmit = async (data: RecruiterOnboardingInput) => {
     setErrorMsg('')
-
-    const recruiterProfile: RecruiterProfileData = {
-      companyName: companyName.trim(),
-      companyMail: companyMail.trim(),
-      companyUrl: companyUrl.trim(),
-      headquartersLocation: headquartersLocation.trim(),
-    }
-
-    localStorage.setItem('recruiter_profile', JSON.stringify(recruiterProfile))
-    localStorage.setItem('user_role', 'recruiter')
-    setIsCompleted(true)
-
     try {
-      confetti({
-        particleCount: 90,
-        spread: 75,
-        origin: { y: 0.6 },
-        colors: ['#00C26D', '#34D399', '#10B981', '#059669', '#3B82F6'],
-      })
-    } catch {
-      // Confetti fallback
+      await saveRecruiterMutation.mutateAsync(data)
+      setIsCompleted(true)
+
+      try {
+        confetti({
+          particleCount: 90,
+          spread: 75,
+          origin: { y: 0.6 },
+          colors: ['#00C26D', '#34D399', '#10B981', '#059669', '#3B82F6'],
+        })
+      } catch {
+        // Confetti fallback
+      }
+
+      setTimeout(() => {
+        router.push('/landing')
+      }, 1400)
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        setErrorMsg(err.message)
+      }
     }
-
-    setTimeout(() => {
-      router.push('/landing')
-    }, 1400)
   }
 
   const handleBack = () => {
@@ -207,7 +211,7 @@ export default function RecruiterOnboardingPage() {
                   <g transform="translate(102, 147)">
                     <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="80" height="4" rx="2" fill="#94A3B8" />
                     <rect x="24" y="11" width="55" height="3" rx="1.5" fill="var(--border-muted)" />
                   </g>
@@ -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>
@@ -304,7 +308,8 @@ export default function RecruiterOnboardingPage() {
 
             {/* 4 Form Fields Form */}
             <form
-              onSubmit={handleSubmit}
+              onSubmit={handleSubmit(onSubmit)}
+              noValidate
               className="flex-1 py-3 flex flex-col justify-center space-y-4"
             >
               {/* Field 1: Company Name */}
@@ -316,13 +321,16 @@ export default function RecruiterOnboardingPage() {
                   <Building2 className="w-4 h-4 text-slate-400 absolute left-3.5 pointer-events-none" />
                   <input
                     type="text"
-                    required
-                    value={companyName}
-                    onChange={(e) => setCompanyName(e.target.value)}
+                    {...register('companyName')}
                     placeholder="e.g. Acme Innovations Inc."
                     className="w-full pl-10 pr-3.5 py-2.5 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card placeholder:text-slate-400"
                   />
                 </div>
+                {errors.companyName && (
+                  <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
+                    {errors.companyName.message}
+                  </p>
+                )}
               </div>
 
               {/* Field 2: Company Work Email */}
@@ -334,16 +342,20 @@ export default function RecruiterOnboardingPage() {
                   <Mail className="w-4 h-4 text-slate-400 absolute left-3.5 pointer-events-none" />
                   <input
                     type="email"
-                    required
-                    value={companyMail}
-                    onChange={(e) => setCompanyMail(e.target.value)}
+                    {...register('companyMail')}
                     placeholder="recruiting@company.com"
                     className="w-full pl-10 pr-3.5 py-2.5 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card placeholder:text-slate-400"
                   />
                 </div>
-                <p className="text-[11px] text-text-muted mt-1">
-                  Official corporate email for candidate correspondence and verification.
-                </p>
+                {errors.companyMail ? (
+                  <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
+                    {errors.companyMail.message}
+                  </p>
+                ) : (
+                  <p className="text-[11px] text-text-muted mt-1">
+                    Official corporate email for candidate correspondence and verification.
+                  </p>
+                )}
               </div>
 
               {/* Field 3: Company Website URL */}
@@ -355,12 +367,16 @@ export default function RecruiterOnboardingPage() {
                   <Globe className="w-4 h-4 text-slate-400 absolute left-3.5 pointer-events-none" />
                   <input
                     type="url"
-                    value={companyUrl}
-                    onChange={(e) => setCompanyUrl(e.target.value)}
+                    {...register('companyUrl')}
                     placeholder="https://acme.example.com"
                     className="w-full pl-10 pr-3.5 py-2.5 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card placeholder:text-slate-400"
                   />
                 </div>
+                {errors.companyUrl && (
+                  <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
+                    {errors.companyUrl.message}
+                  </p>
+                )}
               </div>
 
               {/* Field 4: Headquarters Location */}
@@ -372,12 +388,16 @@ export default function RecruiterOnboardingPage() {
                   <MapPin className="w-4 h-4 text-slate-400 absolute left-3.5 pointer-events-none" />
                   <input
                     type="text"
-                    value={headquartersLocation}
-                    onChange={(e) => setHeadquartersLocation(e.target.value)}
+                    {...register('headquartersLocation')}
                     placeholder="e.g. Bengaluru, India or San Francisco, CA"
                     className="w-full pl-10 pr-3.5 py-2.5 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card placeholder:text-slate-400"
                   />
                 </div>
+                {errors.headquartersLocation && (
+                  <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
+                    {errors.headquartersLocation.message}
+                  </p>
+                )}
               </div>
 
               {/* Bottom Actions Bar */}
@@ -395,8 +415,8 @@ export default function RecruiterOnboardingPage() {
                 {/* Complete Setup Button */}
                 <button
                   type="submit"
-                  disabled={isCompleted}
-                  className="flex items-center gap-2 px-6 py-2.5 rounded-xl bg-action-dark hover:bg-black text-white font-semibold text-xs sm:text-sm transition shadow-md hover:shadow-lg cursor-pointer active:scale-[0.98]"
+                  disabled={isCompleted || saveRecruiterMutation.isPending}
+                  className="flex items-center gap-2 px-6 py-2.5 rounded-xl bg-action-dark hover:bg-black text-white font-semibold text-xs sm:text-sm transition shadow-md hover:shadow-lg cursor-pointer active:scale-[0.98] disabled:opacity-70"
                 >
                   <span>{isCompleted ? 'Profile Created!' : 'Complete Setup'}</span>
                   {isCompleted ? (
diff --git a/apps/web/app/(onboarding)/student/page.tsx b/apps/web/app/(onboarding)/student/page.tsx
index 7602124..5fba56d 100644
--- a/apps/web/app/(onboarding)/student/page.tsx
+++ b/apps/web/app/(onboarding)/student/page.tsx
@@ -1,9 +1,18 @@
 'use client'
 
+import { zodResolver } from '@hookform/resolvers/zod'
+import confetti from 'canvas-confetti'
 import { motion, AnimatePresence } from 'motion/react'
 import { ArrowLeft, ArrowRight, Check, FileText, Globe, Plus, Sparkles, X } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { useEffect, useRef, useState, type MouseEvent } from 'react'
+import { useForm } from 'react-hook-form'
+
+import { useSaveStudentProfile } from '@/lib/hooks/use-onboarding'
+import {
+  studentCompleteOnboardingSchema,
+  type StudentOnboardingInput,
+} from '@/lib/schemas/student-onboarding.schema'
 
 function GithubIcon({ className = 'w-4 h-4' }: { className?: string }) {
   return (
@@ -29,33 +38,48 @@ export default function StudentOnboardingPage() {
   const router = useRouter()
   const [step, setStep] = useState<1 | 2 | 3 | 4>(1)
   const [isCompleted, setIsCompleted] = useState(false)
-
-  // Step 1: Basic Details
-  const [fullName, setFullName] = useState('')
-  const [headline, setHeadline] = useState('')
-  const [bio, setBio] = useState('')
+  const [newSkillInput, setNewSkillInput] = useState('')
   const [step1Error, setStep1Error] = useState('')
-
-  // Step 2: Education
-  const [school, setSchool] = useState('')
-  const [degree, setDegree] = useState('')
-  const [graduationYear, setGraduationYear] = useState('2026')
-  const [gpa, setGpa] = useState('')
-  const [specialization, setSpecialization] = useState('')
   const [step2Error, setStep2Error] = useState('')
 
-  // Step 3: Skills & Experience
-  const [skills, setSkills] = useState<string[]>(['React', 'TypeScript', 'Next.js', 'Tailwind CSS'])
-  const [newSkillInput, setNewSkillInput] = useState('')
-  const [experienceRole, setExperienceRole] = useState('')
-  const [experienceCompany, setExperienceCompany] = useState('')
-  const [experienceSummary, setExperienceSummary] = useState('')
+  const saveStudentMutation = useSaveStudentProfile()
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    trigger,
+    formState: { errors },
+  } = useForm<StudentOnboardingInput>({
+    resolver: zodResolver(studentCompleteOnboardingSchema),
+    mode: 'onTouched',
+    defaultValues: {
+      fullName: '',
+      headline: '',
+      bio: '',
+      school: '',
+      degree: '',
+      graduationYear: '2026',
+      gpa: '',
+      specialization: '',
+      skills: ['React', 'TypeScript', 'Next.js', 'Tailwind CSS'],
+      experienceRole: '',
+      experienceCompany: '',
+      experienceSummary: '',
+      githubUrl: '',
+      linkedinUrl: '',
+      portfolioUrl: '',
+      resumeUrl: '',
+    },
+  })
 
-  // Step 4: Links & Finish
-  const [githubUrl, setGithubUrl] = useState('')
-  const [linkedinUrl, setLinkedinUrl] = useState('')
-  const [portfolioUrl, setPortfolioUrl] = useState('')
-  const [resumeUrl, setResumeUrl] = useState('')
+  const fullName = watch('fullName') || ''
+  const headline = watch('headline') || ''
+  const bio = watch('bio') || ''
+  const school = watch('school') || ''
+  const degree = watch('degree') || ''
+  const skills = watch('skills') || []
 
   // Interactive Character Eye Tracking & Blinking
   const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
@@ -89,26 +113,56 @@ export default function StudentOnboardingPage() {
     const target = (skillToAdd || newSkillInput).trim()
     if (!target) return
     if (!skills.includes(target)) {
-      setSkills([...skills, target])
+      setValue('skills', [...skills, target], { shouldValidate: true })
     }
     setNewSkillInput('')
   }
 
   const handleRemoveSkill = (skillToRemove: string) => {
-    setSkills(skills.filter((s) => s !== skillToRemove))
+    setValue(
+      'skills',
+      skills.filter((s) => s !== skillToRemove),
+      { shouldValidate: true },
+    )
+  }
+
+  const onFinalSubmit = async (data: StudentOnboardingInput) => {
+    try {
+      await saveStudentMutation.mutateAsync(data)
+      setIsCompleted(true)
+
+      try {
+        confetti({
+          particleCount: 100,
+          spread: 80,
+          origin: { y: 0.6 },
+          colors: ['#00C26D', '#34D399', '#6366F1', '#3B82F6'],
+        })
+      } catch {
+        // Fallback
+      }
+
+      setTimeout(() => {
+        router.push('/landing')
+      }, 1400)
+    } catch {
+      // Error handled in mutation
+    }
   }
 
   // Stepper navigation
-  const handleNext = () => {
+  const handleNext = async () => {
     if (step === 1) {
-      if (!fullName.trim() || !headline.trim()) {
+      const valid = await trigger(['fullName', 'headline'])
+      if (!fullName.trim() || !headline.trim() || !valid) {
         setStep1Error('Please fill in your full name and headline.')
         return
       }
       setStep1Error('')
       setStep(2)
     } else if (step === 2) {
-      if (!school.trim() || !degree.trim()) {
+      const valid = await trigger(['school', 'degree'])
+      if (!school.trim() || !degree.trim() || !valid) {
         setStep2Error('Please provide your School/University and Degree.')
         return
       }
@@ -117,29 +171,7 @@ export default function StudentOnboardingPage() {
     } else if (step === 3) {
       setStep(4)
     } else if (step === 4) {
-      const studentProfile = {
-        name: fullName.trim(),
-        headline,
-        bio,
-        school,
-        degree,
-        graduationYear,
-        gpa,
-        specialization,
-        skills,
-        experienceRole,
-        experienceCompany,
-        experienceSummary,
-        githubUrl,
-        linkedinUrl,
-        portfolioUrl,
-        resumeUrl,
-      }
-      localStorage.setItem('student_profile', JSON.stringify(studentProfile))
-      setIsCompleted(true)
-      setTimeout(() => {
-        router.push('/student')
-      }, 1200)
+      void handleSubmit(onFinalSubmit)()
     }
   }
 
@@ -564,9 +596,12 @@ export default function StudentOnboardingPage() {
                       </p>
                     </div>
 
-                    {step1Error && (
-                      <div className="p-2.5 rounded-xl bg-red-50 border border-red-200 text-red-700 text-xs font-medium">
-                        {step1Error}
+                    {(step1Error || errors.fullName || errors.headline) && (
+                      <div
+                        className="p-2.5 rounded-xl bg-red-50 border border-red-200 text-red-700 text-xs font-medium"
+                        role="alert"
+                      >
+                        {step1Error || errors.fullName?.message || errors.headline?.message}
                       </div>
                     )}
 
@@ -577,8 +612,7 @@ export default function StudentOnboardingPage() {
                       </label>
                       <input
                         type="text"
-                        value={fullName}
-                        onChange={(e) => setFullName(e.target.value)}
+                        {...register('fullName')}
                         placeholder="e.g. Alex Chen"
                         className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
                       />
@@ -597,8 +631,7 @@ export default function StudentOnboardingPage() {
                       <input
                         type="text"
                         maxLength={80}
-                        value={headline}
-                        onChange={(e) => setHeadline(e.target.value)}
+                        {...register('headline')}
                         placeholder="e.g. CS Student | Full-Stack Developer | Open to Internships"
                         className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
                       />
@@ -615,8 +648,7 @@ export default function StudentOnboardingPage() {
                       <textarea
                         rows={3}
                         maxLength={300}
-                        value={bio}
-                        onChange={(e) => setBio(e.target.value)}
+                        {...register('bio')}
                         placeholder="Tell recruiters a bit about yourself, your interests, and goals..."
                         className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card resize-none"
                       />
@@ -645,9 +677,12 @@ export default function StudentOnboardingPage() {
                       </p>
                     </div>
 
-                    {step2Error && (
-                      <div className="p-2.5 rounded-xl bg-red-50 border border-red-200 text-red-700 text-xs font-medium">
-                        {step2Error}
+                    {(step2Error || errors.school || errors.degree) && (
+                      <div
+                        className="p-2.5 rounded-xl bg-red-50 border border-red-200 text-red-700 text-xs font-medium"
+                        role="alert"
+                      >
+                        {step2Error || errors.school?.message || errors.degree?.message}
                       </div>
                     )}
 
@@ -658,8 +693,7 @@ export default function StudentOnboardingPage() {
                         </label>
                         <input
                           type="text"
-                          value={school}
-                          onChange={(e) => setSchool(e.target.value)}
+                          {...register('school')}
                           placeholder="e.g. Stanford University or MIT"
                           className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
                         />
@@ -672,8 +706,7 @@ export default function StudentOnboardingPage() {
                           </label>
                           <input
                             type="text"
-                            value={degree}
-                            onChange={(e) => setDegree(e.target.value)}
+                            {...register('degree')}
                             placeholder="e.g. B.S. Computer Science"
                             className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
                           />
@@ -684,8 +717,7 @@ export default function StudentOnboardingPage() {
                             Graduation Year <span className="text-red-500">*</span>
                           </label>
                           <select
-                            value={graduationYear}
-                            onChange={(e) => setGraduationYear(e.target.value)}
+                            {...register('graduationYear')}
                             className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card cursor-pointer"
                           >
                             {gradYearOptions.map((year) => (
@@ -704,8 +736,7 @@ export default function StudentOnboardingPage() {
                           </label>
                           <input
                             type="text"
-                            value={gpa}
-                            onChange={(e) => setGpa(e.target.value)}
+                            {...register('gpa')}
                             placeholder="e.g. 3.8 / 4.0"
                             className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
                           />
@@ -717,8 +748,7 @@ export default function StudentOnboardingPage() {
                           </label>
                           <input
                             type="text"
-                            value={specialization}
-                            onChange={(e) => setSpecialization(e.target.value)}
+                            {...register('specialization')}
                             placeholder="e.g. AI / Machine Learning"
                             className="w-full px-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
                           />
@@ -827,15 +857,13 @@ export default function StudentOnboardingPage() {
                       <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
                         <input
                           type="text"
-                          value={experienceRole}
-                          onChange={(e) => setExperienceRole(e.target.value)}
+                          {...register('experienceRole')}
                           placeholder="Role (e.g. Frontend Intern)"
                           className="w-full px-3 py-1.5 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs transition bg-card"
                         />
                         <input
                           type="text"
-                          value={experienceCompany}
-                          onChange={(e) => setExperienceCompany(e.target.value)}
+                          {...register('experienceCompany')}
                           placeholder="Company (e.g. DK24 Labs)"
                           className="w-full px-3 py-1.5 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs transition bg-card"
                         />
@@ -843,8 +871,7 @@ export default function StudentOnboardingPage() {
 
                       <input
                         type="text"
-                        value={experienceSummary}
-                        onChange={(e) => setExperienceSummary(e.target.value)}
+                        {...register('experienceSummary')}
                         placeholder="Brief summary of achievements or projects..."
                         className="w-full px-3 py-1.5 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs transition bg-card"
                       />
@@ -873,6 +900,21 @@ export default function StudentOnboardingPage() {
                       </p>
                     </div>
 
+                    {(errors.githubUrl ||
+                      errors.linkedinUrl ||
+                      errors.portfolioUrl ||
+                      errors.resumeUrl) && (
+                      <div
+                        className="p-2.5 rounded-xl bg-red-50 border border-red-200 text-red-700 text-xs font-medium"
+                        role="alert"
+                      >
+                        {errors.githubUrl?.message ||
+                          errors.linkedinUrl?.message ||
+                          errors.portfolioUrl?.message ||
+                          errors.resumeUrl?.message}
+                      </div>
+                    )}
+
                     <div className="space-y-2.5">
                       {/* GitHub */}
                       <div>
@@ -883,8 +925,7 @@ export default function StudentOnboardingPage() {
                           <GithubIcon className="w-4 h-4 text-slate-400 absolute left-3" />
                           <input
                             type="url"
-                            value={githubUrl}
-                            onChange={(e) => setGithubUrl(e.target.value)}
+                            {...register('githubUrl')}
                             placeholder="https://github.com/yourusername"
                             className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
                           />
@@ -900,8 +941,7 @@ export default function StudentOnboardingPage() {
                           <LinkedinIcon className="w-4 h-4 text-linkedin absolute left-3" />
                           <input
                             type="url"
-                            value={linkedinUrl}
-                            onChange={(e) => setLinkedinUrl(e.target.value)}
+                            {...register('linkedinUrl')}
                             placeholder="https://linkedin.com/in/yourusername"
                             className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
                           />
@@ -917,8 +957,7 @@ export default function StudentOnboardingPage() {
                           <Globe className="w-4 h-4 text-slate-400 absolute left-3" />
                           <input
                             type="url"
-                            value={portfolioUrl}
-                            onChange={(e) => setPortfolioUrl(e.target.value)}
+                            {...register('portfolioUrl')}
                             placeholder="https://yourportfolio.dev"
                             className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
                           />
@@ -934,8 +973,7 @@ export default function StudentOnboardingPage() {
                           <FileText className="w-4 h-4 text-slate-400 absolute left-3" />
                           <input
                             type="url"
-                            value={resumeUrl}
-                            onChange={(e) => setResumeUrl(e.target.value)}
+                            {...register('resumeUrl')}
                             placeholder="https://drive.google.com/... or resume URL"
                             className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
                           />
@@ -963,8 +1001,8 @@ export default function StudentOnboardingPage() {
               <button
                 type="button"
                 onClick={handleNext}
-                disabled={isCompleted}
-                className="flex items-center gap-2 px-5 sm:px-6 py-2 rounded-xl bg-action-dark hover:bg-black text-white font-semibold text-xs sm:text-sm transition shadow-md hover:shadow-lg cursor-pointer active:scale-[0.98]"
+                disabled={isCompleted || saveStudentMutation.isPending}
+                className="flex items-center gap-2 px-5 sm:px-6 py-2 rounded-xl bg-action-dark hover:bg-black text-white font-semibold text-xs sm:text-sm transition shadow-md hover:shadow-lg cursor-pointer active:scale-[0.98] disabled:opacity-70"
               >
                 {step < 4 ? (
                   <>
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 7e6946f..496d06e 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -3,6 +3,7 @@ import { Plus_Jakarta_Sans } from 'next/font/google'
 import type { ReactNode } from 'react'
 
 import './globals.css'
+import { Providers } from './providers'
 
 const plusJakartaSans = Plus_Jakarta_Sans({
   subsets: ['latin'],
@@ -19,7 +20,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={plusJakartaSans.variable}>
       <body className="antialiased font-sans bg-white text-text-main min-h-screen flex flex-col">
-        {children}
+        <Providers>{children}</Providers>
       </body>
     </html>
   )
diff --git a/apps/web/app/providers.tsx b/apps/web/app/providers.tsx
new file mode 100644
index 0000000..9fdee0f
--- /dev/null
+++ b/apps/web/app/providers.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useState, type ReactNode } from 'react'
+import { Toaster } from 'sonner'
+
+export function Providers({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 1000 * 60 * 5, // 5 minutes
+            refetchOnWindowFocus: false,
+            retry: 1,
+          },
+        },
+      }),
+  )
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <Toaster position="top-right" richColors closeButton />
+    </QueryClientProvider>
+  )
+}
diff --git a/apps/web/components/ui/form-field.tsx b/apps/web/components/ui/form-field.tsx
new file mode 100644
index 0000000..5fd21b7
--- /dev/null
+++ b/apps/web/components/ui/form-field.tsx
@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react'
+
+export interface FormFieldProps {
+  label?: string
+  htmlFor?: string
+  error?: string
+  description?: string
+  required?: boolean
+  className?: string
+  children: ReactNode
+}
+
+export function FormField({
+  label,
+  htmlFor,
+  error,
+  description,
+  required,
+  className = '',
+  children,
+}: FormFieldProps) {
+  return (
+    <div className={`space-y-1.5 ${className}`}>
+      {label && (
+        <label
+          htmlFor={htmlFor}
+          className="block text-xs font-semibold uppercase tracking-wider text-text-subtle"
+        >
+          {label}
+          {required && <span className="ml-1 text-rose-500">*</span>}
+        </label>
+      )}
+      {children}
+      {description && !error && <p className="text-xs text-text-subtle/80">{description}</p>}
+      {error && (
+        <p role="alert" className="text-xs font-medium text-rose-500 animate-in fade-in-50">
+          {error}
+        </p>
+      )}
+    </div>
+  )
+}
diff --git a/apps/web/lib/env.ts b/apps/web/lib/env.ts
new file mode 100644
index 0000000..89ad7fb
--- /dev/null
+++ b/apps/web/lib/env.ts
@@ -0,0 +1,28 @@
+import { z } from 'zod'
+
+const envSchema = z.object({
+  NEXT_PUBLIC_API_URL: z.string().url().default('http://localhost:8787'),
+  NEON_AUTH_BASE_URL: z.string().optional(),
+  NEON_AUTH_COOKIE_SECRET: z.string().optional(),
+})
+
+function parseEnv() {
+  const result = envSchema.safeParse({
+    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
+    NEON_AUTH_BASE_URL: process.env.NEON_AUTH_BASE_URL,
+    NEON_AUTH_COOKIE_SECRET: process.env.NEON_AUTH_COOKIE_SECRET,
+  })
+
+  if (!result.success) {
+    console.error('Invalid environment variables:', result.error.format())
+    return {
+      NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8787',
+      NEON_AUTH_BASE_URL: process.env.NEON_AUTH_BASE_URL,
+      NEON_AUTH_COOKIE_SECRET: process.env.NEON_AUTH_COOKIE_SECRET,
+    }
+  }
+
+  return result.data
+}
+
+export const env = parseEnv()
diff --git a/apps/web/lib/hooks/use-auth.ts b/apps/web/lib/hooks/use-auth.ts
new file mode 100644
index 0000000..31420ba
--- /dev/null
+++ b/apps/web/lib/hooks/use-auth.ts
@@ -0,0 +1,52 @@
+'use client'
+
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { authClient } from '@/lib/auth/client'
+import { apiFetch } from '@/lib/api-client'
+import { ONBOARDING_QUERY_KEYS } from './use-onboarding'
+
+export interface SocialSignInOptions {
+  provider: 'google'
+  callbackURL: string
+}
+
+export function useSocialSignIn() {
+  return useMutation({
+    mutationFn: async ({ provider, callbackURL }: SocialSignInOptions) => {
+      const { error } = await authClient.signIn.social({
+        provider,
+        callbackURL,
+      })
+
+      if (error) {
+        throw new Error(error.message ?? 'Could not start sign-in. Please try again.')
+      }
+
+      return true
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Authentication failed')
+    },
+  })
+}
+
+export function useSetUserRole() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (role: 'student' | 'recruiter') => {
+      const data = await apiFetch<{ user: unknown }>('/api/users/me/role', {
+        method: 'PATCH',
+        body: { role },
+      })
+      return data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ONBOARDING_QUERY_KEYS.currentUser })
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Could not save your role.')
+    },
+  })
+}
diff --git a/apps/web/lib/hooks/use-onboarding.ts b/apps/web/lib/hooks/use-onboarding.ts
new file mode 100644
index 0000000..e962046
--- /dev/null
+++ b/apps/web/lib/hooks/use-onboarding.ts
@@ -0,0 +1,71 @@
+'use client'
+
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import type { StudentOnboardingInput } from '@/lib/schemas/student-onboarding.schema'
+import type { RecruiterOnboardingInput } from '@/lib/schemas/recruiter-onboarding.schema'
+import { apiFetch } from '@/lib/api-client'
+
+export const ONBOARDING_QUERY_KEYS = {
+  studentProfile: ['student', 'profile'],
+  recruiterProfile: ['recruiter', 'profile'],
+  currentUser: ['user', 'me'],
+}
+
+export function useSaveStudentProfile() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (data: StudentOnboardingInput) => {
+      localStorage.setItem('student_profile', JSON.stringify(data))
+      localStorage.setItem('user_role', 'student')
+
+      try {
+        await apiFetch('/api/users/me/role', {
+          method: 'PATCH',
+          body: { role: 'student' },
+        })
+      } catch {
+        // Backend sync is optional if auth token is expired or running standalone
+      }
+
+      return data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ONBOARDING_QUERY_KEYS.currentUser })
+      toast.success('Student profile created successfully!')
+    },
+    onError: (err: Error) => {
+      toast.error(err.message || 'Failed to save student profile.')
+    },
+  })
+}
+
+export function useSaveRecruiterProfile() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (data: RecruiterOnboardingInput) => {
+      localStorage.setItem('recruiter_profile', JSON.stringify(data))
+      localStorage.setItem('user_role', 'recruiter')
+
+      try {
+        await apiFetch('/api/users/me/role', {
+          method: 'PATCH',
+          body: { role: 'recruiter' },
+        })
+      } catch {
+        // Backend sync is optional if auth token is expired or running standalone
+      }
+
+      return data
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ONBOARDING_QUERY_KEYS.currentUser })
+      toast.success('Recruiter profile created successfully!')
+    },
+    onError: (err: Error) => {
+      toast.error(err.message || 'Failed to save recruiter profile.')
+    },
+  })
+}
diff --git a/apps/web/lib/schemas/auth.schema.ts b/apps/web/lib/schemas/auth.schema.ts
new file mode 100644
index 0000000..c4815f5
--- /dev/null
+++ b/apps/web/lib/schemas/auth.schema.ts
@@ -0,0 +1,8 @@
+import { z } from 'zod'
+
+export const loginSchema = z.object({
+  name: z.string().optional(),
+  email: z.string().min(1, 'Email is required').email('Please enter a valid email address'),
+})
+
+export type LoginInput = z.infer<typeof loginSchema>
diff --git a/apps/web/lib/schemas/recruiter-onboarding.schema.ts b/apps/web/lib/schemas/recruiter-onboarding.schema.ts
new file mode 100644
index 0000000..245586d
--- /dev/null
+++ b/apps/web/lib/schemas/recruiter-onboarding.schema.ts
@@ -0,0 +1,20 @@
+import { z } from 'zod'
+
+const optionalUrl = z
+  .string()
+  .trim()
+  .refine((val) => val === '' || z.string().url().safeParse(val).success, {
+    message: 'Please enter a valid website URL (e.g. https://company.com)',
+  })
+
+export const recruiterOnboardingSchema = z.object({
+  companyName: z.string().min(2, 'Please enter your company name'),
+  companyMail: z
+    .string()
+    .min(1, 'Please enter your company work email')
+    .email('Please enter a valid work email address'),
+  companyUrl: optionalUrl,
+  headquartersLocation: z.string().optional(),
+})
+
+export type RecruiterOnboardingInput = z.infer<typeof recruiterOnboardingSchema>
diff --git a/apps/web/lib/schemas/student-onboarding.schema.ts b/apps/web/lib/schemas/student-onboarding.schema.ts
new file mode 100644
index 0000000..1b0a66e
--- /dev/null
+++ b/apps/web/lib/schemas/student-onboarding.schema.ts
@@ -0,0 +1,47 @@
+import { z } from 'zod'
+
+export const studentStep1Schema = z.object({
+  fullName: z.string().min(2, 'Full name must be at least 2 characters'),
+  headline: z.string().optional(),
+  bio: z.string().optional(),
+})
+
+export const studentStep2Schema = z.object({
+  school: z.string().min(2, 'School/University name is required'),
+  degree: z.string().min(2, 'Degree is required'),
+  graduationYear: z.string().min(4, 'Graduation year is required'),
+  gpa: z.string().optional(),
+  specialization: z.string().optional(),
+})
+
+export const studentStep3Schema = z.object({
+  skills: z.array(z.string()).min(1, 'Please add at least one skill'),
+  experienceRole: z.string().optional(),
+  experienceCompany: z.string().optional(),
+  experienceSummary: z.string().optional(),
+})
+
+const optionalUrl = z
+  .string()
+  .trim()
+  .refine((val) => val === '' || z.string().url().safeParse(val).success, {
+    message: 'Please enter a valid URL (e.g. https://github.com/username)',
+  })
+
+export const studentStep4Schema = z.object({
+  githubUrl: optionalUrl,
+  linkedinUrl: optionalUrl,
+  portfolioUrl: optionalUrl,
+  resumeUrl: optionalUrl,
+})
+
+export const studentCompleteOnboardingSchema = studentStep1Schema
+  .merge(studentStep2Schema)
+  .merge(studentStep3Schema)
+  .merge(studentStep4Schema)
+
+export type StudentStep1Input = z.infer<typeof studentStep1Schema>
+export type StudentStep2Input = z.infer<typeof studentStep2Schema>
+export type StudentStep3Input = z.infer<typeof studentStep3Schema>
+export type StudentStep4Input = z.infer<typeof studentStep4Schema>
+export type StudentOnboardingInput = z.infer<typeof studentCompleteOnboardingSchema>
diff --git a/apps/web/package.json b/apps/web/package.json
index b4cf170..01a2e94 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,7 +12,9 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.9.1",
     "@neondatabase/auth": "0.5.0-beta",
+    "@tanstack/react-query": "^5.102.8",
     "canvas-confetti": "^1.9.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -22,7 +24,10 @@
     "radix-ui": "^1.6.7",
     "react": "19.2.8",
     "react-dom": "19.2.8",
-    "tailwind-merge": "^3.6.0"
+    "react-hook-form": "^7.87.0",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.6.0",
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9196d39..4ef83d7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -66,9 +66,15 @@ importers:
 
   apps/web:
     dependencies:
+      '@hookform/resolvers':
+        specifier: ^5.9.1
+        version: 5.9.1(@standard-schema/spec@1.1.0)(react-hook-form@7.87.0(react@19.2.8))(zod@4.4.3)
       '@neondatabase/auth':
         specifier: 0.5.0-beta
-        version: 0.5.0-beta(2d4e0fe671c0dd4fdd8767e73646b812)
+        version: 0.5.0-beta(5920da2f2fef1ec48f79f8dd00dff101)
+      '@tanstack/react-query':
+        specifier: ^5.102.8
+        version: 5.102.8(react@19.2.8)
       canvas-confetti:
         specifier: ^1.9.4
         version: 1.9.4
@@ -96,9 +102,18 @@ importers:
       react-dom:
         specifier: 19.2.8
         version: 19.2.8(react@19.2.8)
+      react-hook-form:
+        specifier: ^7.87.0
+        version: 7.87.0(react@19.2.8)
+      sonner:
+        specifier: ^2.0.8
+        version: 2.0.8(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       tailwind-merge:
         specifier: ^3.6.0
         version: 3.6.0
+      zod:
+        specifier: ^4.4.3
+        version: 4.4.3
     devDependencies:
       '@repo/eslint-config':
         specifier: workspace:*
@@ -2950,11 +2965,11 @@ packages:
   '@tailwindcss/postcss@4.3.3':
     resolution: {integrity: sha512-JTSZZGQi1AyKirbLN3azmjVzef92tcX7h+iSqPdaeStyFpGpDlKvvpxeOE8njhbUanbRwr3z8DyzhICWnMtQeg==}
 
-  '@tanstack/query-core@5.101.4':
-    resolution: {integrity: sha512-gNwcvOJcRbLWPOLG/2OBm+zM+Yv+MKsXKEOWC57USuZDEsI71hEErQsiEGx5wX9rzWWkfwM0fVSPoiIFSsxfiw==}
+  '@tanstack/query-core@5.102.8':
+    resolution: {integrity: sha512-ZNjkJ33CqvPNec/6lZBnHqLc3EVGPZ9ySLhYahU9TcuRFdmwXewuj0c4hwSWcGHqEUwcSrKeZ+oGcvPBqXcQcg==}
 
-  '@tanstack/react-query@5.101.4':
-    resolution: {integrity: sha512-yRg2pfOCxIs4ZJW3XYYHU/WgtD04FHSnfHlpRT7h7pR77hwkdRG4wxbKe4aq6P0RvXUTBSQpQeadS1SUYUe+KA==}
+  '@tanstack/react-query@5.102.8':
+    resolution: {integrity: sha512-TYBea4OuXWD7MhaSHq069TWbFe7rcwWN6kzT7JF0OKi1K6c1gTv2IzD6A6ExJsCMozdkqBWeuIUZmu4KQg0O5A==}
     peerDependencies:
       react: ^18 || ^19
 
@@ -4341,8 +4356,8 @@ packages:
     peerDependencies:
       react: '>=16.4.1'
 
-  react-hook-form@7.85.0:
-    resolution: {integrity: sha512-U2MTriFXnclmV4rOE20p2DcRFv5WEg3FIcBFOKcOLFHDVvGIMPvLTkTWefUsonmlaVy23khVDxDWym6uJVGOzw==}
+  react-hook-form@7.87.0:
+    resolution: {integrity: sha512-zhFzWvLxNHH+8839OnZcUxgMZw88ah2jZWDWvKWgF3Tpbnd0vKL+dlcuU3nZVWESZQjd81EW8K+wU+cYfYAc0w==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
@@ -5122,23 +5137,23 @@ snapshots:
 
   '@csstools/css-tokenizer@4.0.0': {}
 
-  '@daveyplate/better-auth-tanstack@1.3.6(@tanstack/query-core@5.101.4)(@tanstack/react-query@5.101.4(react@19.2.8))(better-auth@1.6.23(@cloudflare/workers-types@5.20260809.1)(drizzle-kit@0.31.10)(next@16.3.0(@types/node@26.2.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vitest@4.1.10(@types/node@26.2.0)(jsdom@30.0.1(@noble/hashes@2.3.0))(vite@8.2.1(@types/node@26.2.0)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.11))))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@daveyplate/better-auth-tanstack@1.3.6(@tanstack/query-core@5.102.8)(@tanstack/react-query@5.102.8(react@19.2.8))(better-auth@1.6.23(@cloudflare/workers-types@5.20260809.1)(drizzle-kit@0.31.10)(next@16.3.0(@types/node@26.2.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vitest@4.1.10(@types/node@26.2.0)(jsdom@30.0.1(@noble/hashes@2.3.0))(vite@8.2.1(@types/node@26.2.0)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.11))))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@tanstack/query-core': 5.101.4
-      '@tanstack/react-query': 5.101.4(react@19.2.8)
+      '@tanstack/query-core': 5.102.8
+      '@tanstack/react-query': 5.102.8(react@19.2.8)
       better-auth: 1.6.23(@cloudflare/workers-types@5.20260809.1)(drizzle-kit@0.31.10)(next@16.3.0(@types/node@26.2.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vitest@4.1.10(@types/node@26.2.0)(jsdom@30.0.1(@noble/hashes@2.3.0))(vite@8.2.1(@types/node@26.2.0)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.11)))
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
 
-  '@daveyplate/better-auth-ui@3.4.0(f39157806bea91a617ed705f21a44894)':
+  '@daveyplate/better-auth-ui@3.4.0(377d101380826cb1106ab8a7a2286fc1)':
     dependencies:
       '@better-auth/api-key': 1.7.1(@better-auth/core@1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(@cloudflare/workers-types@5.20260809.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.9)(kysely@0.29.5)(nanostores@1.5.1))(@better-auth/utils@0.4.2)(better-auth@1.6.23(@cloudflare/workers-types@5.20260809.1)(drizzle-kit@0.31.10)(next@16.3.0(@types/node@26.2.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vitest@4.1.10(@types/node@26.2.0)(jsdom@30.0.1(@noble/hashes@2.3.0))(vite@8.2.1(@types/node@26.2.0)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.11))))(better-call@2.0.2(zod@4.4.3))
       '@better-auth/passkey': 1.6.23(@better-auth/core@1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(@cloudflare/workers-types@5.20260809.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.9)(kysely@0.29.5)(nanostores@1.5.1))(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-auth@1.6.23(@cloudflare/workers-types@5.20260809.1)(drizzle-kit@0.31.10)(next@16.3.0(@types/node@26.2.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vitest@4.1.10(@types/node@26.2.0)(jsdom@30.0.1(@noble/hashes@2.3.0))(vite@8.2.1(@types/node@26.2.0)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.11))))(better-call@1.3.7(zod@4.4.3))(nanostores@1.5.1)
       '@better-fetch/fetch': 1.3.1
       '@captchafox/react': 1.13.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@daveyplate/better-auth-tanstack': 1.3.6(@tanstack/query-core@5.101.4)(@tanstack/react-query@5.101.4(react@19.2.8))(better-auth@1.6.23(@cloudflare/workers-types@5.20260809.1)(drizzle-kit@0.31.10)(next@16.3.0(@types/node@26.2.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vitest@4.1.10(@types/node@26.2.0)(jsdom@30.0.1(@noble/hashes@2.3.0))(vite@8.2.1(@types/node@26.2.0)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.11))))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@daveyplate/better-auth-tanstack': 1.3.6(@tanstack/query-core@5.102.8)(@tanstack/react-query@5.102.8(react@19.2.8))(better-auth@1.6.23(@cloudflare/workers-types@5.20260809.1)(drizzle-kit@0.31.10)(next@16.3.0(@types/node@26.2.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vitest@4.1.10(@types/node@26.2.0)(jsdom@30.0.1(@noble/hashes@2.3.0))(vite@8.2.1(@types/node@26.2.0)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.11))))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@hcaptcha/react-hcaptcha': 2.1.0
-      '@hookform/resolvers': 5.9.1(@standard-schema/spec@1.1.0)(react-hook-form@7.85.0(react@19.2.8))(zod@4.4.3)
+      '@hookform/resolvers': 5.9.1(@standard-schema/spec@1.1.0)(react-hook-form@7.87.0(react@19.2.8))(zod@4.4.3)
       '@instantdb/react': 1.0.65(react@19.2.8)
       '@marsidev/react-turnstile': 1.6.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@noble/hashes': 2.3.0
@@ -5157,7 +5172,7 @@ snapshots:
       '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       '@react-email/components': 1.0.12(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@tanstack/react-query': 5.101.4(react@19.2.8)
+      '@tanstack/react-query': 5.102.8(react@19.2.8)
       '@triplit/client': 1.0.50(typescript@6.0.3)
       '@triplit/react': 1.0.51(react@19.2.8)(typescript@6.0.3)
       '@wojtekmaj/react-recaptcha-v3': 0.1.4(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -5171,7 +5186,7 @@ snapshots:
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
       react-google-recaptcha: 3.1.0(react@19.2.8)
-      react-hook-form: 7.85.0(react@19.2.8)
+      react-hook-form: 7.87.0(react@19.2.8)
       react-qr-code: 2.2.0(react@19.2.8)
       sonner: 2.0.8(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       tailwind-merge: 3.6.0
@@ -5581,10 +5596,10 @@ snapshots:
       hono: 4.13.1
       zod: 4.4.3
 
-  '@hookform/resolvers@5.9.1(@standard-schema/spec@1.1.0)(react-hook-form@7.85.0(react@19.2.8))(zod@4.4.3)':
+  '@hookform/resolvers@5.9.1(@standard-schema/spec@1.1.0)(react-hook-form@7.87.0(react@19.2.8))(zod@4.4.3)':
     dependencies:
       '@standard-schema/utils': 0.3.0
-      react-hook-form: 7.85.0(react@19.2.8)
+      react-hook-form: 7.87.0(react@19.2.8)
     optionalDependencies:
       '@standard-schema/spec': 1.1.0
       zod: 4.4.3
@@ -5868,15 +5883,15 @@ snapshots:
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
 
-  '@neondatabase/auth-ui@0.3.0-beta(86325e62faccabab658b89ff76e1cf7a)':
+  '@neondatabase/auth-ui@0.3.0-beta(4ceb429b93829763c91134887bb71e67)':
     dependencies:
       '@better-auth/passkey': 1.6.23(@better-auth/core@1.6.23(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(@cloudflare/workers-types@5.20260809.1)(better-call@1.3.7(zod@4.4.3))(jose@6.2.9)(kysely@0.29.5)(nanostores@1.5.1))(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-auth@1.6.23(@cloudflare/workers-types@5.20260809.1)(drizzle-kit@0.31.10)(next@16.3.0(@types/node@26.2.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vitest@4.1.10(@types/node@26.2.0)(jsdom@30.0.1(@noble/hashes@2.3.0))(vite@8.2.1(@types/node@26.2.0)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.11))))(better-call@1.3.7(zod@4.4.3))(nanostores@1.5.1)
       '@captchafox/react': 1.13.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@daveyplate/better-auth-ui': 3.4.0(f39157806bea91a617ed705f21a44894)
+      '@daveyplate/better-auth-ui': 3.4.0(377d101380826cb1106ab8a7a2286fc1)
       '@hcaptcha/react-hcaptcha': 1.17.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@hookform/resolvers': 5.9.1(@standard-schema/spec@1.1.0)(react-hook-form@7.85.0(react@19.2.8))(zod@4.4.3)
+      '@hookform/resolvers': 5.9.1(@standard-schema/spec@1.1.0)(react-hook-form@7.87.0(react@19.2.8))(zod@4.4.3)
       '@marsidev/react-turnstile': 1.6.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@neondatabase/auth': 0.5.0-beta(2d4e0fe671c0dd4fdd8767e73646b812)
+      '@neondatabase/auth': 0.5.0-beta(5920da2f2fef1ec48f79f8dd00dff101)
       '@radix-ui/react-avatar': 1.2.6(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-checkbox': 1.3.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
@@ -5901,7 +5916,7 @@ snapshots:
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
       react-google-recaptcha: 3.1.0(react@19.2.8)
-      react-hook-form: 7.85.0(react@19.2.8)
+      react-hook-form: 7.87.0(react@19.2.8)
       react-qr-code: 2.2.0(react@19.2.8)
       sonner: 2.0.8(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       tailwind-merge: 3.6.0
@@ -5966,10 +5981,10 @@ snapshots:
       - vue
       - yup
 
-  '@neondatabase/auth@0.5.0-beta(2d4e0fe671c0dd4fdd8767e73646b812)':
+  '@neondatabase/auth@0.5.0-beta(5920da2f2fef1ec48f79f8dd00dff101)':
     dependencies:
       '@better-fetch/fetch': 1.3.1
-      '@neondatabase/auth-ui': 0.3.0-beta(86325e62faccabab658b89ff76e1cf7a)
+      '@neondatabase/auth-ui': 0.3.0-beta(4ceb429b93829763c91134887bb71e67)
       '@supabase/auth-js': 2.79.0
       better-auth: 1.6.23(@cloudflare/workers-types@5.20260809.1)(drizzle-kit@0.31.10)(next@16.3.0(@types/node@26.2.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(vitest@4.1.10(@types/node@26.2.0)(jsdom@30.0.1(@noble/hashes@2.3.0))(vite@8.2.1(@types/node@26.2.0)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.11)))
       jose: 6.2.5
@@ -7219,11 +7234,11 @@ snapshots:
       postcss: 8.5.26
       tailwindcss: 4.3.3
 
-  '@tanstack/query-core@5.101.4': {}
+  '@tanstack/query-core@5.102.8': {}
 
-  '@tanstack/react-query@5.101.4(react@19.2.8)':
+  '@tanstack/react-query@5.102.8(react@19.2.8)':
     dependencies:
-      '@tanstack/query-core': 5.101.4
+      '@tanstack/query-core': 5.102.8
       react: 19.2.8
 
   '@testing-library/dom@10.4.1':
@@ -8547,7 +8562,7 @@ snapshots:
       react: 19.2.8
       react-async-script: 1.2.0(react@19.2.8)
 
-  react-hook-form@7.85.0(react@19.2.8):
+  react-hook-form@7.87.0(react@19.2.8):
     dependencies:
       react: 19.2.8
 

From 047506e82a7b5cfdbf06dd12eec2e64c41f3fcff Mon Sep 17 00:00:00 2001
From: Chaithra S <schaithra2006@gmail.com>
Date: Sun, 6 Sep 2026 16:15:32 +0530
Subject: [PATCH 2/3] address code review feedback across auth and onboarding

---
 apps/web/app/(auth)/login/page.tsx           |  15 +-
 apps/web/app/(auth)/role-select/page.tsx     |   7 +-
 apps/web/app/(onboarding)/recruiter/page.tsx | 253 +++++--------------
 apps/web/app/(onboarding)/student/page.tsx   |  89 ++++---
 apps/web/lib/hooks/use-auth.ts               |   3 +-
 apps/web/lib/hooks/use-onboarding.ts         |  60 ++---
 apps/web/lib/schemas/auth.schema.ts          |   3 +
 apps/web/lib/utils/confetti.ts               |  18 ++
 8 files changed, 162 insertions(+), 286 deletions(-)
 create mode 100644 apps/web/lib/utils/confetti.ts

diff --git a/apps/web/app/(auth)/login/page.tsx b/apps/web/app/(auth)/login/page.tsx
index de7f1b7..46fa133 100644
--- a/apps/web/app/(auth)/login/page.tsx
+++ b/apps/web/app/(auth)/login/page.tsx
@@ -6,6 +6,7 @@ import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 
 import { FormField } from '@/components/ui/form-field'
+import { Input } from '@/components/ui/input'
 import { useSocialSignIn } from '@/lib/hooks/use-auth'
 import { loginSchema, type LoginInput } from '@/lib/schemas/auth.schema'
 import { CharactersScene, type CharacterSceneState } from './CharactersScene'
@@ -34,6 +35,11 @@ function GoogleIcon({ className = 'w-4 h-4' }: { className?: string }) {
   )
 }
 
+const DEFAULT_VALUES: LoginInput = {
+  name: '',
+  email: '',
+}
+
 export default function LoginPage() {
   const [state, setState] = useState<CharacterSceneState>({
     focusedField: 'none',
@@ -58,10 +64,7 @@ export default function LoginPage() {
     formState: { errors },
   } = useForm<LoginInput>({
     resolver: zodResolver(loginSchema),
-    defaultValues: {
-      name: '',
-      email: '',
-    },
+    defaultValues: DEFAULT_VALUES,
   })
 
   const failWith = (message: string) => {
@@ -148,7 +151,7 @@ export default function LoginPage() {
                 <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
                   {isSignUp && (
                     <FormField label="Name" htmlFor="name-input" error={errors.name?.message}>
-                      <input
+                      <Input
                         id="name-input"
                         type="text"
                         {...register('name')}
@@ -165,7 +168,7 @@ export default function LoginPage() {
 
                   {/* Email Field */}
                   <FormField label="Email" htmlFor="email-input" error={errors.email?.message}>
-                    <input
+                    <Input
                       id="email-input"
                       type="email"
                       {...register('email', {
diff --git a/apps/web/app/(auth)/role-select/page.tsx b/apps/web/app/(auth)/role-select/page.tsx
index 40c9605..13c67e4 100644
--- a/apps/web/app/(auth)/role-select/page.tsx
+++ b/apps/web/app/(auth)/role-select/page.tsx
@@ -6,11 +6,12 @@ import { useRouter } from 'next/navigation'
 import { useEffect, useRef, useState, type MouseEvent } from 'react'
 import { ApiError } from '@/lib/api-client'
 import { useSetUserRole } from '@/lib/hooks/use-auth'
+import { type SelfAssignableRole } from '@/lib/schemas/auth.schema'
 
 export default function RoleSelectPage() {
   const router = useRouter()
-  const [selectedRole, setSelectedRole] = useState<'student' | 'recruiter' | null>(null)
-  const [hoveredRole, setHoveredRole] = useState<'student' | 'recruiter' | null>(null)
+  const [selectedRole, setSelectedRole] = useState<SelfAssignableRole | null>(null)
+  const [hoveredRole, setHoveredRole] = useState<SelfAssignableRole | null>(null)
   const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
   const [blink, setBlink] = useState(false)
   const [isSaving, setIsSaving] = useState(false)
@@ -46,7 +47,7 @@ export default function RoleSelectPage() {
    * The role is authorization state, so it lives in Postgres rather than
    * `localStorage` — navigation only happens once the API confirms the write.
    */
-  const handleSelect = async (role: 'student' | 'recruiter') => {
+  const handleSelect = async (role: SelfAssignableRole) => {
     if (isSaving) return
 
     setSelectedRole(role)
diff --git a/apps/web/app/(onboarding)/recruiter/page.tsx b/apps/web/app/(onboarding)/recruiter/page.tsx
index d770535..29859c8 100644
--- a/apps/web/app/(onboarding)/recruiter/page.tsx
+++ b/apps/web/app/(onboarding)/recruiter/page.tsx
@@ -1,17 +1,29 @@
 'use client'
 
 import { zodResolver } from '@hookform/resolvers/zod'
-import { ArrowLeft, ArrowRight, Building2, Globe, Mail, MapPin, Sparkles, X } from 'lucide-react'
+import {
+  ArrowLeft,
+  ArrowRight,
+  Briefcase,
+  Building2,
+  Globe,
+  Mail,
+  MapPin,
+  Search,
+  Sparkles,
+  UserCheck,
+  Users,
+  X,
+} from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
-import confetti from 'canvas-confetti'
-
 import { useSaveRecruiterProfile } from '@/lib/hooks/use-onboarding'
 import {
   recruiterOnboardingSchema,
   type RecruiterOnboardingInput,
 } from '@/lib/schemas/recruiter-onboarding.schema'
+import { showConfetti, ONBOARDING_REDIRECT_DELAY_MS } from '@/lib/utils/confetti'
 
 export interface RecruiterProfileData {
   companyName: string
@@ -20,6 +32,13 @@ export interface RecruiterProfileData {
   headquartersLocation: string
 }
 
+const DEFAULT_VALUES: RecruiterOnboardingInput = {
+  companyName: '',
+  companyMail: '',
+  companyUrl: '',
+  headquartersLocation: '',
+}
+
 export default function RecruiterOnboardingPage() {
   const router = useRouter()
   const [errorMsg, setErrorMsg] = useState('')
@@ -33,12 +52,7 @@ export default function RecruiterOnboardingPage() {
     formState: { errors },
   } = useForm<RecruiterOnboardingInput>({
     resolver: zodResolver(recruiterOnboardingSchema),
-    defaultValues: {
-      companyName: '',
-      companyMail: '',
-      companyUrl: '',
-      headquartersLocation: '',
-    },
+    defaultValues: DEFAULT_VALUES,
   })
 
   const onSubmit = async (data: RecruiterOnboardingInput) => {
@@ -46,21 +60,11 @@ export default function RecruiterOnboardingPage() {
     try {
       await saveRecruiterMutation.mutateAsync(data)
       setIsCompleted(true)
-
-      try {
-        confetti({
-          particleCount: 90,
-          spread: 75,
-          origin: { y: 0.6 },
-          colors: ['#00C26D', '#34D399', '#10B981', '#059669', '#3B82F6'],
-        })
-      } catch {
-        // Confetti fallback
-      }
+      showConfetti()
 
       setTimeout(() => {
         router.push('/landing')
-      }, 1400)
+      }, ONBOARDING_REDIRECT_DELAY_MS)
     } catch (err: unknown) {
       if (err instanceof Error) {
         setErrorMsg(err.message)
@@ -95,175 +99,48 @@ export default function RecruiterOnboardingPage() {
           {/* LEFT COLUMN: HERO & RECRUITER TALENT SEARCH ILLUSTRATION */}
           {/* ========================================================================= */}
           <div className="lg:col-span-5 bg-gradient-to-b from-surface-hero-start to-surface-hero-end border-b lg:border-b-0 lg:border-r border-border-subtle/50 p-6 sm:p-8 lg:p-10 flex flex-col justify-between h-full relative overflow-hidden">
-            {/* Top Illustration Scene */}
-            <div className="w-full flex items-center justify-center py-4 select-none">
-              <svg
-                viewBox="0 0 380 260"
-                className="w-full max-w-[340px] h-auto overflow-visible"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <defs>
-                  <filter id="recruiterShadow" x="-20%" y="-20%" width="140%" height="140%">
-                    <feDropShadow
-                      dx="0"
-                      dy="10"
-                      stdDeviation="12"
-                      floodColor="#0F172A"
-                      floodOpacity="0.12"
-                    />
-                  </filter>
-                  <linearGradient id="screenGrad" x1="0" y1="0" x2="1" y2="1">
-                    <stop offset="0%" stopColor="#FFFFFF" />
-                    <stop offset="100%" stopColor="#F8FAFC" />
-                  </linearGradient>
-                  <linearGradient id="laptopChassis" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="0%" stopColor="#E2E8F0" />
-                    <stop offset="100%" stopColor="#CBD5E1" />
-                  </linearGradient>
-                  <linearGradient id="glassGrad" x1="0" y1="0" x2="1" y2="1">
-                    <stop offset="0%" stopColor="var(--brand-mint)" stopOpacity="0.4" />
-                    <stop offset="100%" stopColor="var(--brand-green)" stopOpacity="0.1" />
-                  </linearGradient>
-                </defs>
-
-                {/* Ground plane shadow */}
-                <ellipse cx="190" cy="228" rx="140" ry="10" fill="#0F172A" opacity="0.08" />
-
-                {/* 3 Green Team Members / Candidate Silhouettes in Background */}
-                <g id="candidate-silhouettes">
-                  {/* Left Candidate (Soft mint green) */}
-                  <g transform="translate(100, 110)">
-                    <circle cx="0" cy="-28" r="22" fill="var(--brand-green-mint)" />
-                    <path
-                      d="M -30,22 C -30,0 -16,-12 0,-12 C 16,-12 30,0 30,22 Z"
-                      fill="var(--brand-green-mint)"
-                    />
-                  </g>
-
-                  {/* Right Candidate (Soft mint green) */}
-                  <g transform="translate(260, 110)">
-                    <circle cx="0" cy="-28" r="22" fill="var(--brand-green-mint)" />
-                    <path
-                      d="M -30,22 C -30,0 -16,-12 0,-12 C 16,-12 30,0 30,22 Z"
-                      fill="var(--brand-green-mint)"
-                    />
-                  </g>
-
-                  {/* Center Main Candidate (Vibrant emerald green) */}
-                  <g transform="translate(180, 95)">
-                    <circle cx="0" cy="-34" r="28" fill="var(--brand-green)" />
-                    <path
-                      d="M -40,32 C -40,4 -22,-16 0,-16 C 22,-16 40,4 40,32 Z"
-                      fill="var(--brand-green)"
-                    />
-                  </g>
-
-                  {/* Sparkles / Radiating Accents */}
-                  <path
-                    d="M 52,90 L 58,82 L 64,90 L 72,96 L 64,102 L 58,110 L 52,102 L 44,96 Z"
-                    fill="var(--brand-green)"
-                    opacity="0.85"
-                    transform="scale(0.65) translate(30, 40)"
-                  />
-                  <path
-                    d="M 50,75 Q 55,65 60,75"
-                    stroke="var(--brand-green)"
-                    strokeWidth="3"
-                    fill="none"
-                    strokeLinecap="round"
-                  />
-                  <path
-                    d="M 38,88 Q 44,82 48,90"
-                    stroke="var(--brand-green)"
-                    strokeWidth="2.5"
-                    fill="none"
-                    strokeLinecap="round"
-                  />
-                </g>
-
-                {/* Laptop in Foreground with Candidate Search Screen */}
-                <g id="recruiter-laptop" filter="url(#recruiterShadow)">
-                  {/* Open Screen Body */}
-                  <rect
-                    x="85"
-                    y="102"
-                    width="190"
-                    height="115"
-                    rx="10"
-                    fill="#1E293B"
-                    stroke="var(--border-muted)"
-                    strokeWidth="1.5"
-                  />
-
-                  {/* Inner Display Screen */}
-                  <rect x="92" y="108" width="176" height="102" rx="6" fill="url(#screenGrad)" />
-
-                  {/* Candidate Row 1 */}
-                  <g transform="translate(102, 122)">
-                    <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,11 14,14 Z" fill="#FFFFFF" />
-                    <rect x="24" y="4" width="70" height="4" rx="2" fill="#94A3B8" />
-                    <rect x="24" y="11" width="45" height="3" rx="1.5" fill="var(--border-muted)" />
-                  </g>
-
-                  {/* Candidate Row 2 */}
-                  <g transform="translate(102, 147)">
-                    <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,11 14,14 Z" fill="#FFFFFF" />
-                    <rect x="24" y="4" width="80" height="4" rx="2" fill="#94A3B8" />
-                    <rect x="24" y="11" width="55" height="3" rx="1.5" fill="var(--border-muted)" />
-                  </g>
-
-                  {/* Candidate Row 3 */}
-                  <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,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>
+            {/* Top Illustration Scene using Lucide Icons */}
+            <div className="w-full flex flex-col items-center justify-center py-6 select-none relative">
+              {/* Background Glow */}
+              <div className="absolute inset-0 bg-emerald-500/10 blur-3xl rounded-full max-w-[280px] mx-auto pointer-events-none" />
+
+              {/* Hero Icon Card Showcase */}
+              <div className="relative z-10 w-full max-w-[320px] bg-white/90 backdrop-blur-md rounded-2xl p-5 border border-slate-200/60 shadow-[0_10px_30px_-5px_rgba(0,0,0,0.08)] space-y-3.5">
+                {/* Candidate Row 1 */}
+                <div className="flex items-center gap-3 p-2.5 rounded-xl bg-slate-50 border border-slate-100">
+                  <div className="w-9 h-9 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center shrink-0">
+                    <UserCheck className="w-5 h-5" />
+                  </div>
+                  <div className="flex-1 min-w-0 space-y-1">
+                    <div className="h-3 bg-slate-200 rounded-md w-3/4 animate-pulse" />
+                    <div className="h-2 bg-slate-100 rounded-md w-1/2" />
+                  </div>
+                  <Sparkles className="w-4 h-4 text-emerald-500 shrink-0" />
+                </div>
 
-                  {/* Magnifying Glass Over Candidate Search Screen */}
-                  <g transform="translate(252, 168) rotate(35)">
-                    {/* Glass Circle */}
-                    <circle
-                      cx="0"
-                      cy="0"
-                      r="26"
-                      fill="url(#glassGrad)"
-                      stroke="var(--brand-green)"
-                      strokeWidth="5"
-                    />
-                    {/* Glass Specular Arc */}
-                    <path
-                      d="M -16,-12 A 20 20 0 0 1 12,-16"
-                      stroke="#FFFFFF"
-                      strokeWidth="2.8"
-                      fill="none"
-                      strokeLinecap="round"
-                    />
-                    {/* Handle */}
-                    <path
-                      d="M 0,26 L 0,46"
-                      stroke="var(--brand-green)"
-                      strokeWidth="6"
-                      strokeLinecap="round"
-                    />
-                  </g>
+                {/* Candidate Row 2 */}
+                <div className="flex items-center gap-3 p-2.5 rounded-xl bg-slate-50 border border-slate-100">
+                  <div className="w-9 h-9 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center shrink-0">
+                    <Users className="w-5 h-5" />
+                  </div>
+                  <div className="flex-1 min-w-0 space-y-1">
+                    <div className="h-3 bg-slate-200 rounded-md w-4/5" />
+                    <div className="h-2 bg-slate-100 rounded-md w-2/3" />
+                  </div>
+                </div>
 
-                  {/* Laptop Base Keyboard Deck */}
-                  <path
-                    d="M 60,217 L 300,217 C 306,217 310,219 308,222 L 290,227 C 288,228 280,228 276,228 L 84,228 C 80,228 72,228 70,227 L 52,222 C 50,219 54,217 60,217 Z"
-                    fill="url(#laptopChassis)"
-                    stroke="#94A3B8"
-                    strokeWidth="1"
-                  />
-                  {/* Base Trackpad Notch */}
-                  <rect x="162" y="218" width="36" height="3" rx="1.5" fill="#94A3B8" />
-                </g>
-              </svg>
+                {/* Candidate Row 3 */}
+                <div className="flex items-center gap-3 p-2.5 rounded-xl bg-slate-50 border border-slate-100">
+                  <div className="w-9 h-9 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center shrink-0">
+                    <Briefcase className="w-5 h-5" />
+                  </div>
+                  <div className="flex-1 min-w-0 space-y-1">
+                    <div className="h-3 bg-slate-200 rounded-md w-2/3" />
+                    <div className="h-2 bg-slate-100 rounded-md w-1/3" />
+                  </div>
+                  <Search className="w-4 h-4 text-slate-400 shrink-0" />
+                </div>
+              </div>
             </div>
 
             {/* Bottom Hero Text */}
diff --git a/apps/web/app/(onboarding)/student/page.tsx b/apps/web/app/(onboarding)/student/page.tsx
index 5fba56d..29f7b3e 100644
--- a/apps/web/app/(onboarding)/student/page.tsx
+++ b/apps/web/app/(onboarding)/student/page.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { zodResolver } from '@hookform/resolvers/zod'
-import confetti from 'canvas-confetti'
 import { motion, AnimatePresence } from 'motion/react'
 import { ArrowLeft, ArrowRight, Check, FileText, Globe, Plus, Sparkles, X } from 'lucide-react'
 import { useRouter } from 'next/navigation'
@@ -13,6 +12,7 @@ import {
   studentCompleteOnboardingSchema,
   type StudentOnboardingInput,
 } from '@/lib/schemas/student-onboarding.schema'
+import { showConfetti, ONBOARDING_REDIRECT_DELAY_MS } from '@/lib/utils/confetti'
 
 function GithubIcon({ className = 'w-4 h-4' }: { className?: string }) {
   return (
@@ -34,6 +34,25 @@ function LinkedinIcon({ className = 'w-4 h-4' }: { className?: string }) {
   )
 }
 
+const DEFAULT_STUDENT_VALUES: StudentOnboardingInput = {
+  fullName: '',
+  headline: '',
+  bio: '',
+  school: '',
+  degree: '',
+  graduationYear: '2026',
+  gpa: '',
+  specialization: '',
+  skills: [],
+  experienceRole: '',
+  experienceCompany: '',
+  experienceSummary: '',
+  githubUrl: '',
+  linkedinUrl: '',
+  portfolioUrl: '',
+  resumeUrl: '',
+}
+
 export default function StudentOnboardingPage() {
   const router = useRouter()
   const [step, setStep] = useState<1 | 2 | 3 | 4>(1)
@@ -54,24 +73,7 @@ export default function StudentOnboardingPage() {
   } = useForm<StudentOnboardingInput>({
     resolver: zodResolver(studentCompleteOnboardingSchema),
     mode: 'onTouched',
-    defaultValues: {
-      fullName: '',
-      headline: '',
-      bio: '',
-      school: '',
-      degree: '',
-      graduationYear: '2026',
-      gpa: '',
-      specialization: '',
-      skills: ['React', 'TypeScript', 'Next.js', 'Tailwind CSS'],
-      experienceRole: '',
-      experienceCompany: '',
-      experienceSummary: '',
-      githubUrl: '',
-      linkedinUrl: '',
-      portfolioUrl: '',
-      resumeUrl: '',
-    },
+    defaultValues: DEFAULT_STUDENT_VALUES,
   })
 
   const fullName = watch('fullName') || ''
@@ -130,21 +132,11 @@ export default function StudentOnboardingPage() {
     try {
       await saveStudentMutation.mutateAsync(data)
       setIsCompleted(true)
-
-      try {
-        confetti({
-          particleCount: 100,
-          spread: 80,
-          origin: { y: 0.6 },
-          colors: ['#00C26D', '#34D399', '#6366F1', '#3B82F6'],
-        })
-      } catch {
-        // Fallback
-      }
+      showConfetti()
 
       setTimeout(() => {
         router.push('/landing')
-      }, 1400)
+      }, ONBOARDING_REDIRECT_DELAY_MS)
     } catch {
       // Error handled in mutation
     }
@@ -900,21 +892,6 @@ export default function StudentOnboardingPage() {
                       </p>
                     </div>
 
-                    {(errors.githubUrl ||
-                      errors.linkedinUrl ||
-                      errors.portfolioUrl ||
-                      errors.resumeUrl) && (
-                      <div
-                        className="p-2.5 rounded-xl bg-red-50 border border-red-200 text-red-700 text-xs font-medium"
-                        role="alert"
-                      >
-                        {errors.githubUrl?.message ||
-                          errors.linkedinUrl?.message ||
-                          errors.portfolioUrl?.message ||
-                          errors.resumeUrl?.message}
-                      </div>
-                    )}
-
                     <div className="space-y-2.5">
                       {/* GitHub */}
                       <div>
@@ -930,6 +907,11 @@ export default function StudentOnboardingPage() {
                             className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
                           />
                         </div>
+                        {errors.githubUrl && (
+                          <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
+                            {errors.githubUrl.message}
+                          </p>
+                        )}
                       </div>
 
                       {/* LinkedIn */}
@@ -946,6 +928,11 @@ export default function StudentOnboardingPage() {
                             className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
                           />
                         </div>
+                        {errors.linkedinUrl && (
+                          <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
+                            {errors.linkedinUrl.message}
+                          </p>
+                        )}
                       </div>
 
                       {/* Portfolio */}
@@ -962,6 +949,11 @@ export default function StudentOnboardingPage() {
                             className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
                           />
                         </div>
+                        {errors.portfolioUrl && (
+                          <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
+                            {errors.portfolioUrl.message}
+                          </p>
+                        )}
                       </div>
 
                       {/* Resume */}
@@ -978,6 +970,11 @@ export default function StudentOnboardingPage() {
                             className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-subtle focus:border-brand focus:ring-2 focus:ring-brand/15 outline-none text-xs sm:text-sm transition bg-card"
                           />
                         </div>
+                        {errors.resumeUrl && (
+                          <p role="alert" className="text-xs font-medium text-rose-500 mt-1">
+                            {errors.resumeUrl.message}
+                          </p>
+                        )}
                       </div>
                     </div>
                   </motion.div>
diff --git a/apps/web/lib/hooks/use-auth.ts b/apps/web/lib/hooks/use-auth.ts
index 31420ba..10aa450 100644
--- a/apps/web/lib/hooks/use-auth.ts
+++ b/apps/web/lib/hooks/use-auth.ts
@@ -4,6 +4,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 import { authClient } from '@/lib/auth/client'
 import { apiFetch } from '@/lib/api-client'
+import { type SelfAssignableRole } from '@/lib/schemas/auth.schema'
 import { ONBOARDING_QUERY_KEYS } from './use-onboarding'
 
 export interface SocialSignInOptions {
@@ -35,7 +36,7 @@ export function useSetUserRole() {
   const queryClient = useQueryClient()
 
   return useMutation({
-    mutationFn: async (role: 'student' | 'recruiter') => {
+    mutationFn: async (role: SelfAssignableRole) => {
       const data = await apiFetch<{ user: unknown }>('/api/users/me/role', {
         method: 'PATCH',
         body: { role },
diff --git a/apps/web/lib/hooks/use-onboarding.ts b/apps/web/lib/hooks/use-onboarding.ts
index e962046..e745ce9 100644
--- a/apps/web/lib/hooks/use-onboarding.ts
+++ b/apps/web/lib/hooks/use-onboarding.ts
@@ -2,6 +2,7 @@
 
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
+import type { SelfAssignableRole } from '@/lib/schemas/auth.schema'
 import type { StudentOnboardingInput } from '@/lib/schemas/student-onboarding.schema'
 import type { RecruiterOnboardingInput } from '@/lib/schemas/recruiter-onboarding.schema'
 import { apiFetch } from '@/lib/api-client'
@@ -12,60 +13,35 @@ export const ONBOARDING_QUERY_KEYS = {
   currentUser: ['user', 'me'],
 }
 
-export function useSaveStudentProfile() {
+export function useSaveProfile<TData extends StudentOnboardingInput | RecruiterOnboardingInput>(
+  role: SelfAssignableRole,
+) {
   const queryClient = useQueryClient()
+  const roleLabel = role === 'student' ? 'Student' : 'Recruiter'
 
-  return useMutation({
-    mutationFn: async (data: StudentOnboardingInput) => {
-      localStorage.setItem('student_profile', JSON.stringify(data))
-      localStorage.setItem('user_role', 'student')
-
-      try {
-        await apiFetch('/api/users/me/role', {
-          method: 'PATCH',
-          body: { role: 'student' },
-        })
-      } catch {
-        // Backend sync is optional if auth token is expired or running standalone
-      }
+  return useMutation<TData, Error, TData>({
+    mutationFn: async (data: TData) => {
+      await apiFetch('/api/users/me/role', {
+        method: 'PATCH',
+        body: { role },
+      })
 
       return data
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ONBOARDING_QUERY_KEYS.currentUser })
-      toast.success('Student profile created successfully!')
+      toast.success(`${roleLabel} profile created successfully!`)
     },
     onError: (err: Error) => {
-      toast.error(err.message || 'Failed to save student profile.')
+      toast.error(err.message || `Failed to save ${role} profile.`)
     },
   })
 }
 
-export function useSaveRecruiterProfile() {
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    mutationFn: async (data: RecruiterOnboardingInput) => {
-      localStorage.setItem('recruiter_profile', JSON.stringify(data))
-      localStorage.setItem('user_role', 'recruiter')
-
-      try {
-        await apiFetch('/api/users/me/role', {
-          method: 'PATCH',
-          body: { role: 'recruiter' },
-        })
-      } catch {
-        // Backend sync is optional if auth token is expired or running standalone
-      }
+export function useSaveStudentProfile() {
+  return useSaveProfile<StudentOnboardingInput>('student')
+}
 
-      return data
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ONBOARDING_QUERY_KEYS.currentUser })
-      toast.success('Recruiter profile created successfully!')
-    },
-    onError: (err: Error) => {
-      toast.error(err.message || 'Failed to save recruiter profile.')
-    },
-  })
+export function useSaveRecruiterProfile() {
+  return useSaveProfile<RecruiterOnboardingInput>('recruiter')
 }
diff --git a/apps/web/lib/schemas/auth.schema.ts b/apps/web/lib/schemas/auth.schema.ts
index c4815f5..6870063 100644
--- a/apps/web/lib/schemas/auth.schema.ts
+++ b/apps/web/lib/schemas/auth.schema.ts
@@ -1,5 +1,8 @@
 import { z } from 'zod'
 
+export const selfAssignableRoleSchema = z.enum(['student', 'recruiter'])
+export type SelfAssignableRole = z.infer<typeof selfAssignableRoleSchema>
+
 export const loginSchema = z.object({
   name: z.string().optional(),
   email: z.string().min(1, 'Email is required').email('Please enter a valid email address'),
diff --git a/apps/web/lib/utils/confetti.ts b/apps/web/lib/utils/confetti.ts
new file mode 100644
index 0000000..52a11e2
--- /dev/null
+++ b/apps/web/lib/utils/confetti.ts
@@ -0,0 +1,18 @@
+import confetti, { type Options } from 'canvas-confetti'
+
+export const CONFETTI_COLORS = ['#00C26D', '#34D399', '#10B981', '#3B82F6', '#6366F1']
+export const ONBOARDING_REDIRECT_DELAY_MS = 1400
+
+export function showConfetti(options?: Options) {
+  try {
+    void confetti({
+      particleCount: 95,
+      spread: 75,
+      origin: { y: 0.6 },
+      colors: CONFETTI_COLORS,
+      ...options,
+    })
+  } catch {
+    // Fallback when canvas environment is unavailable
+  }
+}

From da7971809268c1466fe4660de6d0b5446c51b804 Mon Sep 17 00:00:00 2001
From: Chaithra S <schaithra2006@gmail.com>
Date: Sun, 6 Sep 2026 20:17:51 +0530
Subject: [PATCH 3/3] Disable sound effects in login UI

---
 apps/web/app/(auth)/login/CharactersScene.tsx | 22 -------------------
 apps/web/app/(auth)/login/audio.ts            |  2 +-
 apps/web/app/(auth)/login/page.tsx            | 19 +++++-----------
 3 files changed, 7 insertions(+), 36 deletions(-)

diff --git a/apps/web/app/(auth)/login/CharactersScene.tsx b/apps/web/app/(auth)/login/CharactersScene.tsx
index ea167ec..a081452 100644
--- a/apps/web/app/(auth)/login/CharactersScene.tsx
+++ b/apps/web/app/(auth)/login/CharactersScene.tsx
@@ -2,7 +2,6 @@
 
 import { motion } from 'motion/react'
 import { useEffect, useRef, useState, type MouseEvent } from 'react'
-import { sound } from './audio'
 
 export interface CharacterSceneState {
   focusedField: 'none' | 'email' | 'submit' | 'google'
@@ -93,27 +92,6 @@ export function CharactersScene({ state, onCharacterPoke }: CharactersSceneProps
   const handlePoke = (characterName: string) => {
     setPokeId(characterName)
 
-    switch (characterName) {
-      case 'red':
-        sound.playBoing()
-        break
-      case 'pink':
-        sound.playBlush()
-        break
-      case 'cyan':
-        sound.playFloat()
-        break
-      case 'blue':
-        sound.playGiggle()
-        break
-      case 'yellow':
-        sound.playSpin()
-        break
-      default:
-        sound.playPop(440)
-        break
-    }
-
     if (onCharacterPoke) onCharacterPoke()
     setTimeout(() => {
       setPokeId(null)
diff --git a/apps/web/app/(auth)/login/audio.ts b/apps/web/app/(auth)/login/audio.ts
index 6df1159..8799b53 100644
--- a/apps/web/app/(auth)/login/audio.ts
+++ b/apps/web/app/(auth)/login/audio.ts
@@ -2,7 +2,7 @@
 
 class SoundEffects {
   private ctx: AudioContext | null = null
-  public enabled = true
+  public enabled = false
 
   private initCtx() {
     if (!this.ctx && typeof window !== 'undefined') {
diff --git a/apps/web/app/(auth)/login/page.tsx b/apps/web/app/(auth)/login/page.tsx
index 46fa133..c787231 100644
--- a/apps/web/app/(auth)/login/page.tsx
+++ b/apps/web/app/(auth)/login/page.tsx
@@ -8,9 +8,9 @@ import { useForm } from 'react-hook-form'
 import { FormField } from '@/components/ui/form-field'
 import { Input } from '@/components/ui/input'
 import { useSocialSignIn } from '@/lib/hooks/use-auth'
+import { cn } from '@/lib/utils'
 import { loginSchema, type LoginInput } from '@/lib/schemas/auth.schema'
 import { CharactersScene, type CharacterSceneState } from './CharactersScene'
-import { sound } from './audio'
 
 function GoogleIcon({ className = 'w-4 h-4' }: { className?: string }) {
   return (
@@ -71,7 +71,6 @@ export default function LoginPage() {
     setIsRedirecting(false)
     setErrorMsg(message)
     setState((s) => ({ ...s, isError: true }))
-    sound.playError()
   }
 
   const onSubmit = () => {
@@ -82,7 +81,6 @@ export default function LoginPage() {
     setIsRedirecting(true)
     setErrorMsg('')
     setState((s) => ({ ...s, isError: false }))
-    sound.playPop(520)
 
     try {
       await socialSignInMutation.mutateAsync({
@@ -157,7 +155,6 @@ export default function LoginPage() {
                         {...register('name')}
                         onFocus={() => {
                           setState((s) => ({ ...s, focusedField: 'email' }))
-                          sound.playPop(380)
                         }}
                         onBlur={() => setState((s) => ({ ...s, focusedField: 'none' }))}
                         placeholder="Your full name"
@@ -175,21 +172,19 @@ export default function LoginPage() {
                         onChange: (e) => {
                           const val = e.target.value
                           setState((s) => ({ ...s, emailLength: val.length }))
-                          sound.playKeystroke(val.length)
                           setErrorMsg('')
                         },
                       })}
                       onFocus={() => {
                         setState((s) => ({ ...s, focusedField: 'email' }))
-                        sound.playPop(420)
                       }}
                       onBlur={() => setState((s) => ({ ...s, focusedField: 'none' }))}
                       placeholder="Enter your email"
-                      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'
-                      }`}
+                      className={cn(
+                        'w-full px-3.5 py-2.5 rounded-xl border border-zinc-200 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',
+                      )}
                     />
                   </FormField>
 
@@ -244,7 +239,6 @@ export default function LoginPage() {
                         id="toggle-to-login-btn"
                         onClick={() => {
                           setIsSignUp(false)
-                          sound.playPop(400)
                         }}
                         className="font-semibold text-zinc-900 hover:underline cursor-pointer ml-1"
                       >
@@ -259,7 +253,6 @@ export default function LoginPage() {
                         id="toggle-to-signup-btn"
                         onClick={() => {
                           setIsSignUp(true)
-                          sound.playPop(400)
                         }}
                         className="font-semibold text-zinc-900 hover:underline cursor-pointer ml-1"
                       >