# Website Registration — Kumbh Mela 2027

**Channel:** Self-service web application  
**Audience:** Frontend / backend developers building the public registration website  
**Shared backend:** Same visitor APIs, validation, pass generation, and SMS/WhatsApp as mobile app and AI voice agent  
**Channel identifier:** `channel = "website"`

---

## 1. Objective

Provide a responsive web flow where a visitor can:

1. Open the official registration site.
2. Verify identity with Aadhaar + mobile OTP.
3. Enter visit details in a guided multi-step form.
4. Confirm and submit.
5. Receive a Kumbh Pass number, on-screen QR/pass, and SMS/WhatsApp confirmation.

The website must feel like an official government service: clear, accessible, and form-based (not conversational).

---

## 2. Scope (Website Only)

| In scope | Out of scope (other channels) |
| --- | --- |
| Browser registration (desktop + mobile web) | Native iOS / Android app UI |
| Multi-step wizard / form UX | Voice / phone conversation |
| Downloadable / printable digital pass page | In-app wallet pass packaging (optional later) |
| Web analytics for funnel steps | Call-center handoff UI |

---

## 3. Recommended Stack (Web Channel)

| Layer | Choice |
| --- | --- |
| Frontend | Next.js (responsive) |
| Backend | Node.js (NestJS / Express) or Java Spring Boot |
| Database | MySQL |
| Auth | OTP via mobile number |
| Identity | UIDAI Aadhaar eKYC (where legally authorized) |
| Messaging | Government-approved SMS gateway + WhatsApp Business API |
| QR | Server-side generation |
| Hosting | NIC Cloud / AWS / Azure / gov-approved cloud |
| Security | HTTPS, Aadhaar tokenization, audit logs, RBAC, DPDP + UIDAI compliance |

---

## 4. User Journey (Website)

```
Landing / Register CTA
        │
Consent & purpose notice
        │
Enter Aadhaar number
        │
Send OTP → Enter OTP
        │
Fetch / confirm Aadhaar profile (if eKYC)
        │
Confirm or enter mobile number
        │
Enter remaining details (form steps)
        │
Review summary page
        │
Submit registration
        │
Success page (Pass + QR)
        │
SMS / WhatsApp sent in background
```

Expected time: about 3–5 minutes.

---

## 5. Screen-by-Screen Specification

### 5.1 Landing / Start

- Brand: Official Kumbh Mela 2027 Visitor Registration.
- Primary CTA: **Register for Kumbh Pass**.
- Short notice: Aadhaar and mobile OTP required; process takes a few minutes.
- Link to privacy / data-use notice (Aadhaar handling).

### 5.2 Consent

- Checkbox or explicit **Continue** acknowledging purpose of registration and data use.
- If declined → show message and exit (no data collected).

### 5.3 Aadhaar Entry

| UI | Rules |
| --- | --- |
| Input: 12-digit Aadhaar (masked after blur optional) | Numeric only; spaces allowed in UI, stripped on submit |
| Client + server validation | Verhoeff checksum |
| Error copy | “The Aadhaar number appears to be incorrect. Please re-enter.” |
| Uniqueness | Server rejects if already registered |

### 5.4 OTP Verification

1. Backend sends 6-digit OTP to Aadhaar-linked / declared mobile.
2. UI: OTP input (6 boxes or single field), **Verify**, **Resend OTP**.
3. Max attempts: **3**.
4. On failure: “The OTP does not match. Would you like a new OTP?”
5. Lock further attempts after limit; show support contact.

### 5.5 Aadhaar Profile Confirm (Optional eKYC)

If eKYC available, prefill and show:

- Name  
- Gender  
- Date of Birth / Age  

Actions:

- **Yes, this is correct** → continue  
- **No** → redirect to human support / helpdesk contact (do not allow silent edit of eKYC name if policy forbids it)

If eKYC is not available, collect Name, Age/DOB, Gender manually on the next step.

### 5.6 Mobile Number

- If Aadhaar mobile known: show masked number + “Is this your current contact number?”
- Else: collect 10-digit Indian mobile.
- Validate format before OTP session binding / registration.

### 5.7 Visit Details Form

Collect one section at a time (recommended wizard steps):

| Field | Control | Validation |
| --- | --- | --- |
| Emergency contact | Tel input | 10 digits; ≠ primary mobile (recommended) |
| State / Country | Select or searchable list | Required; country if international |
| Arrival date | Date picker | Future date only |
| Transport mode | Radio / select | Train, Flight, Bus, Personal Vehicle |
| Stay type | Radio / select | Hotel, Tent City, Akhada, Day Visit |

All fields mandatory before enabling **Review**.

### 5.8 Review & Confirm

Show read-only summary:

- Name  
- Mobile (masked)  
- Arrival date  
- Travel mode  
- Stay type  
- State / country  

Actions: **Edit** (return to relevant step) · **Confirm & Register**.

### 5.9 Success Page

Display:

- Congratulations message  
- Pass number: `KM2027-000001`  
- QR code image  
- Download / print pass  
- Reminder: carry Aadhaar card and pass while travelling  
- Note that SMS/WhatsApp has been sent  

Deep link example: `https://kumbh.gov.in/pass/KM2027-000001`

---

## 6. Database Fields (Shared)

| Field | Source |
| --- | --- |
| Pass Number | Auto generated |
| Aadhaar Number | User |
| Name | Aadhaar / User |
| Age | Aadhaar / User |
| Gender | Aadhaar / User |
| Mobile | OTP verification |
| Emergency Contact | User |
| State | User |
| Arrival Date | User |
| Transport Mode | User |
| Stay Type | User |
| Registration Time | System |
| Status | Approved |
| QR Code | System |
| Channel | `website` |

---

## 7. Validation Rules (Must Match All Channels)

- Aadhaar must be unique.
- Aadhaar must pass Verhoeff checksum.
- Mobile must be OTP verified before registration.
- Arrival date cannot be in the past.
- Emergency contact should not equal primary mobile.
- All mandatory fields completed before INSERT.

---

## 8. API Contracts (Website Client)

Base path example: `/api/v1/registration`

| Method | Endpoint | Purpose |
| --- | --- | --- |
| `POST` | `/aadhaar/validate` | Format, checksum, uniqueness |
| `POST` | `/otp/send` | Send OTP |
| `POST` | `/otp/verify` | Verify OTP (session token) |
| `GET` | `/aadhaar/profile` | Optional eKYC fetch (authorized session) |
| `POST` | `/visitors` | Create registration |
| `GET` | `/pass/{pass_no}` | Fetch pass + QR for success / download page |

### Create registration body

```json
{
  "aadhaar_number": "XXXXXXXXXXXX",
  "name": "Rajesh Kumar",
  "age": 34,
  "gender": "Male",
  "mobile": "98XXXXXXXX",
  "emergency_contact": "97XXXXXXXX",
  "state": "Uttar Pradesh",
  "arrival_date": "2027-01-18",
  "transport_mode": "Train",
  "stay_type": "Tent City",
  "channel": "website"
}
```

### Success response

```json
{
  "pass_no": "KM2027-000001",
  "status": "Approved",
  "qr_url": "https://kumbh.gov.in/api/v1/pass/KM2027-000001/qr",
  "pass_url": "https://kumbh.gov.in/pass/KM2027-000001"
}
```

---

## 9. Pass, QR & Messaging

### Pass number

```
KM2027-000001
KM2027-000002
```

Sequential via MySQL sequence / auto-increment.

### QR payload (preferred: pass number only)

```json
{
  "pass_no": "KM2027-000001"
}
```

Or full payload if policy allows:

```json
{
  "pass_no": "KM2027-000001",
  "name": "Rajesh Kumar",
  "arrival": "2027-01-18",
  "status": "Approved"
}
```

### SMS / WhatsApp (same template as other channels)

```
Government of India
Dear Rajesh Kumar,
Your Kumbh Mela 2027 registration has been approved.
Pass Number:
KM2027-000001
Arrival Date:
18-Jan-2027
Please carry your Aadhaar Card and this pass during your visit.
Download your pass:
https://kumbh.gov.in/pass/KM2027-000001
```

Triggered by backend after successful INSERT — website must not send SMS directly from the browser.

---

## 10. Website-Specific UX Requirements

- Fully responsive (mobile browsers are first-class).
- Keyboard and screen-reader accessible form labels.
- Progress indicator for wizard steps.
- Autosave draft in session storage only after OTP (no Aadhaar in localStorage plaintext).
- Mask Aadhaar in UI after validation where possible.
- CSRF protection on mutating requests.
- Rate-limit OTP send from same IP / Aadhaar / mobile.
- Hindi + English UI (language toggle).

---

## 11. Security Notes (Web)

- Serve only over HTTPS.
- Never log full Aadhaar; store tokenized / encrypted at rest.
- Session cookie / JWT after OTP; short TTL until registration completes.
- Audit log: step, channel=`website`, IP, user-agent, outcome.
- Comply with Indian data protection and UIDAI rules for Aadhaar display and storage.

---

## 12. Acceptance Checklist (Website)

- [ ] Consent gate before Aadhaar capture  
- [ ] Aadhaar checksum + uniqueness with clear errors  
- [ ] OTP send / verify / resend with max 3 attempts  
- [ ] Optional eKYC confirm or manual profile fields  
- [ ] All visit fields validated client- and server-side  
- [ ] Review page with edit path  
- [ ] `channel: "website"` persisted  
- [ ] Success page shows pass number + QR + download  
- [ ] SMS/WhatsApp sent by backend  
- [ ] Pass page works when opened from SMS link  
- [ ] Accessibility and mobile-web smoke tests pass  

---

## 13. Relationship to Other Channels

| Concern | Website | Mobile app | Voice agent |
| --- | --- | --- | --- |
| UX | Multi-step form | Native screens | Conversation |
| Same MySQL visitor table | Yes | Yes | Yes |
| Same OTP / pass / QR / SMS | Yes | Yes | Yes |
| `channel` value | `website` | `mobile_app` | `voice_agent` |

Do not fork business rules per channel. Only the presentation layer differs.