# harshnirmal-19/prompts-pirat3s architecture

> Architecture diagram of the GitHub repository harshnirmal-19/prompts-pirat3s, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/harshnirmal-19/prompts-pirat3s
- Repository: https://github.com/harshnirmal-19/prompts-pirat3s

## Overview

#### Purpose and Entry Points
Prompts-Pirat3s is a mobile-first frontend redesign of the ABTalks 60-day coding challenge. It is a Vite-based client application with multiple standalone HTML entry pages rather than a single routed SPA: `index.html`, `dashboard.html`, `ChallengeDay.html`, `day12.html`, and `profile.html`. Development serving is configured through `vite.config.js`; `serve.js` may provide an alternate local server path.

#### Application Bootstrap
Each page is paired with a page-specific JavaScript module under `src/`, while shared/global initialization likely begins at `src/main.js`. The main landing experience is rooted in `index.html` with global styling in `src/style.css` and possibly the legacy/root-level `styles.css`.

#### Dashboard Stage
The dashboard presents challenge-level progress and navigation into daily content. Its UI behavior and styles are isolated in `src/dashboard.js` and `src/dashboard.css`, with `dashboard.html` acting as the document entry point. This separation suggests independently loaded page bundles and DOM-bound scripting rather than centralized client-side routing.

#### Challenge-Day Experience
Challenge content is represented by dedicated day-oriented pages. `ChallengeDay.html` is backed by `src/ChallengeDay.js` and `src/ChallengeDay.css`, likely serving a reusable/general challenge-day view. `day12.html`, `src/day12.js`, and `src/day12.css` provide a specialized implementation for Day 12, indicating that individual days can diverge in content or interactions.

#### Profile Experience
User/profile presentation is a separate page boundary: `profile.html`, `src/profile.js`, and `src/profile.css`. It is architecturally independent from the dashboard and day pages, so cross-page state must be carried through browser storage, URL data, static content, or repeated client-side logic; no backend integration is visible in the repository tree.

#### Shared Client Utilities and Assets
`src/counter.js` is a shared interactive utility, likely used by one or more page modules. Static visual resources belong under `src/assets`, allowing Vite to process imported assets during bundling. Page-specific CSS modules coexist with shared styling, creating a layered styling model: common styles in `src/style.css`, page ownership in each corresponding CSS file.

#### Runtime and Infrastructure Boundaries
The runtime is browser JavaScript/CSS/HTML, built and served with Vite as declared by `package.json`, `package-lock.json`, and `vite.config.js`. There are no visible API clients, server-side application directories, database schemas, or cloud/infrastructure manifests. The functional boundary is therefore static frontend delivery: HTML pages load their associated source modules, manipulate local DOM/UI state, and render challenge/profile/dashboard experiences entirely in the browser.

Main entry points: [`vite.config.js`](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/vite.config.js) (Vite), [`src/main.js`](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/main.js) (Shared Initialization), [`src/dashboard.js`](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/dashboard.js) (Dashboard UI), [`src/ChallengeDay.js`](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/ChallengeDay.js) (Challenge Day UI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entries["HTML Entry Pages"]
  node_landing_html["Landing Page<br/>HTML entry<br/>[index.html]"]
  node_dashboard_html["Dashboard Page<br/>HTML entry<br/>[dashboard.html]"]
  node_challenge_html["Challenge Day Page<br/>HTML entry<br/>[ChallengeDay.html]"]
  node_day12_html["Day 12 Page<br/>HTML entry<br/>[day12.html]"]
  node_profile_html["Profile Page<br/>HTML entry<br/>[profile.html]"]
end

subgraph group_client["Browser Client"]
  node_main["Shared Initialization<br/>client module<br/>[main.js]"]
  node_dashboard["Dashboard UI<br/>page module<br/>[dashboard.js]"]
  node_challenge_day["Challenge Day UI<br/>page module<br/>[ChallengeDay.js]"]
  node_day12["Day 12 UI<br/>page module<br/>[day12.js]"]
  node_profile["Profile UI<br/>page module<br/>[profile.js]"]
  node_counter["Counter Utility<br/>shared utility<br/>[counter.js]"]
  node_shared_styles["Global Styles<br/>shared CSS<br/>[style.css]"]
  node_dashboard_styles["Dashboard Styles<br/>page CSS<br/>[dashboard.css]"]
  node_challenge_styles["Challenge Day Styles<br/>page CSS<br/>[ChallengeDay.css]"]
  node_day12_styles["Day 12 Styles<br/>page CSS<br/>[day12.css]"]
  node_profile_styles["Profile Styles<br/>page CSS<br/>[profile.css]"]
  node_assets["Visual Assets<br/>asset directory"]
end

subgraph group_tooling["Build &amp; Serving"]
  node_vite{{"Vite<br/>build tool<br/>[vite.config.js]"}}
  node_alternate_server["Alternate Server<br/>local server<br/>[serve.js]"]
end

node_vite -->|"serves/builds"| node_landing_html
node_vite -->|"serves/builds"| node_dashboard_html
node_vite -->|"serves/builds"| node_challenge_html
node_vite -->|"serves/builds"| node_day12_html
node_vite -->|"serves/builds"| node_profile_html
node_landing_html -->|"loads"| node_main
node_dashboard_html -->|"loads"| node_dashboard
node_challenge_html -->|"loads"| node_challenge_day
node_day12_html -->|"loads"| node_day12
node_profile_html -->|"loads"| node_profile
node_main -->|"uses"| node_shared_styles
node_dashboard -->|"uses"| node_dashboard_styles
node_challenge_day -->|"uses"| node_challenge_styles
node_day12 -->|"uses"| node_day12_styles
node_profile -->|"uses"| node_profile_styles
node_dashboard -.->|"navigates to"| node_challenge_day
node_dashboard -.->|"navigates to"| node_day12
node_main -.->|"may use"| node_counter
node_main -.->|"imports"| node_assets

click node_vite "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/vite.config.js"
click node_alternate_server "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/serve.js"
click node_landing_html "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/index.html"
click node_dashboard_html "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/dashboard.html"
click node_challenge_html "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/ChallengeDay.html"
click node_day12_html "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/day12.html"
click node_profile_html "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/profile.html"
click node_main "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/main.js"
click node_dashboard "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/dashboard.js"
click node_challenge_day "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/ChallengeDay.js"
click node_day12 "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/day12.js"
click node_profile "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/profile.js"
click node_counter "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/counter.js"
click node_shared_styles "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/style.css"
click node_dashboard_styles "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/dashboard.css"
click node_challenge_styles "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/ChallengeDay.css"
click node_day12_styles "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/day12.css"
click node_profile_styles "https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/profile.css"
click node_assets "https://github.com/harshnirmal-19/prompts-pirat3s/tree/main/src/assets"

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_landing_html,node_dashboard_html,node_challenge_html,node_day12_html,node_profile_html toneBlue
class node_main,node_dashboard,node_challenge_day,node_day12,node_profile,node_counter,node_shared_styles,node_dashboard_styles,node_challenge_styles,node_day12_styles,node_profile_styles,node_assets toneAmber
class node_vite,node_alternate_server toneMint
```

## Components

### HTML Entry Pages

Standalone documents define page boundaries.

- [Landing Page](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/index.html): HTML entry · `index.html`
- [Dashboard Page](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/dashboard.html): HTML entry · `dashboard.html`
- [Challenge Day Page](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/ChallengeDay.html): HTML entry · `ChallengeDay.html`
- [Day 12 Page](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/day12.html): HTML entry · `day12.html`
- [Profile Page](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/profile.html): HTML entry · `profile.html`

### Browser Client

- [Shared Initialization](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/main.js): client module · `src/main.js`
- [Dashboard UI](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/dashboard.js): page module · Shows challenge progress and daily navigation. · `src/dashboard.js`
- [Challenge Day UI](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/ChallengeDay.js): page module · General reusable day experience. · `src/ChallengeDay.js`
- [Day 12 UI](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/day12.js): page module · Specialized day implementation. · `src/day12.js`
- [Profile UI](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/profile.js): page module · `src/profile.js`
- [Counter Utility](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/counter.js): shared utility · `src/counter.js`
- [Global Styles](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/style.css): shared CSS · `src/style.css`
- [Dashboard Styles](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/dashboard.css): page CSS · `src/dashboard.css`
- [Challenge Day Styles](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/ChallengeDay.css): page CSS · `src/ChallengeDay.css`
- [Day 12 Styles](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/day12.css): page CSS · `src/day12.css`
- [Profile Styles](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/src/profile.css): page CSS · `src/profile.css`
- [Visual Assets](https://github.com/harshnirmal-19/prompts-pirat3s/tree/main/src/assets): asset directory · Vite-processed imported static resources. · `src/assets`

### Build & Serving

- [Vite](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/vite.config.js): build tool · Builds and serves the multi-page client. · `vite.config.js`
- [Alternate Server](https://github.com/harshnirmal-19/prompts-pirat3s/blob/main/serve.js): local server · `serve.js`

## Connections

- Vite → Landing Page: serves/builds
- Vite → Dashboard Page: serves/builds
- Vite → Challenge Day Page: serves/builds
- Vite → Day 12 Page: serves/builds
- Vite → Profile Page: serves/builds
- Landing Page → Shared Initialization: loads
- Dashboard Page → Dashboard UI: loads
- Challenge Day Page → Challenge Day UI: loads
- Day 12 Page → Day 12 UI: loads
- Profile Page → Profile UI: loads
- Shared Initialization → Global Styles: uses
- Dashboard UI → Dashboard Styles: uses
- Challenge Day UI → Challenge Day Styles: uses
- Day 12 UI → Day 12 Styles: uses
- Profile UI → Profile Styles: uses
- Dashboard UI → Challenge Day UI: navigates to
- Dashboard UI → Day 12 UI: navigates to
- Shared Initialization → Counter Utility: may use
- Shared Initialization → Visual Assets: imports