# ganeshhraikwar/multistepform architecture

> Architecture diagram of the GitHub repository ganeshhraikwar/multistepform, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ganeshhraikwar/multistepform
- Repository: https://github.com/ganeshhraikwar/multistepform

## Overview

1. **Repository shape**
   - This is a **frontend-only single-page application** for a multi-step form flow.
   - The core stack is **React 19 + TypeScript + Vite**, with **Tailwind CSS** for styling and **Framer Motion** for transitions.

2. **Application bootstrap**
   - `index.html` is the Vite entry shell.
   - `src/main.tsx` is the runtime bootstrap that mounts the React tree.
   - `src/App.tsx` is the top-level orchestrator for the entire form experience.

3. **Core orchestration boundary**
   - `App.tsx` likely owns the central wizard state: current step, accumulated form data, billing mode, and navigation direction.
   - This is the main boundary where user interactions are converted into application state changes and where the active screen is selected.

4. **Step-based UI decomposition**
   - The flow is split into focused view components:
     - `PersonalInfo.tsx`
     - `SelectPlan.tsx`
     - `AddOns.tsx`
     - `Summary.tsx`
     - `ThankYou.tsx`
   - Each component represents one stage of the user journey and receives the relevant slice of state and callbacks from the parent.

5. **Navigation and progress display**
   - `Sidebar.tsx` is the persistent navigation/progress element.
   - It likely renders the step list and visual progression state, while the main content area swaps between the active step screens.

6. **Shared data model and derived pricing**
   - `src/types.ts` defines the domain model for the form state and step-related types.
   - `src/data.ts` holds the static plan/add-on definitions and pricing metadata used to calculate totals and render selectable options.
   - This separation keeps pricing/content data out of view components and makes the flow deterministic.

7. **Form state and validation flow**
   - The app supports **real-time validation** for required fields and email format, so validation logic is centralized rather than embedded in each screen in isolation.
   - State must persist across steps, because users can move forward and backward without losing previous entries.

8. **Derived business logic**
   - Pricing is computed from three inputs: selected plan, billing cycle, and optional add-ons.
   - The `Summary` step is the aggregation point where the app presents the final configuration before confirmation.
   - `ThankYou` is the terminal screen shown after confirmation, indicating the flow is complete.

9. **Animation and interaction layer**
   - The README calls out **Framer Motion** and directional transitions, so the step change between views is animated rather than hard-swapped.
   - This implies a clear separation between logical navigation state and presentation animation state.

10. **Styling and assets**
    - `src/index.css` and Tailwind v4 provide the global styling layer.
    - `public/` contains static assets served directly by Vite.
    - `assets/` contains design/support files; it is not the app runtime source but part of the repository’s visual asset pipeline.

11. **Build and deployment**
    - `vite.config.ts` controls the frontend build setup.
    - `.github/workflows/deploy.yml` indicates an automated CI/CD deployment path for the built static site.
    - `.env.example` suggests environment-driven configuration is supported, likely for deployment-time or build-time settings.

12. **Architecture summary**
    - The main diagram should show a **single React app shell** with:
      - a persistent sidebar/progress area,
      - a central step renderer,
      - centralized form state in the top-level app,
      - typed/static content and pricing data feeding the step screens,
      - animated transitions between steps,
      - and a static build/deploy pipeline via Vite + GitHub Actions.

Main entry points: [`src/App.tsx`](https://github.com/ganeshhraikwar/multistepform/blob/main/src/App.tsx) (App shell), [`src/data.ts`](https://github.com/ganeshhraikwar/multistepform/blob/main/src/data.ts) (Pricing data), [`.github/workflows/deploy.yml`](https://github.com/ganeshhraikwar/multistepform/blob/main/.github/workflows/deploy.yml) (Deploy workflow), [`vite.config.ts`](https://github.com/ganeshhraikwar/multistepform/blob/main/vite.config.ts) (Vite config)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Frontend app"]
  node_index_html["HTML shell<br/>vite entry<br/>[index.html]"]
  node_main_tsx["Bootstrap<br/>react entry<br/>[main.tsx]"]
  node_app_tsx["App shell<br/>wizard orchestrator<br/>[App.tsx]"]
  node_sidebar_tsx["Sidebar<br/>progress nav<br/>[Sidebar.tsx]"]
  node_personal_info_tsx["Personal info<br/>step view<br/>[PersonalInfo.tsx]"]
  node_select_plan_tsx["Select plan<br/>step view<br/>[SelectPlan.tsx]"]
  node_addons_tsx["Add-ons<br/>step view<br/>[AddOns.tsx]"]
  node_summary_tsx["Summary<br/>review step<br/>[Summary.tsx]"]
  node_thankyou_tsx["Thank you<br/>terminal view<br/>[ThankYou.tsx]"]
  node_index_css["Global styles<br/>tailwind css<br/>[index.css]"]
end

subgraph group_domain["Form domain"]
  node_types_ts["Types<br/>domain model<br/>[types.ts]"]
  node_data_ts[("Pricing data<br/>static content<br/>[data.ts]")]
end

subgraph group_delivery["Build & deploy"]
  node_vite_config_ts["Vite config<br/>build config<br/>[vite.config.ts]"]
  node_deploy_yml["Deploy workflow<br/>ci pipeline<br/>[deploy.yml]"]
  node_env_example["Env template<br/>config template<br/>[.env.example]"]
  node_public_assets[("Public assets<br/>static assets")]
  node_repo_assets[("Design assets<br/>support assets")]
end

node_index_html -->|"loads"| node_main_tsx
node_main_tsx -->|"mounts"| node_app_tsx
node_app_tsx -->|"renders"| node_sidebar_tsx
node_app_tsx -->|"shows"| node_personal_info_tsx
node_app_tsx -->|"shows"| node_select_plan_tsx
node_app_tsx -->|"shows"| node_addons_tsx
node_app_tsx -->|"shows"| node_summary_tsx
node_app_tsx -->|"shows"| node_thankyou_tsx
node_app_tsx -->|"uses"| node_types_ts
node_app_tsx -->|"uses"| node_data_ts
node_personal_info_tsx -->|"types"| node_types_ts
node_select_plan_tsx -->|"reads"| node_data_ts
node_addons_tsx -->|"reads"| node_data_ts
node_summary_tsx -->|"computes"| node_data_ts
node_app_tsx -->|"styles"| node_index_css
node_app_tsx -->|"built by"| node_vite_config_ts
node_vite_config_ts -->|"serves"| node_public_assets
node_deploy_yml -->|"builds with"| node_vite_config_ts
node_deploy_yml -->|"publishes"| node_public_assets
node_env_example -.->|"configures"| node_deploy_yml
node_repo_assets -.->|"supports"| node_app_tsx

click node_index_html "https://github.com/ganeshhraikwar/multistepform/blob/main/index.html"
click node_main_tsx "https://github.com/ganeshhraikwar/multistepform/blob/main/src/main.tsx"
click node_app_tsx "https://github.com/ganeshhraikwar/multistepform/blob/main/src/App.tsx"
click node_sidebar_tsx "https://github.com/ganeshhraikwar/multistepform/blob/main/src/components/Sidebar.tsx"
click node_personal_info_tsx "https://github.com/ganeshhraikwar/multistepform/blob/main/src/components/PersonalInfo.tsx"
click node_select_plan_tsx "https://github.com/ganeshhraikwar/multistepform/blob/main/src/components/SelectPlan.tsx"
click node_addons_tsx "https://github.com/ganeshhraikwar/multistepform/blob/main/src/components/AddOns.tsx"
click node_summary_tsx "https://github.com/ganeshhraikwar/multistepform/blob/main/src/components/Summary.tsx"
click node_thankyou_tsx "https://github.com/ganeshhraikwar/multistepform/blob/main/src/components/ThankYou.tsx"
click node_types_ts "https://github.com/ganeshhraikwar/multistepform/blob/main/src/types.ts"
click node_data_ts "https://github.com/ganeshhraikwar/multistepform/blob/main/src/data.ts"
click node_index_css "https://github.com/ganeshhraikwar/multistepform/blob/main/src/index.css"
click node_vite_config_ts "https://github.com/ganeshhraikwar/multistepform/blob/main/vite.config.ts"
click node_deploy_yml "https://github.com/ganeshhraikwar/multistepform/blob/main/.github/workflows/deploy.yml"
click node_env_example "https://github.com/ganeshhraikwar/multistepform/blob/main/.env.example"
click node_public_assets "https://github.com/ganeshhraikwar/multistepform/tree/main/public"
click node_repo_assets "https://github.com/ganeshhraikwar/multistepform/tree/main/assets"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_index_html,node_main_tsx,node_app_tsx,node_sidebar_tsx,node_personal_info_tsx,node_select_plan_tsx,node_addons_tsx,node_summary_tsx,node_thankyou_tsx,node_index_css toneBlue
class node_types_ts,node_data_ts toneAmber
class node_vite_config_ts,node_deploy_yml,node_env_example,node_public_assets,node_repo_assets toneMint
```

## Components

### Frontend app

React SPA runtime, state, screens, and shared UI flow.

- [HTML shell](https://github.com/ganeshhraikwar/multistepform/blob/main/index.html): vite entry · Root document loaded by Vite before the React app starts. · `index.html`
- [Bootstrap](https://github.com/ganeshhraikwar/multistepform/blob/main/src/main.tsx): react entry · Mounts the React tree into the page. · `src/main.tsx`
- [App shell](https://github.com/ganeshhraikwar/multistepform/blob/main/src/App.tsx): wizard orchestrator · Owns the multi-step flow state, navigation direction, and active screen selection. · `src/App.tsx`
- [Sidebar](https://github.com/ganeshhraikwar/multistepform/blob/main/src/components/Sidebar.tsx): progress nav · Persistent step list and progress indicator for the form flow. · `src/components/Sidebar.tsx`
- [Personal info](https://github.com/ganeshhraikwar/multistepform/blob/main/src/components/PersonalInfo.tsx): step view · Collects required user details and handles field-level validation input. · `src/components/PersonalInfo.tsx`
- [Select plan](https://github.com/ganeshhraikwar/multistepform/blob/main/src/components/SelectPlan.tsx): step view · Lets the user choose a plan and billing cycle. · `src/components/SelectPlan.tsx`
- [Add-ons](https://github.com/ganeshhraikwar/multistepform/blob/main/src/components/AddOns.tsx): step view · Lets the user toggle optional add-ons that affect the total. · `src/components/AddOns.tsx`
- [Summary](https://github.com/ganeshhraikwar/multistepform/blob/main/src/components/Summary.tsx): review step · Aggregates selected plan, billing mode, and add-ons before confirmation. · `src/components/Summary.tsx`
- [Thank you](https://github.com/ganeshhraikwar/multistepform/blob/main/src/components/ThankYou.tsx): terminal view · Final confirmation screen shown after the flow completes. · `src/components/ThankYou.tsx`
- [Global styles](https://github.com/ganeshhraikwar/multistepform/blob/main/src/index.css): tailwind css · Application-wide styling layer for the UI. · `src/index.css`

### Form domain

Typed model and static pricing/content used across steps.

- [Types](https://github.com/ganeshhraikwar/multistepform/blob/main/src/types.ts): domain model · Shared form state, step, and billing types. · `src/types.ts`
- [Pricing data](https://github.com/ganeshhraikwar/multistepform/blob/main/src/data.ts): static content · Plan and add-on definitions plus pricing metadata used by the wizard. · `src/data.ts`

### Build & deploy

Vite build setup and automated static deployment.

- [Vite config](https://github.com/ganeshhraikwar/multistepform/blob/main/vite.config.ts): build config · Build and dev-server configuration for the frontend app. · `vite.config.ts`
- [Deploy workflow](https://github.com/ganeshhraikwar/multistepform/blob/main/.github/workflows/deploy.yml): ci pipeline · GitHub Actions workflow that builds and deploys the static site. · `.github/workflows/deploy.yml`
- [Env template](https://github.com/ganeshhraikwar/multistepform/blob/main/.env.example): config template · Example environment variables for build-time or deployment-time configuration. · `.env.example`
- [Public assets](https://github.com/ganeshhraikwar/multistepform/tree/main/public): static assets · Files served directly by Vite at runtime. · `public`
- [Design assets](https://github.com/ganeshhraikwar/multistepform/tree/main/assets): support assets · Repository assets used for visual/design support rather than app runtime. · `assets`

## Connections

- HTML shell → Bootstrap: loads · Vite uses the HTML shell to start the app.
- Bootstrap → App shell: mounts · Bootstraps the React application shell.
- App shell → Sidebar: renders · Keeps progress navigation persistent while steps change.
- App shell → Personal info: shows · Active screen for collecting personal details.
- App shell → Select plan: shows · Active screen for choosing plan and billing cycle.
- App shell → Add-ons: shows · Active screen for optional add-on selection.
- App shell → Summary: shows · Active review screen before confirmation.
- App shell → Thank you: shows · Terminal confirmation screen.
- App shell → Types: uses · Shares the central form and step types.
- App shell → Pricing data: uses · Consumes static pricing and option definitions.
- Personal info → Types: types · Uses the shared form model for inputs and validation.
- Select plan → Pricing data: reads · Displays available plans and pricing from static data.
- Add-ons → Pricing data: reads · Displays selectable add-ons from static data.
- Summary → Pricing data: computes · Builds final pricing from plan and add-on metadata.
- App shell → Global styles: styles · Global styling supports the shell and step views.
- App shell → Vite config: built by · Frontend build and dev setup is controlled by Vite.
- Vite config → Public assets: serves · Static public files are part of the Vite build pipeline.
- Deploy workflow → Vite config: builds with · CI uses the Vite build configuration to produce the site.
- Deploy workflow → Public assets: publishes · Deploy workflow ships the built static frontend.
- Env template → Deploy workflow: configures · Provides example environment settings for the deployment path.
- Design assets → App shell: supports · Design/support files inform the app's visual implementation.