gem-hunter

A modern Next.js registration form demonstrating advanced form validation using React Hook Form (RHF) with Zod schema validation. Features real-time password strength indicators, comprehensive validation rules, and a beautiful UI built with shadcn/ui and Tailwind CSS.

This project showcases a production-ready registration form with:

• 4-field registration form: Username, Email, Password, and Confirm Password
• Real-time password validation: Live feedback with visual indicators (checkmarks/crosses) as you type
• Advanced password requirements:
  • Minimum 12 characters, maximum 25 characters
  • Must contain uppercase letters, lowercase letters, numbers, and special characters
• Email validation: Proper email format checking
• Password confirmation: Ensures both password fields match
• Async form submission: Simulated API call with loading states
• Responsive design: Works on mobile and desktop

• Framework: Next.js 16.1.1 with App Router
• Runtime: Bun - Fast JavaScript runtime and package manager
• UI Library: React 19.2.3
• Form Management: React Hook Form 7.69.0
• Schema Validation: Zod 4.2.1
• Styling: Tailwind CSS v4 with PostCSS
• Component Library: shadcn/ui with Radix UI primitives
• Icons: Lucide React
• Type Safety: TypeScript 5

• Bun installed on your machine

To install Bun (if not already installed):

curl -fsSL https://bun.sh/install | bash

1. Clone the repository:

git clone <repository-url>
cd rhf-zod

2. Install dependencies using Bun:

bun install

Start the development server:

bun dev

Open http://localhost:3000 in your browser to see the application.

The page auto-updates as you edit files.

rhf-zod/
├── app/
│   ├── zod/
│   │   ├── schema/
│   │   │   └── formSchema.ts        # Zod validation schema with password rules
│   │   ├── page.tsx                 # Registration form with Zod validation
│   │   └── ValidationTemplate.tsx   # Password strength indicator component
│   ├── globals.css                  # Global Tailwind styles
│   ├── layout.tsx                   # Root layout
│   └── page.tsx                     # Home page with RHF native validation
├── components/
│   └── ui/                          # shadcn/ui components
│       ├── button.tsx
│       ├── input.tsx
│       └── label.tsx
├── lib/
│   └── utils.ts                     # Utility functions (cn helper)
└── config files                     # TypeScript, ESLint, Next.js, Tailwind

The form uses a comprehensive Zod schema for validation:

const formSchema = z
  .object({
    username: z.string().min(1).max(20),
    email: z.string().email(),
    password: z
      .string()
      .min(12)
      .max(25)
      .refine((val) => /[A-Z]/.test(val), "Must include uppercase")
      .refine((val) => /[a-z]/.test(val), "Must include lowercase")
      .refine((val) => /[0-9]/.test(val), "Must include number")
      .refine((val) => /[^A-Za-z0-9]/.test(val), "Must include special char"),
    confirmPassword: z.string(),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "Passwords do not match",
    path: ["confirmPassword"],
  });

• Visual feedback with checkmarks (✅) and crosses (❌)
• Shows 6 password requirements in real-time:
  • At least 12 characters
  • At most 25 characters
  • Contains uppercase letter
  • Contains lowercase letter
  • Contains number
  • Contains special character

• Loading states during submission
• Disabled inputs while submitting
• Form reset after successful submission
• Error messages for each field
• Accessibility with aria-invalid attributes

• React Hook Form - Complete form management guide
• Zod - TypeScript-first schema validation
• Next.js - Next.js features and API
• shadcn/ui - Beautiful component library
• Tailwind CSS - Utility-first CSS framework
• Bun - Fast JavaScript runtime

• Next.js App Router - Modern routing in Next.js
• Radix UI - Accessible component primitives
• Lucide Icons - Beautiful icon library

This project is open source and available under the MIT License.

Contributions, issues, and feature requests are welcome!