# nileshdhakad18/google-cloud-study-jam architecture

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

- Interactive diagram: https://gitdiagram.com/nileshdhakad18/google-cloud-study-jam
- Repository: https://github.com/nileshdhakad18/google-cloud-study-jam

## Overview

#### Purpose and Runtime

This is a Next.js web application for publishing a Google Cloud Study Jams participant leaderboard and individual profile badges. It runs locally via `npm run dev` on port 3000 and uses the Next.js App Router. Styling is global/Tailwind-oriented.

Core runtime files: `package.json`, `next.config.js`, `src/app/layout.js`.

#### Application Entry Points

The root leaderboard page is implemented at `src/app/page.js`; shared document layout and global styles are established by `src/app/layout.js` and `src/app/globals.css`.

A separate profile-badge route exists at `src/app/profilebadge/page.js`, likely serving a participant-focused badge generation/view flow.

#### Static Data Boundary

Leaderboard data is stored as a versioned static JSON asset at `public/data.json`. Updating the leaderboard is an offline content operation: source CSV is converted to JSON and its contents replace this file.

This creates no required database, API, authentication, or backend service boundary. Browser-side application code consumes the packaged public data.

Relevant paths: `public/data.json`, `convert.js`, `README.md`.

#### Leaderboard Presentation Pipeline

The root page coordinates leaderboard display components. Table rendering is decomposed into a table shell, body, and row layer, separating collection-level layout from per-participant presentation.

Primary component paths: `src/components/Table.Index.js`, `src/components/TableBody.js`, `src/components/TableRow.js`.

Expected flow: static participant records → page-level loading/state → table body iteration → individual ranked rows.

#### Participant Progress Visualization

`Speedometer.js` is the dedicated visual progress/status component, likely used to turn numeric Study Jam progress into a graphical indicator. This keeps progress visualization separate from tabular ranking logic.

Relevant paths: `src/components/Speedometer.js`, `src/components/TableRow.js`, `src/app/page.js`.

#### Badge and Download Flow

Badge rendering is isolated from the leaderboard in `BadgeComponent.js`; `DownloadBadge.js` handles exporting or downloading the rendered badge. The profile-badge route provides the route-level surface for this feature.

Relevant paths: `src/app/profilebadge/page.js`, `src/components/BadgeComponent.js`, `src/components/DownloadBadge.js`.

#### Data Ingestion / Upload Boundary

`Uploadpage.js` represents a UI-level upload or data-import capability, while `convert.js` is the repository’s standalone conversion-related script. These are distinct from the canonical production data path, which remains `public/data.json`.

Relevant paths: `src/components/Uploadpage.js`, `convert.js`, `public/data.json`.

Main entry points: [`src/app/layout.js`](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/app/layout.js) (Root layout), [`src/app/profilebadge/page.js`](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/app/profilebadge/page.js) (Profile badge page), [`src/app/page.js`](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/app/page.js) (Leaderboard page), [`public/data.json`](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/public/data.json) (Leaderboard data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Next.js App"]
  node_next_runtime{{"Next.js runtime<br/>application runtime<br/>[package.json]"}}
  node_app_layout["Root layout<br/>App Router layout<br/>[layout.js]"]
  node_global_styles["Global styles<br/>Tailwind/global CSS<br/>[globals.css]"]
end

subgraph group_leaderboard["Leaderboard"]
  node_leaderboard_page["Leaderboard page<br/>App Router page<br/>[page.js]"]
  node_table_shell["Table shell<br/>leaderboard component<br/>[Table.Index.js]"]
  node_table_body["Table body<br/>collection renderer<br/>[TableBody.js]"]
  node_table_row["Participant row<br/>participant renderer<br/>[TableRow.js]"]
  node_speedometer["Progress visualizer<br/>progress component<br/>[Speedometer.js]"]
end

subgraph group_badges["Badge Flow"]
  node_profile_badge_page["Profile badge page<br/>App Router page<br/>[page.js]"]
  node_badge_component["Badge renderer<br/>badge component<br/>[BadgeComponent.js]"]
  node_download_badge["Badge download<br/>export component<br/>[DownloadBadge.js]"]
end

subgraph group_content["Content Pipeline"]
  node_participant_data[("Leaderboard data<br/>static JSON asset<br/>[data.json]")]
  node_upload_page["Upload/import UI<br/>import component<br/>[Uploadpage.js]"]
  node_converter{{"CSV converter<br/>standalone script<br/>[convert.js]"}}
  node_readme["Update instructions<br/>documentation<br/>[README.md]"]
end

node_next_runtime -->|"boots"| node_app_layout
node_app_layout -->|"loads"| node_global_styles
node_app_layout -->|"hosts /"| node_leaderboard_page
node_app_layout -->|"hosts /profilebadge"| node_profile_badge_page
node_participant_data -->|"participant records"| node_leaderboard_page
node_leaderboard_page -->|"renders"| node_table_shell
node_table_shell -->|"contains"| node_table_body
node_table_body -->|"maps records to"| node_table_row
node_table_row -->|"shows progress with"| node_speedometer
node_profile_badge_page -->|"renders"| node_badge_component
node_profile_badge_page -->|"enables export"| node_download_badge
node_download_badge -->|"downloads"| node_badge_component
node_converter -->|"replaces offline"| node_participant_data
node_upload_page -.->|"imports toward"| node_participant_data
node_readme -.->|"documents"| node_converter

click node_next_runtime "https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/package.json"
click node_app_layout "https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/app/layout.js"
click node_global_styles "https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/app/globals.css"
click node_leaderboard_page "https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/app/page.js"
click node_table_shell "https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/components/Table.Index.js"
click node_table_body "https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/components/TableBody.js"
click node_table_row "https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/components/TableRow.js"
click node_speedometer "https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/components/Speedometer.js"
click node_profile_badge_page "https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/app/profilebadge/page.js"
click node_badge_component "https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/components/BadgeComponent.js"
click node_download_badge "https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/components/DownloadBadge.js"
click node_participant_data "https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/public/data.json"
click node_upload_page "https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/components/Uploadpage.js"
click node_converter "https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/convert.js"
click node_readme "https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/README.md"

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_next_runtime,node_app_layout,node_global_styles toneBlue
class node_leaderboard_page,node_table_shell,node_table_body,node_table_row,node_speedometer toneAmber
class node_profile_badge_page,node_badge_component,node_download_badge toneMint
class node_participant_data,node_upload_page,node_converter,node_readme toneRose
```

## Components

### Next.js App

- [Next.js runtime](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/package.json): application runtime · App Router application served locally on port 3000. · `package.json`
- [Root layout](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/app/layout.js): App Router layout · Establishes shared document structure and global styling. · `src/app/layout.js`
- [Global styles](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/app/globals.css): Tailwind/global CSS · `src/app/globals.css`

### Leaderboard

- [Leaderboard page](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/app/page.js): App Router page · Root route coordinating leaderboard state and presentation. · `src/app/page.js`
- [Table shell](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/components/Table.Index.js): leaderboard component · `src/components/Table.Index.js`
- [Table body](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/components/TableBody.js): collection renderer · Iterates participant records into ranked rows. · `src/components/TableBody.js`
- [Participant row](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/components/TableRow.js): participant renderer · `src/components/TableRow.js`
- [Progress visualizer](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/components/Speedometer.js): progress component · Renders numeric Study Jam progress as a graphical indicator. · `src/components/Speedometer.js`

### Badge Flow

- [Profile badge page](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/app/profilebadge/page.js): App Router page · Route-level surface for participant badge generation or viewing. · `src/app/profilebadge/page.js`
- [Badge renderer](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/components/BadgeComponent.js): badge component · `src/components/BadgeComponent.js`
- [Badge download](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/components/DownloadBadge.js): export component · Exports or downloads the rendered badge. · `src/components/DownloadBadge.js`

### Content Pipeline

- [Leaderboard data](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/public/data.json): static JSON asset · Canonical versioned participant dataset packaged with the application. · `public/data.json`
- [Upload/import UI](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/src/components/Uploadpage.js): import component · Optional UI-level data import capability outside the canonical data path. · `src/components/Uploadpage.js`
- [CSV converter](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/convert.js): standalone script · Offline conversion step that produces replacement leaderboard JSON. · `convert.js`
- [Update instructions](https://github.com/nileshdhakad18/google-cloud-study-jam/blob/main/README.md): documentation · Documents the offline CSV-to-JSON content update workflow. · `README.md`

## Connections

- Next.js runtime → Root layout: boots
- Root layout → Global styles: loads
- Root layout → Leaderboard page: hosts /
- Root layout → Profile badge page: hosts /profilebadge
- Leaderboard data → Leaderboard page: participant records
- Leaderboard page → Table shell: renders
- Table shell → Table body: contains
- Table body → Participant row: maps records to
- Participant row → Progress visualizer: shows progress with
- Profile badge page → Badge renderer: renders
- Profile badge page → Badge download: enables export
- Badge download → Badge renderer: downloads
- CSV converter → Leaderboard data: replaces offline
- Upload/import UI → Leaderboard data: imports toward · Distinct from the canonical production update workflow.
- Update instructions → CSV converter: documents