# bryandrouet/bingo architecture

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

- Interactive diagram: https://gitdiagram.com/bryandrouet/bingo
- Repository: https://github.com/bryandrouet/bingo

## Overview

Bingo Interactif is a browser-based app for signing in, creating and managing bingo grids, and playing them by marking cells. The runtime entry point restores the authenticated user's saved view and routes to the dashboard, create, account, or play views. Bingo documents live under each user's Firestore path; Firebase also provides authentication and profile-photo storage. The sampled source supports the main view and data calls, but not every dashboard or profile behavior; unsampled capabilities are not expanded into guessed flows.

Main entry points: [`js/app.js`](https://github.com/bryandrouet/bingo/blob/main/js/app.js) (App coordinator), [`js/ui.js`](https://github.com/bryandrouet/bingo/blob/main/js/ui.js) (UI utilities), [`js/dashboard.js`](https://github.com/bryandrouet/bingo/blob/main/js/dashboard.js) (Dashboard and account), [`js/firebase-client.js`](https://github.com/bryandrouet/bingo/blob/main/js/firebase-client.js) (Firebase client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["App runtime"]
  node_app["App coordinator<br/>[app.js]"]
  node_dashboard["Dashboard and account<br/>[dashboard.js]"]
end

subgraph group_identity["Identity and profile"]
  node_auth["Authentication<br/>[auth.js]"]
  node_avatars["Avatar helpers<br/>[avatars.js]"]
end

subgraph group_bingo["Bingo workflows"]
  node_create["Create and edit<br/>[create.js]"]
  node_play["Play grid<br/>[play.js]"]
  node_categories["Category styling<br/>[categories.js]"]
  node_bingos["Bingo data access<br/>[bingos.js]"]
end

subgraph group_shared["Shared UI and state"]
  node_session["Current session<br/>[session.js]"]
  node_ui["UI utilities<br/>[ui.js]"]
  node_view_state["View and draft state<br/>[view-state.js]"]
  node_errors["Error handling<br/>[errors.js]"]
end

subgraph group_firebase["Firebase services"]
  node_firebase_client["Firebase client<br/>[firebase-client.js]"]
  node_firebase_auth["Firebase Authentication"]
  node_firestore[("Cloud Firestore")]
  node_firebase_storage[("Firebase Storage")]
end

node_user(("Bingo user"))

node_user -.->|"uses"| node_app
node_app -->|"routes login"| node_auth
node_app -->|"restores views"| node_dashboard
node_app -->|"restores create"| node_create
node_app -->|"restores play"| node_play
node_app -->|"sets user"| node_session
node_app -->|"initializes UI"| node_ui
node_app -->|"restores state"| node_view_state
node_app -->|"logs auth errors"| node_errors
node_auth -->|"calls auth APIs"| node_firebase_client
node_auth -->|"sets user"| node_session
node_auth -->|"renders feedback"| node_ui
node_auth -->|"builds header"| node_categories
node_auth -->|"reports failures"| node_errors
node_firebase_client -->|"uses SDK"| node_firebase_auth
node_firebase_client -->|"uses SDK"| node_firestore
node_firebase_client -->|"uses SDK"| node_firebase_storage
node_bingos -->|"queries data"| node_firebase_client
node_bingos -->|"uses current user"| node_session
node_bingos -->|"reports failures"| node_errors
node_dashboard -->|"loads bingos"| node_bingos
node_dashboard -->|"builds registry"| node_categories
node_dashboard -->|"renders profile image"| node_avatars
node_dashboard -->|"manages profile data"| node_firebase_client
node_dashboard -->|"renders views"| node_ui
node_create -->|"loads document refs"| node_bingos
node_create -->|"validates category"| node_categories
node_create -->|"writes bingo"| node_firebase_client
node_create -->|"saves draft"| node_view_state
node_create -->|"renders form"| node_ui
node_create -->|"returns to dashboard"| node_dashboard
node_play -->|"gets document ref"| node_bingos
node_play -->|"reads and saves grid"| node_firebase_client
node_play -->|"styles game"| node_categories
node_play -->|"returns to dashboard"| node_dashboard
node_play -->|"renders game"| node_ui
node_play -->|"sets view"| node_view_state
node_categories -->|"uses UI helpers"| node_ui
node_avatars -->|"uses UI helpers"| node_ui
node_avatars -->|"uses session"| node_session
node_errors -->|"shows errors"| node_ui
node_ui -->|"persists scroll"| node_view_state

click node_app "https://github.com/bryandrouet/bingo/blob/main/js/app.js"
click node_auth "https://github.com/bryandrouet/bingo/blob/main/js/auth.js"
click node_avatars "https://github.com/bryandrouet/bingo/blob/main/js/avatars.js"
click node_dashboard "https://github.com/bryandrouet/bingo/blob/main/js/dashboard.js"
click node_create "https://github.com/bryandrouet/bingo/blob/main/js/create.js"
click node_play "https://github.com/bryandrouet/bingo/blob/main/js/play.js"
click node_categories "https://github.com/bryandrouet/bingo/blob/main/js/categories.js"
click node_bingos "https://github.com/bryandrouet/bingo/blob/main/js/bingos.js"
click node_firebase_client "https://github.com/bryandrouet/bingo/blob/main/js/firebase-client.js"
click node_session "https://github.com/bryandrouet/bingo/blob/main/js/session.js"
click node_ui "https://github.com/bryandrouet/bingo/blob/main/js/ui.js"
click node_view_state "https://github.com/bryandrouet/bingo/blob/main/js/view-state.js"
click node_errors "https://github.com/bryandrouet/bingo/blob/main/js/errors.js"

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_dashboard,node_user toneBlue
class node_auth,node_avatars toneAmber
class node_create,node_play,node_categories,node_bingos toneMint
class node_session,node_ui,node_view_state,node_errors toneRose
class node_firebase_client,node_firebase_auth,node_firestore,node_firebase_storage toneIndigo
```

## Components

### App runtime

- [App coordinator](https://github.com/bryandrouet/bingo/blob/main/js/app.js): `js/app.js`
- [Dashboard and account](https://github.com/bryandrouet/bingo/blob/main/js/dashboard.js): `js/dashboard.js`

### Identity and profile

- [Authentication](https://github.com/bryandrouet/bingo/blob/main/js/auth.js): `js/auth.js`
- [Avatar helpers](https://github.com/bryandrouet/bingo/blob/main/js/avatars.js): `js/avatars.js`

### Bingo workflows

- [Create and edit](https://github.com/bryandrouet/bingo/blob/main/js/create.js): `js/create.js`
- [Play grid](https://github.com/bryandrouet/bingo/blob/main/js/play.js): `js/play.js`
- [Category styling](https://github.com/bryandrouet/bingo/blob/main/js/categories.js): `js/categories.js`
- [Bingo data access](https://github.com/bryandrouet/bingo/blob/main/js/bingos.js): `js/bingos.js`

### Shared UI and state

- [Current session](https://github.com/bryandrouet/bingo/blob/main/js/session.js): `js/session.js`
- [UI utilities](https://github.com/bryandrouet/bingo/blob/main/js/ui.js): `js/ui.js`
- [View and draft state](https://github.com/bryandrouet/bingo/blob/main/js/view-state.js): `js/view-state.js`
- [Error handling](https://github.com/bryandrouet/bingo/blob/main/js/errors.js): `js/errors.js`

### Firebase services

- [Firebase client](https://github.com/bryandrouet/bingo/blob/main/js/firebase-client.js): `js/firebase-client.js`
- **Firebase Authentication**
- **Cloud Firestore**
- **Firebase Storage**

### Other components

- **Bingo user**

## Connections

- Bingo user → App coordinator: uses
- App coordinator → Authentication: routes login (evidence: `js/app.js`)
- App coordinator → Dashboard and account: restores views (evidence: `js/app.js`)
- App coordinator → Create and edit: restores create (evidence: `js/app.js`)
- App coordinator → Play grid: restores play (evidence: `js/app.js`)
- App coordinator → Current session: sets user (evidence: `js/app.js`)
- App coordinator → UI utilities: initializes UI (evidence: `js/app.js`)
- App coordinator → View and draft state: restores state (evidence: `js/app.js`)
- App coordinator → Error handling: logs auth errors (evidence: `js/app.js`)
- Authentication → Firebase client: calls auth APIs (evidence: `js/auth.js`)
- Authentication → Current session: sets user (evidence: `js/auth.js`)
- Authentication → UI utilities: renders feedback (evidence: `js/auth.js`)
- Authentication → Category styling: builds header (evidence: `js/auth.js`)
- Authentication → Error handling: reports failures (evidence: `js/auth.js`)
- Firebase client → Firebase Authentication: uses SDK (evidence: `js/firebase-client.js`)
- Firebase client → Cloud Firestore: uses SDK (evidence: `js/firebase-client.js`)
- Firebase client → Firebase Storage: uses SDK (evidence: `js/firebase-client.js`)
- Bingo data access → Firebase client: queries data (evidence: `js/bingos.js`)
- Bingo data access → Current session: uses current user (evidence: `js/bingos.js`)
- Bingo data access → Error handling: reports failures (evidence: `js/bingos.js`)
- Dashboard and account → Bingo data access: loads bingos (evidence: `js/dashboard.js`)
- Dashboard and account → Category styling: builds registry (evidence: `js/dashboard.js`)
- Dashboard and account → Avatar helpers: renders profile image (evidence: `js/dashboard.js`)
- Dashboard and account → Firebase client: manages profile data (evidence: `js/dashboard.js`)
- Dashboard and account → UI utilities: renders views (evidence: `js/dashboard.js`)
- Create and edit → Bingo data access: loads document refs (evidence: `js/create.js`)
- Create and edit → Category styling: validates category (evidence: `js/create.js`)
- Create and edit → Firebase client: writes bingo (evidence: `js/create.js`)
- Create and edit → View and draft state: saves draft (evidence: `js/create.js`)
- Create and edit → UI utilities: renders form (evidence: `js/create.js`)
- Create and edit → Dashboard and account: returns to dashboard (evidence: `js/create.js`)
- Play grid → Bingo data access: gets document ref (evidence: `js/play.js`)
- Play grid → Firebase client: reads and saves grid (evidence: `js/play.js`)
- Play grid → Category styling: styles game (evidence: `js/play.js`)
- Play grid → Dashboard and account: returns to dashboard (evidence: `js/play.js`)
- Play grid → UI utilities: renders game (evidence: `js/play.js`)
- Play grid → View and draft state: sets view (evidence: `js/play.js`)
- Category styling → UI utilities: uses UI helpers (evidence: `js/categories.js`)
- Avatar helpers → UI utilities: uses UI helpers (evidence: `js/avatars.js`)
- Avatar helpers → Current session: uses session (evidence: `js/avatars.js`)
- Error handling → UI utilities: shows errors (evidence: `js/errors.js`)
- UI utilities → View and draft state: persists scroll (evidence: `js/ui.js`)