A modern multi-step web application for opening a bank account — built with best practices in UI, form validation, and backend integration. Designed for both performance and scalability.

Technology	Description
	Component-based UI library for building interactive interfaces
	Type-safe JavaScript for cleaner and more robust code
	Utility-first CSS framework for rapid UI development
	Global state management for predictable and centralized logic
	Performant form handling using React hooks
	Schema-based form validation with TypeScript support
	Backend-as-a-Service (BaaS) for authentication, database, and API
	Code formatter to ensure clean and consistent code

• 🔐 Multi-step account registration with live validation
• 🧾 Zod schema validation per step
• 📦 Global state management with Redux
• 💅 Clean UI with Tailwind Grid & Flexbox layouts
• 🛡️ Supabase authentication (login & protected routes)
• ⚡ Fully TypeScript-powered for better DX & maintainability
• 📤 Auto form reset and conditional trigger for validation

1. Install dependencies

   npm install
   

2. Run the development server

   npm run dev
   

3. Connect Supabase

Add your Supabase credentials in .env.local

    SUPABASE_URL=your-url
    SUPABASE_ANON_KEY=your-key

 src/
├── components/
│ ├── StepOne.tsx
│ ├── StepTwo.tsx
│ └── StepThree.tsx
├── schemas/
│ ├── stepOneSchema.ts
│ ├── stepTwoSchema.ts
│ ├── stepThreeSchema.ts
│ └── mergedSchema.ts
├── store/ # Redux configuration
├── pages/
│ └── index.tsx # Entry point
└── MultiStepForm.tsx # Main form logic

    npm run dev – Start development

    npm run build – Production build

    npm run lint – Lint codebase

    npm run format – Format using Prettier

Built with 💙 by modern frontend best practices

Can be easily extended with dark mode, server actions, dashboards, and more

MIT — Free to use, modify and distribute.

Developed with 🌻 by Azadeh Sharifi Soltani Feel free to connect and collaborate!