# amitdas4321/indian-card-generator architecture

> Architecture diagram of the GitHub repository amitdas4321/indian-card-generator, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/amitdas4321/indian-card-generator
- Repository: https://github.com/amitdas4321/indian-card-generator

## Overview

Indian Card Generator creates novelty identity-style cards in the browser, registers them through a signed server API, and supports later online verification and administration. The primary flow runs from card details and photo input through validation and canvas rendering to certificate registration and download; verification retrieves registered records and can render them again. Separate branches cover admin login and record management, plus selectable Firebase, MySQL, and MongoDB persistence. The graph follows sampled calls and documented capabilities; some component internals and route wiring were not sampled.

Main entry points: [`src/App.tsx`](https://github.com/amitdas4321/indian-card-generator/blob/main/src/App.tsx) (Application routes), [`src/services/database/index.ts`](https://github.com/amitdas4321/indian-card-generator/blob/main/src/services/database/index.ts) (Database selector), [`src/services/certificateService.ts`](https://github.com/amitdas4321/indian-card-generator/blob/main/src/services/certificateService.ts) (Certificate API client), [`src/components/CardForm.tsx`](https://github.com/amitdas4321/indian-card-generator/blob/main/src/components/CardForm.tsx) (Card details form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_creation["Card Creation"]
  node_app["Application routes<br/>[App.tsx]"]
  node_form["Card details form<br/>[CardForm.tsx]"]
  node_validation["Input validation<br/>[validation.ts]"]
  node_photo["Photo upload<br/>[PhotoUploader.tsx]"]
  node_preview["Canvas preview<br/>[CardPreview.tsx]"]
  node_renderer["Card and QR renderer<br/>[cardRenderer.ts]"]
  node_download["Card download<br/>[DownloadButton.tsx]"]
end

subgraph group_api["API and Security"]
  node_certservice["Certificate API client"]
  node_signer["Request signer<br/>[apiSigner.ts]"]
  node_server["Express API<br/>[server.ts]"]
end

subgraph group_verification["Verification"]
  node_verify["Verification portal"]
end

subgraph group_administration["Administration"]
  node_adminpage["Admin routes<br/>[AdminPage.tsx]"]
  node_adminlogin["Admin login<br/>[AdminLogin.tsx]"]
  node_dashboard["Admin dashboard<br/>[AdminDashboard.tsx]"]
  node_adminservice["Admin API client<br/>[adminService.ts]"]
end

subgraph group_persistence["Persistence"]
  node_dbindex["Database selector<br/>[index.ts]"]
  node_firebase["Firebase adapter<br/>[firebase.ts]"]
  node_mysql["MySQL adapter<br/>[mysql.ts]"]
  node_mongo["MongoDB adapter<br/>[mongodb.ts]"]
  node_database[("Configured database")]
end

node_user(("Card creator"))

node_user -->|"opens"| node_app
node_app -->|"renders"| node_form
node_app -->|"renders"| node_preview
node_app -->|"renders"| node_download
node_app -->|"routes to"| node_verify
node_app -->|"routes to"| node_adminpage
node_form -->|"validates with"| node_validation
node_form -->|"accepts photo"| node_photo
node_preview -->|"renders via"| node_renderer
node_download -->|"registers card"| node_certservice
node_certservice -->|"signs requests"| node_signer
node_certservice -->|"calls API"| node_server
node_verify -->|"looks up card"| node_certservice
node_verify -->|"renders card"| node_renderer
node_adminpage -->|"presents login"| node_adminlogin
node_adminpage -->|"presents dashboard"| node_dashboard
node_adminlogin -->|"authenticates through"| node_adminservice
node_dashboard -->|"manages records via"| node_adminservice
node_adminservice -->|"calls admin API"| node_server
node_server -->|"queries and updates"| node_dbindex
node_dbindex -->|"selects provider"| node_firebase
node_dbindex -->|"selects provider"| node_mysql
node_dbindex -->|"selects provider"| node_mongo
node_firebase -.->|"reads and writes"| node_database
node_mysql -.->|"reads and writes"| node_database
node_mongo -.->|"reads and writes"| node_database

click node_app "https://github.com/amitdas4321/indian-card-generator/blob/main/src/App.tsx"
click node_form "https://github.com/amitdas4321/indian-card-generator/blob/main/src/components/CardForm.tsx"
click node_validation "https://github.com/amitdas4321/indian-card-generator/blob/main/src/utils/validation.ts"
click node_photo "https://github.com/amitdas4321/indian-card-generator/blob/main/src/components/PhotoUploader.tsx"
click node_preview "https://github.com/amitdas4321/indian-card-generator/blob/main/src/components/CardPreview.tsx"
click node_renderer "https://github.com/amitdas4321/indian-card-generator/blob/main/src/utils/cardRenderer.ts"
click node_download "https://github.com/amitdas4321/indian-card-generator/blob/main/src/components/DownloadButton.tsx"
click node_certservice "https://github.com/amitdas4321/indian-card-generator/blob/main/src/services/certificateService.ts"
click node_signer "https://github.com/amitdas4321/indian-card-generator/blob/main/src/utils/apiSigner.ts"
click node_server "https://github.com/amitdas4321/indian-card-generator/blob/main/server.ts"
click node_verify "https://github.com/amitdas4321/indian-card-generator/blob/main/src/components/VerificationPage.tsx"
click node_adminpage "https://github.com/amitdas4321/indian-card-generator/blob/main/src/components/admin/AdminPage.tsx"
click node_adminlogin "https://github.com/amitdas4321/indian-card-generator/blob/main/src/components/admin/AdminLogin.tsx"
click node_dashboard "https://github.com/amitdas4321/indian-card-generator/blob/main/src/components/admin/AdminDashboard.tsx"
click node_adminservice "https://github.com/amitdas4321/indian-card-generator/blob/main/src/services/adminService.ts"
click node_dbindex "https://github.com/amitdas4321/indian-card-generator/blob/main/src/services/database/index.ts"
click node_firebase "https://github.com/amitdas4321/indian-card-generator/blob/main/src/services/database/firebase.ts"
click node_mysql "https://github.com/amitdas4321/indian-card-generator/blob/main/src/services/database/mysql.ts"
click node_mongo "https://github.com/amitdas4321/indian-card-generator/blob/main/src/services/database/mongodb.ts"

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_app,node_form,node_validation,node_photo,node_preview,node_renderer,node_download toneBlue
class node_certservice,node_signer,node_server toneAmber
class node_verify toneMint
class node_adminpage,node_adminlogin,node_dashboard,node_adminservice toneRose
class node_dbindex,node_firebase,node_mysql,node_mongo,node_database,node_user toneIndigo
```

## Components

### Card Creation

- [Application routes](https://github.com/amitdas4321/indian-card-generator/blob/main/src/App.tsx): `src/App.tsx`
- [Card details form](https://github.com/amitdas4321/indian-card-generator/blob/main/src/components/CardForm.tsx): `src/components/CardForm.tsx`
- [Input validation](https://github.com/amitdas4321/indian-card-generator/blob/main/src/utils/validation.ts): `src/utils/validation.ts`
- [Photo upload](https://github.com/amitdas4321/indian-card-generator/blob/main/src/components/PhotoUploader.tsx): `src/components/PhotoUploader.tsx`
- [Canvas preview](https://github.com/amitdas4321/indian-card-generator/blob/main/src/components/CardPreview.tsx): `src/components/CardPreview.tsx`
- [Card and QR renderer](https://github.com/amitdas4321/indian-card-generator/blob/main/src/utils/cardRenderer.ts): `src/utils/cardRenderer.ts`
- [Card download](https://github.com/amitdas4321/indian-card-generator/blob/main/src/components/DownloadButton.tsx): `src/components/DownloadButton.tsx`

### API and Security

- [Certificate API client](https://github.com/amitdas4321/indian-card-generator/blob/main/src/services/certificateService.ts): `src/services/certificateService.ts`
- [Request signer](https://github.com/amitdas4321/indian-card-generator/blob/main/src/utils/apiSigner.ts): `src/utils/apiSigner.ts`
- [Express API](https://github.com/amitdas4321/indian-card-generator/blob/main/server.ts): `server.ts`

### Verification

- [Verification portal](https://github.com/amitdas4321/indian-card-generator/blob/main/src/components/VerificationPage.tsx): `src/components/VerificationPage.tsx`

### Administration

- [Admin routes](https://github.com/amitdas4321/indian-card-generator/blob/main/src/components/admin/AdminPage.tsx): `src/components/admin/AdminPage.tsx`
- [Admin login](https://github.com/amitdas4321/indian-card-generator/blob/main/src/components/admin/AdminLogin.tsx): `src/components/admin/AdminLogin.tsx`
- [Admin dashboard](https://github.com/amitdas4321/indian-card-generator/blob/main/src/components/admin/AdminDashboard.tsx): `src/components/admin/AdminDashboard.tsx`
- [Admin API client](https://github.com/amitdas4321/indian-card-generator/blob/main/src/services/adminService.ts): `src/services/adminService.ts`

### Persistence

- [Database selector](https://github.com/amitdas4321/indian-card-generator/blob/main/src/services/database/index.ts): `src/services/database/index.ts`
- [Firebase adapter](https://github.com/amitdas4321/indian-card-generator/blob/main/src/services/database/firebase.ts): `src/services/database/firebase.ts`
- [MySQL adapter](https://github.com/amitdas4321/indian-card-generator/blob/main/src/services/database/mysql.ts): `src/services/database/mysql.ts`
- [MongoDB adapter](https://github.com/amitdas4321/indian-card-generator/blob/main/src/services/database/mongodb.ts): `src/services/database/mongodb.ts`
- **Configured database**

### Other components

- **Card creator**

## Connections

- Card creator → Application routes: opens
- Application routes → Card details form: renders
- Application routes → Canvas preview: renders
- Application routes → Card download: renders
- Application routes → Verification portal: routes to
- Application routes → Admin routes: routes to
- Card details form → Input validation: validates with
- Card details form → Photo upload: accepts photo
- Canvas preview → Card and QR renderer: renders via
- Card download → Certificate API client: registers card
- Certificate API client → Request signer: signs requests
- Certificate API client → Express API: calls API
- Verification portal → Certificate API client: looks up card
- Verification portal → Card and QR renderer: renders card
- Admin routes → Admin login: presents login
- Admin routes → Admin dashboard: presents dashboard
- Admin login → Admin API client: authenticates through
- Admin dashboard → Admin API client: manages records via
- Admin API client → Express API: calls admin API
- Express API → Database selector: queries and updates
- Database selector → Firebase adapter: selects provider
- Database selector → MySQL adapter: selects provider
- Database selector → MongoDB adapter: selects provider
- Firebase adapter → Configured database: reads and writes
- MySQL adapter → Configured database: reads and writes
- MongoDB adapter → Configured database: reads and writes