# laiquanghai2k6/mxh architecture

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

- Interactive diagram: https://gitdiagram.com/laiquanghai2k6/mxh
- Repository: https://github.com/laiquanghai2k6/mxh

## Overview

Projectz is a Next.js community app with a discussion feed and a course-creation and quiz-taking flow. Visitors browse posts and courses; signed-in users can create posts, interact with posts, build courses, and edit profile details. The sampled pages read and write Firestore directly, while course and profile image uploads use Firebase Storage. Authentication is exposed through Firebase Auth and modal UI. The README describes only the Next.js starter, so feature scope is inferred from the sampled source and tree; unsampled modal behavior is not assumed beyond its role implied by its path.

Main entry points: [`src/pages/index.tsx`](https://github.com/laiquanghai2k6/mxh/blob/main/src/pages/index.tsx) (Home feed), [`src/pages/postid/[id].tsx`](https://github.com/laiquanghai2k6/mxh/blob/main/src/pages/postid/%5Bid%5D.tsx) (Post detail), [`src/pages/courseid/[id].tsx`](https://github.com/laiquanghai2k6/mxh/blob/main/src/pages/courseid/%5Bid%5D.tsx) (Course quiz), [`src/components/Modal/Auth/AuthModal.tsx`](https://github.com/laiquanghai2k6/mxh/blob/main/src/components/Modal/Auth/AuthModal.tsx) (Auth modal)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Pages and layout"]
  node_home["Home feed<br/>[index.tsx]"]
  node_layout["App layout<br/>[Layout.tsx]"]
  node_navbar["Navigation bar<br/>[Navbar.tsx]"]
end

subgraph group_community["Community"]
  node_postpage["Post detail<br/>[&#91;id&#93;.tsx]"]
  node_postmodal["Post creation<br/>[PostModal.tsx]"]
end

subgraph group_courses["Courses"]
  node_coursemodal["Course builder<br/>[CourseModal.tsx]"]
  node_coursepage["Course quiz<br/>[&#91;id&#93;.tsx]"]
  node_finishmodal["Quiz results<br/>[FinishModal.tsx]"]
end

subgraph group_identity["Identity and auth"]
  node_profilemodal["Profile details<br/>[ProfileModal.tsx]"]
  node_authbutton["Auth controls<br/>[AuthButton.tsx]"]
  node_authmodal["Auth modal<br/>[AuthModal.tsx]"]
  node_authinput["Credential forms<br/>[AuthInput.tsx]"]
  node_authstate["Auth modal state<br/>[authModalAtom.ts]"]
end

subgraph group_firebase["Firebase services"]
  node_firebaseclient["Firebase client<br/>[clientApp.ts]"]
  node_firestore[("Firestore")]
  node_storage[("Firebase Storage")]
  node_firebaseauth["Firebase Auth"]
end

node_visitor(("Visitor"))

node_visitor -->|"visits"| node_layout
node_layout -->|"renders"| node_home
node_layout -->|"renders"| node_navbar
node_home -->|"reads posts and courses"| node_firestore
node_home -->|"checks sign-in"| node_firebaseauth
node_home -->|"opens"| node_postmodal
node_home -->|"opens"| node_coursemodal
node_home -->|"links to details"| node_postpage
node_postpage -->|"reads and updates posts"| node_firestore
node_postpage -->|"checks sign-in"| node_firebaseauth
node_postpage -->|"shows profile"| node_profilemodal
node_coursemodal -->|"reads and writes courses"| node_firestore
node_coursemodal -->|"uploads course images"| node_storage
node_coursepage -->|"reads course and updates views"| node_firestore
node_coursepage -->|"checks sign-in"| node_firebaseauth
node_coursepage -->|"opens results"| node_finishmodal
node_profilemodal -->|"reads and updates profiles"| node_firestore
node_profilemodal -->|"uploads profile image"| node_storage
node_authbutton -->|"sets modal view"| node_authstate
node_authmodal -->|"reads modal state"| node_authstate
node_authmodal -->|"renders credentials"| node_authinput
node_authmodal -->|"observes session"| node_firebaseauth
node_authinput -->|"authenticates"| node_firebaseauth
node_firebaseclient -->|"initializes"| node_firestore
node_firebaseclient -->|"initializes"| node_storage
node_firebaseclient -->|"initializes"| node_firebaseauth

click node_home "https://github.com/laiquanghai2k6/mxh/blob/main/src/pages/index.tsx"
click node_layout "https://github.com/laiquanghai2k6/mxh/blob/main/src/components/Layout/Layout.tsx"
click node_navbar "https://github.com/laiquanghai2k6/mxh/blob/main/src/components/NavBar/Navbar.tsx"
click node_postpage "https://github.com/laiquanghai2k6/mxh/blob/main/src/pages/postid/%5Bid%5D.tsx"
click node_postmodal "https://github.com/laiquanghai2k6/mxh/blob/main/src/components/Modal/Post/PostModal.tsx"
click node_profilemodal "https://github.com/laiquanghai2k6/mxh/blob/main/src/components/Modal/Profile/ProfileModal.tsx"
click node_authbutton "https://github.com/laiquanghai2k6/mxh/blob/main/src/components/NavBar/RightContent/AuthButton.tsx"
click node_authmodal "https://github.com/laiquanghai2k6/mxh/blob/main/src/components/Modal/Auth/AuthModal.tsx"
click node_authinput "https://github.com/laiquanghai2k6/mxh/blob/main/src/components/Modal/Auth/AuthInput.tsx"
click node_authstate "https://github.com/laiquanghai2k6/mxh/blob/main/src/atoms/authModalAtom.ts"
click node_coursemodal "https://github.com/laiquanghai2k6/mxh/blob/main/src/components/Modal/Course/CourseModal.tsx"
click node_coursepage "https://github.com/laiquanghai2k6/mxh/blob/main/src/pages/courseid/%5Bid%5D.tsx"
click node_finishmodal "https://github.com/laiquanghai2k6/mxh/blob/main/src/components/Modal/Finish/FinishModal.tsx"
click node_firebaseclient "https://github.com/laiquanghai2k6/mxh/blob/main/src/firebase/clientApp.ts"

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_home,node_layout,node_navbar toneBlue
class node_postpage,node_postmodal toneAmber
class node_coursemodal,node_coursepage,node_finishmodal toneMint
class node_profilemodal,node_authbutton,node_authmodal,node_authinput,node_authstate toneRose
class node_firebaseclient,node_firestore,node_storage,node_firebaseauth,node_visitor toneIndigo
```

## Components

### Pages and layout

- [Home feed](https://github.com/laiquanghai2k6/mxh/blob/main/src/pages/index.tsx): `src/pages/index.tsx`
- [App layout](https://github.com/laiquanghai2k6/mxh/blob/main/src/components/Layout/Layout.tsx): `src/components/Layout/Layout.tsx`
- [Navigation bar](https://github.com/laiquanghai2k6/mxh/blob/main/src/components/NavBar/Navbar.tsx): `src/components/NavBar/Navbar.tsx`

### Community

- [Post detail](https://github.com/laiquanghai2k6/mxh/blob/main/src/pages/postid/%5Bid%5D.tsx): `src/pages/postid/[id].tsx`
- [Post creation](https://github.com/laiquanghai2k6/mxh/blob/main/src/components/Modal/Post/PostModal.tsx): `src/components/Modal/Post/PostModal.tsx`

### Courses

- [Course builder](https://github.com/laiquanghai2k6/mxh/blob/main/src/components/Modal/Course/CourseModal.tsx): `src/components/Modal/Course/CourseModal.tsx`
- [Course quiz](https://github.com/laiquanghai2k6/mxh/blob/main/src/pages/courseid/%5Bid%5D.tsx): `src/pages/courseid/[id].tsx`
- [Quiz results](https://github.com/laiquanghai2k6/mxh/blob/main/src/components/Modal/Finish/FinishModal.tsx): `src/components/Modal/Finish/FinishModal.tsx`

### Identity and auth

- [Profile details](https://github.com/laiquanghai2k6/mxh/blob/main/src/components/Modal/Profile/ProfileModal.tsx): `src/components/Modal/Profile/ProfileModal.tsx`
- [Auth controls](https://github.com/laiquanghai2k6/mxh/blob/main/src/components/NavBar/RightContent/AuthButton.tsx): `src/components/NavBar/RightContent/AuthButton.tsx`
- [Auth modal](https://github.com/laiquanghai2k6/mxh/blob/main/src/components/Modal/Auth/AuthModal.tsx): `src/components/Modal/Auth/AuthModal.tsx`
- [Credential forms](https://github.com/laiquanghai2k6/mxh/blob/main/src/components/Modal/Auth/AuthInput.tsx): `src/components/Modal/Auth/AuthInput.tsx`
- [Auth modal state](https://github.com/laiquanghai2k6/mxh/blob/main/src/atoms/authModalAtom.ts): `src/atoms/authModalAtom.ts`

### Firebase services

- [Firebase client](https://github.com/laiquanghai2k6/mxh/blob/main/src/firebase/clientApp.ts): `src/firebase/clientApp.ts`
- **Firestore**
- **Firebase Storage**
- **Firebase Auth**

### Other components

- **Visitor**

## Connections

- Visitor → App layout: visits
- App layout → Home feed: renders
- App layout → Navigation bar: renders
- Home feed → Firestore: reads posts and courses
- Home feed → Firebase Auth: checks sign-in
- Home feed → Post creation: opens
- Home feed → Course builder: opens
- Home feed → Post detail: links to details
- Post detail → Firestore: reads and updates posts
- Post detail → Firebase Auth: checks sign-in
- Post detail → Profile details: shows profile
- Course builder → Firestore: reads and writes courses
- Course builder → Firebase Storage: uploads course images
- Course quiz → Firestore: reads course and updates views
- Course quiz → Firebase Auth: checks sign-in
- Course quiz → Quiz results: opens results
- Profile details → Firestore: reads and updates profiles
- Profile details → Firebase Storage: uploads profile image
- Auth controls → Auth modal state: sets modal view
- Auth modal → Auth modal state: reads modal state
- Auth modal → Credential forms: renders credentials
- Auth modal → Firebase Auth: observes session
- Credential forms → Firebase Auth: authenticates
- Firebase client → Firestore: initializes
- Firebase client → Firebase Storage: initializes
- Firebase client → Firebase Auth: initializes