# negiigit/abtalks_redesign architecture

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

- Interactive diagram: https://gitdiagram.com/negiigit/abtalks_redesign
- Repository: https://github.com/negiigit/abtalks_redesign
- Video tour (about a minute): https://gitdiagram.com/negiigit/abtalks_redesign/video

## Overview

ABTalks is a mocked, mobile-first interface for a 60-day public coding challenge. A visitor explores the challenge and its tracks, then opens a dashboard to review daily progress, proof history, streaks, and achievements. From a challenge-day page, the student reviews the task, validates GitHub and optional LinkedIn URLs, and reaches a completion state; submission only changes local UI state, with no persistence or external API calls. The graph reflects documented capabilities, but some component wiring is inferred only where sampled page source shows it.

Main entry points: [`src/pages/Dashboard.jsx`](https://github.com/negiigit/abtalks_redesign/blob/main/src/pages/Dashboard.jsx) (Student dashboard), [`src/pages/ChallengeDay.jsx`](https://github.com/negiigit/abtalks_redesign/blob/main/src/pages/ChallengeDay.jsx) (Challenge day), [`src/App.jsx`](https://github.com/negiigit/abtalks_redesign/blob/main/src/App.jsx) (Route application), [`src/pages/Landing.jsx`](https://github.com/negiigit/abtalks_redesign/blob/main/src/pages/Landing.jsx) (Challenge landing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_app["Route application<br/>[App.jsx]"]
  node_landing["Challenge landing<br/>[Landing.jsx]"]
  node_root["React entry<br/>[main.jsx]"]
end

subgraph group_challenge["Challenge experience"]
  node_daypage["Challenge day<br/>[ChallengeDay.jsx]"]
  node_submission["Proof submission form<br/>[SubmissionForm.jsx]"]
  node_completion["Completion state"]
  node_empty["Edge states<br/>[EmptyState.jsx]"]
end

subgraph group_progress["Progress dashboard"]
  node_dashboard["Student dashboard<br/>[Dashboard.jsx]"]
  node_streak["Streak summary<br/>[StreakCard.jsx]"]
  node_progressbar["Challenge progress<br/>[ProgressBar.jsx]"]
  node_challengecard["Today challenge<br/>[ChallengeCard.jsx]"]
  node_daygrid["60-day grid<br/>[DayGrid.jsx]"]
  node_timeline["Proof timeline<br/>[ProofTimeline.jsx]"]
  node_achievement["Milestones<br/>[Achievement.jsx]"]
end

subgraph group_shared["Shared UI and data"]
  node_data["Mock challenge data<br/>[mockData.js]"]
  node_header["Mobile header<br/>[MobileHeader.jsx]"]
  node_navbar["Landing navigation<br/>[Navbar.jsx]"]
  node_button["Action button<br/>[Button.jsx]"]
end

node_visitor(("Visitor / student"))

node_visitor -->|"opens routes"| node_app
node_root -->|"renders"| node_app
node_app -->|"routes to"| node_landing
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_daypage
node_landing -->|"reads tracks, stats, days"| node_data
node_landing -->|"renders"| node_navbar
node_landing -->|"renders"| node_button
node_dashboard -->|"reads student, days, proofs, awards"| node_data
node_dashboard -->|"renders"| node_header
node_dashboard -->|"renders"| node_streak
node_dashboard -->|"renders"| node_progressbar
node_dashboard -->|"renders"| node_challengecard
node_dashboard -->|"renders"| node_daygrid
node_dashboard -->|"renders"| node_timeline
node_dashboard -->|"renders"| node_achievement
node_challengecard -->|"links to day"| node_daypage
node_daygrid -->|"links to day"| node_daypage
node_timeline -->|"links to in-progress day"| node_daypage
node_daypage -->|"reads challenge and student"| node_data
node_daypage -->|"renders"| node_header
node_daypage -->|"renders"| node_submission
node_daypage -->|"renders first-day state"| node_empty
node_daypage -->|"renders after submission"| node_completion
node_submission -->|"calls submit callback"| node_daypage
node_completion -->|"links back"| node_dashboard

click node_app "https://github.com/negiigit/abtalks_redesign/blob/main/src/App.jsx"
click node_landing "https://github.com/negiigit/abtalks_redesign/blob/main/src/pages/Landing.jsx"
click node_dashboard "https://github.com/negiigit/abtalks_redesign/blob/main/src/pages/Dashboard.jsx"
click node_daypage "https://github.com/negiigit/abtalks_redesign/blob/main/src/pages/ChallengeDay.jsx"
click node_submission "https://github.com/negiigit/abtalks_redesign/blob/main/src/components/SubmissionForm.jsx"
click node_completion "https://github.com/negiigit/abtalks_redesign/blob/main/src/components/CompletionState.jsx"
click node_empty "https://github.com/negiigit/abtalks_redesign/blob/main/src/components/EmptyState.jsx"
click node_streak "https://github.com/negiigit/abtalks_redesign/blob/main/src/components/StreakCard.jsx"
click node_progressbar "https://github.com/negiigit/abtalks_redesign/blob/main/src/components/ProgressBar.jsx"
click node_challengecard "https://github.com/negiigit/abtalks_redesign/blob/main/src/components/ChallengeCard.jsx"
click node_daygrid "https://github.com/negiigit/abtalks_redesign/blob/main/src/components/DayGrid.jsx"
click node_timeline "https://github.com/negiigit/abtalks_redesign/blob/main/src/components/ProofTimeline.jsx"
click node_achievement "https://github.com/negiigit/abtalks_redesign/blob/main/src/components/Achievement.jsx"
click node_data "https://github.com/negiigit/abtalks_redesign/blob/main/src/data/mockData.js"
click node_header "https://github.com/negiigit/abtalks_redesign/blob/main/src/components/MobileHeader.jsx"
click node_navbar "https://github.com/negiigit/abtalks_redesign/blob/main/src/components/Navbar.jsx"
click node_button "https://github.com/negiigit/abtalks_redesign/blob/main/src/components/Button.jsx"
click node_root "https://github.com/negiigit/abtalks_redesign/blob/main/src/main.jsx"

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_landing,node_root toneBlue
class node_daypage,node_submission,node_completion,node_empty toneAmber
class node_dashboard,node_streak,node_progressbar,node_challengecard,node_daygrid,node_timeline,node_achievement toneMint
class node_data,node_header,node_navbar,node_button toneRose
class node_visitor toneIndigo
```

## Components

### App navigation

- [Route application](https://github.com/negiigit/abtalks_redesign/blob/main/src/App.jsx): `src/App.jsx`
- [Challenge landing](https://github.com/negiigit/abtalks_redesign/blob/main/src/pages/Landing.jsx): `src/pages/Landing.jsx`
- [React entry](https://github.com/negiigit/abtalks_redesign/blob/main/src/main.jsx): `src/main.jsx`

### Challenge experience

- [Challenge day](https://github.com/negiigit/abtalks_redesign/blob/main/src/pages/ChallengeDay.jsx): `src/pages/ChallengeDay.jsx`
- [Proof submission form](https://github.com/negiigit/abtalks_redesign/blob/main/src/components/SubmissionForm.jsx): `src/components/SubmissionForm.jsx`
- [Completion state](https://github.com/negiigit/abtalks_redesign/blob/main/src/components/CompletionState.jsx): `src/components/CompletionState.jsx`
- [Edge states](https://github.com/negiigit/abtalks_redesign/blob/main/src/components/EmptyState.jsx): `src/components/EmptyState.jsx`

### Progress dashboard

- [Student dashboard](https://github.com/negiigit/abtalks_redesign/blob/main/src/pages/Dashboard.jsx): `src/pages/Dashboard.jsx`
- [Streak summary](https://github.com/negiigit/abtalks_redesign/blob/main/src/components/StreakCard.jsx): `src/components/StreakCard.jsx`
- [Challenge progress](https://github.com/negiigit/abtalks_redesign/blob/main/src/components/ProgressBar.jsx): `src/components/ProgressBar.jsx`
- [Today challenge](https://github.com/negiigit/abtalks_redesign/blob/main/src/components/ChallengeCard.jsx): `src/components/ChallengeCard.jsx`
- [60-day grid](https://github.com/negiigit/abtalks_redesign/blob/main/src/components/DayGrid.jsx): `src/components/DayGrid.jsx`
- [Proof timeline](https://github.com/negiigit/abtalks_redesign/blob/main/src/components/ProofTimeline.jsx): `src/components/ProofTimeline.jsx`
- [Milestones](https://github.com/negiigit/abtalks_redesign/blob/main/src/components/Achievement.jsx): `src/components/Achievement.jsx`

### Shared UI and data

- [Mock challenge data](https://github.com/negiigit/abtalks_redesign/blob/main/src/data/mockData.js): `src/data/mockData.js`
- [Mobile header](https://github.com/negiigit/abtalks_redesign/blob/main/src/components/MobileHeader.jsx): `src/components/MobileHeader.jsx`
- [Landing navigation](https://github.com/negiigit/abtalks_redesign/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Action button](https://github.com/negiigit/abtalks_redesign/blob/main/src/components/Button.jsx): `src/components/Button.jsx`

### Other components

- **Visitor / student**

## Connections

- Visitor / student → Route application: opens routes
- React entry → Route application: renders
- Route application → Challenge landing: routes to
- Route application → Student dashboard: routes to
- Route application → Challenge day: routes to
- Challenge landing → Mock challenge data: reads tracks, stats, days
- Challenge landing → Landing navigation: renders
- Challenge landing → Action button: renders
- Student dashboard → Mock challenge data: reads student, days, proofs, awards
- Student dashboard → Mobile header: renders
- Student dashboard → Streak summary: renders
- Student dashboard → Challenge progress: renders
- Student dashboard → Today challenge: renders
- Student dashboard → 60-day grid: renders
- Student dashboard → Proof timeline: renders
- Student dashboard → Milestones: renders
- Today challenge → Challenge day: links to day
- 60-day grid → Challenge day: links to day
- Proof timeline → Challenge day: links to in-progress day
- Challenge day → Mock challenge data: reads challenge and student
- Challenge day → Mobile header: renders
- Challenge day → Proof submission form: renders
- Challenge day → Edge states: renders first-day state
- Challenge day → Completion state: renders after submission
- Proof submission form → Challenge day: calls submit callback
- Completion state → Student dashboard: links back