Multi-Step Form (Next.js)

This project is a multi-step onboarding form application built with Next.js and the modern React ecosystem. It is designed to simplify the onboarding process for new users.

Features

• Multi-step user registration/onboarding form
• Form validation using zod and react-hook-form
• Stylish and accessible UI with Chakra UI
• Next.js App Router architecture
• Easily extendable and customizable structure

Technologies and Libraries Used

• Next.js (App Router)
• React
• Chakra UI (component library)
• react-hook-form (form management)
• zod (schema-based validation)
• @hookform/resolvers (zod integration)
• TypeScript (type safety)
• Geist Font (modern font)

Project Structure

src/
  app/
    components/
    layout.tsx
    page.tsx
  personel-info.tsx
  work-info.tsx
  more-details.tsx
  onboarding-form.tsx
public/
  ...

• src/personel-info.tsx, src/work-info.tsx, src/more-details.tsx: Components representing each step of the form.
• src/onboarding-form.tsx: Main component for the multi-step form.
• src/app/layout.tsx: Application-wide layout and providers.
• public/: Static files (icons, images, etc.)

Installation and Running

After cloning the project, install dependencies and start the development server:

npm install
npm run dev
# or
yarn install
yarn dev

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

Usage

1. Start the onboarding form on the home page.
2. The user is asked for personal information, work information, and additional details in sequence.
3. Form validation is performed at each step, and missing or incorrect fields are shown to the user.
4. On the final step, all information is collected and can be processed (e.g., sent to an API).

Screenshots

Here are some screenshots of the application:

Contribution and License

This project is licensed under the MIT License. Feel free to contribute by submitting a pull request.

---

For more information, check out the Next.js documentation.