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
triggerfor validation
-
Install dependencies
npm install -
Run the development server
npm run dev -
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!