Multi-Step Form with Validation

A front-end project built using Next.js and React that showcases a responsive, multi-step form with step-wise validation using Zod and React Hook Form. The form collects personal, address, and account details, and includes features like field-level validation, navigation between steps, and a final data review screen before submission.

🚀 Live Demo: FormFlow

---

📑 Table of Contents

• Features
• Tech Stack
• Installation
• Usage
• Configuration
• Troubleshooting
• Form Steps
• Live Demo & Repository

---

✨ Features

• Step-by-step form with intuitive navigation (Next / Previous)
• Field validation using Zod and React Hook Form
• Final review screen with all submitted data
• TailwindCSS for fully responsive styling
• Dark mode support via next-themes and TailwindCss
• Password confirmation and validation logic
• Inline error messages per field
• Data managed via local state (useState / useReducer)

---

🛠️ Tech Stack

• Next.js (v15+ with App Router)
• React (v19)
• React Hook Form
• Zod (form validation)
• TailwindCSS
• React Icons
• Next Themes (for dark mode)
• TypeScript

---

📦 Installation

Steps

1. Clone the repository

# Clone the repository
git clone https://github.com/Soraiya11-7/multi-step-form

# Navigate to the project directory
cd multi-step-form

2. Install dependencies

npm install
# or
yarn install

---

🚀 Usage

▶️ Start the development server

npm run dev

🏗️ Build for production

npm run build
npm run start

🔍 Lint your code

npm run lint

---

⚙️ Configuration

• All configuration is handled by Next.js and TailwindCSS by default.

• Dark mode is implemented using a custom setup based on Tailwind CSS v4 and Next.js 15.

✅ Ensure your app is wrapped in a proper ThemeProvider and your CSS includes the correct dark mode configuration.

🔗 For detailed guidance, refer to this resource:
Dark Mode in Next.js 15 + Tailwind CSS v4

---

📚 Dependencies

👉 Main Dependencies

Package	Version	Description
next	15.2.5	React framework for server-rendered apps
react	^19.0.0	UI library for building interfaces
react-hook-form	^7.55.0	Hook-based form handling
@hookform/resolvers	^5.0.1	Integration of validation libraries with RHF
zod	^3.24.2	Schema-based form validation
react-icons	^5.5.0	Popular icons for React apps
next-themes	^0.4.6	Theme toggling (e.g., dark mode) for Next.js
postcss	^8.5.3	CSS post-processor used by Tailwind

---

🛠️ Dev Dependencies

Package	Version	Description
typescript	^5	Static type checking for JavaScript
eslint	^9	Linter for maintaining code quality
eslint-config-next	15.2.5	ESLint rules optimized for Next.js
@types/node	^20	Type definitions for Node.js
@types/react	^19	Type definitions for React
tailwindcss	^4.1.3	Utility-first CSS framework
@tailwindcss/postcss	^4.1.3	PostCSS plugin adapter for Tailwind CSS

---

🐛 Troubleshooting

• Tailwind not working?

  • Ensure TailwindCSS is properly imported in your globals.css file and that postcss.config.mjs is correctly configured.

• Validation issues?

  • Double-check that your Zod schemas align with the fields and rules in each form step.

• Routing problems?

  • Confirm that you're using the App Router (i.e., the /app directory structure) introduced in Next.js 13+. Routing should be file-based and follow the conventions for pages, layouts, and nested routes.

  ---

📝 Form Steps

🔹 Step 1: Personal Information

• Full Name – required
• Email – required, must be in a valid format (e.g. example@email.com)
• Phone Number – required, minimum 10 digits

---

🔹 Step 2: Address Details

• Street Address – required
• City – required
• Zip Code – required, numbers only, minimum 5 digits

---

🔹 Step 3: Account Setup

• Username – required, minimum **4 characters_
• Password – required, minimum **6 characters_
• Confirm Password – must match password

---

🌍 Live Demo & Repository

🚀 Live URL

• Vercel: FormFlow
• Screen Recording Link: FormFlow Walkthrough

🔗 GitHub Repository: GitHub Link

---

🚀 Seamlessly collect user data step-by-step with the Multi-Step Form wizard! 🧩📝⚡