# bellamkondaambicakiranmayee/scratch_daa architecture

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

- Interactive diagram: https://gitdiagram.com/bellamkondaambicakiranmayee/scratch_daa
- Repository: https://github.com/bellamkondaambicakiranmayee/scratch_daa

## Overview

Scratch_Daa is a React learning app with account signup/login, protected learning routes, syllabus browsing, quiz and coding-practice areas. The visible workflow is user → account access → protected learning pages, with topic and subtopic content rendered from syllabus data and coding exercises navigated by topic and question. The sampled code confirms authentication requests, local token/name storage, route protection, and syllabus/coding-data reads. Quiz-related paths exist in the tree, but their implementation and data wiring were not sampled.

Main entry points: [`src/components/ProtectedRoute.jsx`](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/components/ProtectedRoute.jsx) (Route guard), [`src/App.jsx`](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/App.jsx) (App router), [`src/pages/Login.jsx`](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/Login.jsx) (Login), [`src/pages/Coding.jsx`](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/Coding.jsx) (Coding practice)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access and shell"]
  node_app["App router<br/>[App.jsx]"]
  node_signup["Signup<br/>[Signup.jsx]"]
  node_login["Login<br/>[Login.jsx]"]
  node_guard["Route guard<br/>[ProtectedRoute.jsx]"]
  node_nav["Navigation bar<br/>[Navbar.jsx]"]
  node_sidebar["Topic sidebar<br/>[Sidebar.jsx]"]
end

subgraph group_learning["Syllabus learning"]
  node_home["Home page<br/>[Home.jsx]"]
  node_topics["Topic index<br/>[Topics.jsx]"]
  node_topicdetail["Topic detail<br/>[TopicDetails.jsx]"]
  node_subdetail["Subtopic detail"]
end

subgraph group_practice["Practice areas"]
  node_quiz["Quiz experience<br/>[QuizPage.jsx]"]
  node_quizindex["Quiz page<br/>[Quiz.jsx]"]
  node_codingtopics["Coding topics<br/>[CodingTopics.jsx]"]
  node_coding["Coding practice<br/>[Coding.jsx]"]
end

subgraph group_content["Learning content"]
  node_syllabus["Syllabus content<br/>[syllabus.json]"]
  node_quizdata["Quiz content<br/>[quiz.json]"]
  node_codingdata["Coding questions<br/>[codingQuestions.js]"]
end

node_learner(("Learner"))
node_authapi{{"Auth API"}}

node_learner -->|"opens"| node_app
node_app -->|"routes"| node_signup
node_app -->|"routes"| node_login
node_signup -->|"submits signup"| node_authapi
node_login -->|"submits login"| node_authapi
node_login -->|"navigates after login"| node_app
node_app -->|"protects routes"| node_guard
node_guard -->|"allows access"| node_home
node_guard -->|"allows access"| node_topics
node_guard -->|"allows access"| node_topicdetail
node_guard -->|"allows access"| node_subdetail
node_guard -->|"allows access"| node_quiz
node_guard -->|"allows access"| node_codingtopics
node_guard -->|"allows access"| node_coding
node_app -->|"renders shell"| node_nav
node_app -->|"renders shell"| node_sidebar
node_sidebar -->|"reads topics"| node_syllabus
node_topicdetail -->|"reads topic"| node_syllabus
node_subdetail -->|"reads subtopic"| node_syllabus
node_coding -->|"reads questions"| node_codingdata
node_coding -->|"navigates topics"| node_app

click node_app "https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/App.jsx"
click node_signup "https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/Signup.jsx"
click node_login "https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/Login.jsx"
click node_guard "https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/components/ProtectedRoute.jsx"
click node_nav "https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/components/Navbar.jsx"
click node_sidebar "https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/components/Sidebar.jsx"
click node_home "https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/Home.jsx"
click node_topics "https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/Topics.jsx"
click node_topicdetail "https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/TopicDetails.jsx"
click node_subdetail "https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/SubtopicDetails.jsx"
click node_syllabus "https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/data/syllabus.json"
click node_quiz "https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/QuizPage.jsx"
click node_quizindex "https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/Quiz.jsx"
click node_quizdata "https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/data/quiz.json"
click node_codingtopics "https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/CodingTopics.jsx"
click node_coding "https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/Coding.jsx"
click node_codingdata "https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/data/codingQuestions.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_signup,node_login,node_guard,node_nav,node_sidebar toneBlue
class node_home,node_topics,node_topicdetail,node_subdetail toneAmber
class node_quiz,node_quizindex,node_codingtopics,node_coding,node_authapi toneMint
class node_syllabus,node_quizdata,node_codingdata toneRose
class node_learner toneIndigo
```

## Components

### Access and shell

- [App router](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/App.jsx): `src/App.jsx`
- [Signup](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/Signup.jsx): `src/pages/Signup.jsx`
- [Login](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Route guard](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/components/ProtectedRoute.jsx): `src/components/ProtectedRoute.jsx`
- [Navigation bar](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Topic sidebar](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/components/Sidebar.jsx): `src/components/Sidebar.jsx`

### Syllabus learning

- [Home page](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Topic index](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/Topics.jsx): `src/pages/Topics.jsx`
- [Topic detail](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/TopicDetails.jsx): `src/pages/TopicDetails.jsx`
- [Subtopic detail](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/SubtopicDetails.jsx): `src/pages/SubtopicDetails.jsx`

### Practice areas

- [Quiz experience](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/QuizPage.jsx): `src/pages/QuizPage.jsx`
- [Quiz page](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/Quiz.jsx): `src/pages/Quiz.jsx`
- [Coding topics](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/CodingTopics.jsx): `src/pages/CodingTopics.jsx`
- [Coding practice](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/pages/Coding.jsx): `src/pages/Coding.jsx`

### Learning content

- [Syllabus content](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/data/syllabus.json): `src/data/syllabus.json`
- [Quiz content](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/data/quiz.json): `src/data/quiz.json`
- [Coding questions](https://github.com/bellamkondaambicakiranmayee/scratch_daa/blob/main/src/data/codingQuestions.js): `src/data/codingQuestions.js`

### Other components

- **Learner**
- **Auth API**

## Connections

- Learner → App router: opens
- App router → Signup: routes
- App router → Login: routes
- Signup → Auth API: submits signup
- Login → Auth API: submits login
- Login → App router: navigates after login
- App router → Route guard: protects routes
- Route guard → Home page: allows access
- Route guard → Topic index: allows access
- Route guard → Topic detail: allows access
- Route guard → Subtopic detail: allows access
- Route guard → Quiz experience: allows access
- Route guard → Coding topics: allows access
- Route guard → Coding practice: allows access
- App router → Navigation bar: renders shell
- App router → Topic sidebar: renders shell
- Topic sidebar → Syllabus content: reads topics
- Topic detail → Syllabus content: reads topic
- Subtopic detail → Syllabus content: reads subtopic
- Coding practice → Coding questions: reads questions
- Coding practice → App router: navigates topics