# alanbaltabai/webinar-registration architecture

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

- Interactive diagram: https://gitdiagram.com/alanbaltabai/webinar-registration
- Repository: https://github.com/alanbaltabai/webinar-registration

## Overview

This is a React webinar-registration website. A visitor views the webinar details and presenter, jumps to the registration form, and submits it; the home route action sends an email through EmailJS and redirects to a thank-you page. The landing page also offers a dark-mode toggle, and the router provides error and not-found views. The README documents these capabilities; sampled source confirms the route and page composition, while form, utility, layout, and several presentation implementations were not sampled.

Main entry points: [`src/pages/First.tsx`](https://github.com/alanbaltabai/webinar-registration/blob/master/src/pages/First.tsx) (Landing route), [`src/components/Main.tsx`](https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Main.tsx) (Landing content), [`src/components/Layout.tsx`](https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Layout.tsx) (Page layout), [`src/pages/Thankyou.tsx`](https://github.com/alanbaltabai/webinar-registration/blob/master/src/pages/Thankyou.tsx) (Thank-you page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Routing and pages"]
  node_app["Router setup<br/>[App.tsx]"]
  node_layout["Page layout<br/>[Layout.tsx]"]
  node_first["Landing route<br/>[First.tsx]"]
  node_thanks["Thank-you page<br/>[Thankyou.tsx]"]
  node_notfound["Not-found page<br/>[NotFound.tsx]"]
  node_error["Route error view<br/>[Error.tsx]"]
end

subgraph group_landing["Webinar landing"]
  node_header["Webinar date<br/>[Header.tsx]"]
  node_main["Landing content<br/>[Main.tsx]"]
  node_cta["Webinar CTA<br/>[CTA.tsx]"]
  node_details["Webinar details<br/>[Details.tsx]"]
  node_author["Presenter profile<br/>[Author.tsx]"]
  node_footer["Page footer<br/>[Footer.tsx]"]
end

subgraph group_registration["Registration flow"]
  node_form["Registration form<br/>[Form.tsx]"]
  node_input["Form inputs<br/>[Input.tsx]"]
  node_action["Submit action<br/>[First.tsx]"]
  node_emailutil["Email helper<br/>[utils.ts]"]
  node_authcheck["Access check<br/>[utils.ts]"]
end

subgraph group_appearance["Theme preference"]
  node_toggler["Theme toggle<br/>[Toggler.tsx]"]
  node_themeutil["Theme helpers<br/>[utils.ts]"]
  node_browserstore[("Browser storage")]
end

node_visitor(("Visitor"))
node_emailjs{{"EmailJS"}}

node_visitor -->|"opens site"| node_app
node_app -->|"renders route"| node_layout
node_layout -->|"renders index"| node_first
node_layout -->|"renders route"| node_thanks
node_layout -->|"renders fallback"| node_notfound
node_first -->|"renders"| node_header
node_first -->|"renders"| node_main
node_first -->|"renders"| node_footer
node_main -->|"renders"| node_cta
node_main -->|"renders"| node_details
node_main -->|"renders"| node_author
node_main -->|"renders"| node_form
node_form -->|"renders"| node_input
node_form -->|"submits to route"| node_action
node_action -->|"sends email"| node_emailutil
node_emailutil -.->|"sends message"| node_emailjs
node_action -->|"redirects"| node_thanks
node_thanks -->|"loads access check"| node_authcheck
node_thanks -->|"renders"| node_footer
node_first -->|"renders"| node_toggler
node_toggler -->|"toggles theme"| node_first
node_first -->|"reads preference"| node_browserstore
node_first -->|"applies theme"| node_themeutil
node_themeutil -->|"updates preference"| node_browserstore
node_first -->|"handles route errors"| node_error

click node_app "https://github.com/alanbaltabai/webinar-registration/blob/master/src/App.tsx"
click node_layout "https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Layout.tsx"
click node_first "https://github.com/alanbaltabai/webinar-registration/blob/master/src/pages/First.tsx"
click node_thanks "https://github.com/alanbaltabai/webinar-registration/blob/master/src/pages/Thankyou.tsx"
click node_notfound "https://github.com/alanbaltabai/webinar-registration/blob/master/src/pages/NotFound.tsx"
click node_error "https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Error.tsx"
click node_header "https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Header.tsx"
click node_main "https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Main.tsx"
click node_cta "https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/CTA.tsx"
click node_details "https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Details.tsx"
click node_author "https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Author.tsx"
click node_footer "https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Footer.tsx"
click node_form "https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Form.tsx"
click node_input "https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/form-components/Input.tsx"
click node_action "https://github.com/alanbaltabai/webinar-registration/blob/master/src/pages/First.tsx"
click node_emailutil "https://github.com/alanbaltabai/webinar-registration/blob/master/src/utils.ts"
click node_authcheck "https://github.com/alanbaltabai/webinar-registration/blob/master/src/utils.ts"
click node_toggler "https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Toggler.tsx"
click node_themeutil "https://github.com/alanbaltabai/webinar-registration/blob/master/src/utils.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_layout,node_first,node_thanks,node_notfound,node_error toneBlue
class node_header,node_main,node_cta,node_details,node_author,node_footer toneAmber
class node_form,node_input,node_action,node_emailutil,node_authcheck toneMint
class node_toggler,node_themeutil,node_browserstore toneRose
class node_visitor,node_emailjs toneIndigo
```

## Components

### Routing and pages

- [Router setup](https://github.com/alanbaltabai/webinar-registration/blob/master/src/App.tsx): `src/App.tsx`
- [Page layout](https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Layout.tsx): `src/components/Layout.tsx`
- [Landing route](https://github.com/alanbaltabai/webinar-registration/blob/master/src/pages/First.tsx): `src/pages/First.tsx`
- [Thank-you page](https://github.com/alanbaltabai/webinar-registration/blob/master/src/pages/Thankyou.tsx): `src/pages/Thankyou.tsx`
- [Not-found page](https://github.com/alanbaltabai/webinar-registration/blob/master/src/pages/NotFound.tsx): `src/pages/NotFound.tsx`
- [Route error view](https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Error.tsx): `src/components/Error.tsx`

### Webinar landing

- [Webinar date](https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Header.tsx): `src/components/Header.tsx`
- [Landing content](https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Main.tsx): `src/components/Main.tsx`
- [Webinar CTA](https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/CTA.tsx): `src/components/CTA.tsx`
- [Webinar details](https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Details.tsx): `src/components/Details.tsx`
- [Presenter profile](https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Author.tsx): `src/components/Author.tsx`
- [Page footer](https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Footer.tsx): `src/components/Footer.tsx`

### Registration flow

- [Registration form](https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Form.tsx): `src/components/Form.tsx`
- [Form inputs](https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/form-components/Input.tsx): `src/components/form-components/Input.tsx`
- [Submit action](https://github.com/alanbaltabai/webinar-registration/blob/master/src/pages/First.tsx): `src/pages/First.tsx`
- [Email helper](https://github.com/alanbaltabai/webinar-registration/blob/master/src/utils.ts): `src/utils.ts`
- [Access check](https://github.com/alanbaltabai/webinar-registration/blob/master/src/utils.ts): `src/utils.ts`

### Theme preference

- [Theme toggle](https://github.com/alanbaltabai/webinar-registration/blob/master/src/components/Toggler.tsx): `src/components/Toggler.tsx`
- [Theme helpers](https://github.com/alanbaltabai/webinar-registration/blob/master/src/utils.ts): `src/utils.ts`
- **Browser storage**

### Other components

- **Visitor**
- **EmailJS**

## Connections

- Visitor → Router setup: opens site
- Router setup → Page layout: renders route
- Page layout → Landing route: renders index
- Page layout → Thank-you page: renders route
- Page layout → Not-found page: renders fallback
- Landing route → Webinar date: renders
- Landing route → Landing content: renders
- Landing route → Page footer: renders
- Landing content → Webinar CTA: renders
- Landing content → Webinar details: renders
- Landing content → Presenter profile: renders
- Landing content → Registration form: renders
- Registration form → Form inputs: renders
- Registration form → Submit action: submits to route
- Submit action → Email helper: sends email
- Email helper → EmailJS: sends message
- Submit action → Thank-you page: redirects
- Thank-you page → Access check: loads access check
- Thank-you page → Page footer: renders
- Landing route → Theme toggle: renders
- Theme toggle → Landing route: toggles theme
- Landing route → Browser storage: reads preference
- Landing route → Theme helpers: applies theme
- Theme helpers → Browser storage: updates preference
- Landing route → Route error view: handles route errors