User Registration Form (Multi-step)

A clean and modern multi-step user registration form built with React, TypeScript, and Chakra UI. This app demonstrates validation, step navigation, theme toggling, animations, and form submission.

Live Demo

Live Vercel Link

---

Tech Stack

• React + TypeScript
• Chakra UI
• react-hook-form
• Zod (schema-based validation)
• Framer Motion (animations)
• JSON mock API (for interests)
• Vercel (deployment)

---

Features

• Multi-step form: Step 1 for basic info, Step 2 for avatar upload
• Validation with error messages using Zod
• Dynamic interest list loaded from JSON (via public/interests.json)
• Responsive design with light/dark theme toggle
• Smooth animations on component mount (Framer Motion)
• Form data preview before submission
• Reusable form components
• 404 fallback page
• Mock server via json-server for local POST registration testing

---

🛠 Getting Started

1. Clone the repository

git clone https://github.com/charlestanev/multi-step-registration-form.git
cd multi-step-registration-form

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. (Optional) Start the mock server (for local db.json registrations)

npm run server

---

Folder Structure

public/
  interests.json          # Static interests list
  favicon.ico, *.png      # Favicon and PWA icons

src/
  components/
    forms/                # StepOne.tsx, StepTwo.tsx, RegistrationForm.tsx
    ui/                   # Chakra UI theme setup
  pages/
    NotFound.tsx          # 404 fallback page
  types/                  # TypeScript interfaces (optional)
  main.tsx                # Entry point
  App.tsx                 # Main app wrapper

db.json                   # Mock data for local testing
vite.config.ts            # Vite config

---

Requirements Covered

• React + TypeScript + Chakra UI
• react-hook-form + Zod validation
• Dynamic checkbox list from JSON
• Multi-step form (2 steps)
• Avatar upload with preview
• Form validation and error handling
• Local mock server for registrations
• Light/Dark theme support
• Animated transitions with Framer Motion
• Responsive design + 404 fallback
• Deployed publicly on Vercel

---

Used in

• Job task for Front-End Developer @ Blackdeep Technologies

---

License

MIT — free to use and modify.