# fahamidanimra173/learniqe-learning-website architecture

> Architecture diagram of the GitHub repository fahamidanimra173/learniqe-learning-website, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/fahamidanimra173/learniqe-learning-website
- Repository: https://github.com/fahamidanimra173/learniqe-learning-website

## Overview

1. **This repo is a React single-page frontend for LearnIQ.**  
   The architecture is client-side UI focused, with routing, auth, dashboards, payment screens, and content discovery. There is no backend implementation in this tree, so the app is designed to consume external APIs/services rather than host server logic itself.

2. **The app shell is split into route layouts.**  
   `src/Router/Router.jsx` coordinates navigation, while `src/LayOuts/Root.jsx`, `src/LayOuts/AuthLayout/*`, and `src/LayOuts/DashBoard.jsx` separate the public site, auth pages, and dashboard area. This is the main structural boundary in the UI.

3. **Authentication and user state are centralized in context.**  
   `src/Context/AuthProvider.jsx` and `src/Context/AuthContext.jsx` provide global auth state, likely wrapping Firebase auth and/or JWT-backed session info. Protected routes are enforced through `src/Routes/PrivateRoute.jsx`, which gates student/teacher/admin-only sections.

4. **Data access is isolated through an Axios wrapper.**  
   `src/Axios/AxiosSecure.jsx` is the main boundary for authenticated API calls. This suggests the app talks to a separate backend for users, courses, enrollments, teacher requests, and dashboards, while attaching auth credentials where needed.

5. **The public experience is organized around discovery and marketing pages.**  
   `src/Pages/Home/Home.jsx` composes many sections such as banners, platform discovery, categories, testimonials, enrolled-course highlights, newsletter, and “become an instructor” prompts. Other public pages include About, Contact, Explore, Privacy Policy, Terms, All Teachers, Free Courses, and All Approved Classes.

6. **LearnIQ’s LMS flow is represented by course discovery, enrollment, and payment pages.**  
   `src/Pages/AllApprovedClasses/*` appears to be the catalog of approved courses, with `CourceDetails.jsx` as the detail view. `src/Pages/Payment/*` handles paid enrollment, and Stripe is the external payment boundary implied by the README. This is the transition from marketing/discovery into transactional LMS usage.

7. **Role-based dashboards are the core application subsystem.**  
   The `src/DashBoard/*` tree is split by role: student, teacher, and admin. Each area has its own feature pages and analytics widgets, such as class requests, teacher requests, enrolled classes, class management, and user analytics. This is the main business-logic surface of the frontend.

8. **Student dashboard focuses on enrolled learning activity.**  
   `src/DashBoard/StudentDashBoard/*` contains enrolled class views and class detail pages, indicating the student flow is centered on tracking enrolled courses and accessing related information, likely including assignments or progress tied to backend data.

9. **Teacher dashboard supports course authoring and class management.**  
   `src/DashBoard/TeacherDashBoard/AddClass/*` and `src/DashBoard/TeacherDashBoard/MyClass/*` indicate teachers can submit new classes, manage their own courses, and inspect class details. `src/DashBoard/TeacherRequests/TeacherRequests.jsx` suggests a workflow where users request teacher status or approvals.

10. **Admin/dashboard analytics are visualized with chart components.**  
   `src/DashBoard/AllUsers/*` includes charts for role distribution, category enrollment, student assignments, and teacher class counts. This shows the admin view is not just CRUD; it also aggregates platform usage into visual insights.

11. **Shared UI and presentation components are heavily reused across pages.**  
   `src/Shared/*`, `src/components/ui/*`, `src/components/etheral-shadow.jsx`, and `src/Pages/Home/Component/*` provide reusable visual building blocks. The presence of Flowbite/shadcn-style component configs, Tailwind CSS, and utility helpers indicates a component-driven UI layer rather than page-specific styling.

12. **Static assets and curated datasets are part of the content layer.**  
   `public/data/globe.json`, `dataset_10min_ostad_alison_khan.json`, and the PDF/font assets under `public/` support homepage visuals and platform/course discovery content. These assets help the frontend render rich marketing sections and educational platform references without requiring live content for every view.

13. **Firebase is part of the deployment and likely auth/runtime integration.**  
   `Firebase.init.js`, `.firebaserc`, and `firebase.json` indicate Firebase is used operationally, most likely for authentication and/or hosting. The `public/404 Page not found.json` and hosting cache files reinforce that this app is deployed as a hosted SPA.

14. **The app is built as a modern React frontend stack.**  
   `vite.config.js`, `main.jsx`, `App.jsx`, Tailwind-related config, Axios, and React component organization point to a Vite-based React build. The architecture is therefore: browser UI → routed layouts/pages → context/auth layer → secure API calls/payment/auth providers → role-specific dashboards and course workflows.

Main entry points: [`src/LayOuts/DashBoard.jsx`](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/LayOuts/DashBoard.jsx) (Dashboard layout), [`src/Axios/AxiosSecure.jsx`](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Axios/AxiosSecure.jsx) (Secure API), [`src/App.jsx`](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/App.jsx) (App), [`src/Router/Router.jsx`](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Router/Router.jsx) (Router)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_app_shell["App Shell"]
  node_node_main["main<br/>entry<br/>[main.jsx]"]
  node_node_app["App<br/>[App.jsx]"]
  node_node_router["Router<br/>navigation<br/>[Router.jsx]"]
  node_node_root_layout["Root layout<br/>[Root.jsx]"]
  node_node_auth_layout["Auth layout<br/>[Login.jsx]"]
  node_node_dashboard_layout["Dashboard layout<br/>[DashBoard.jsx]"]
end

subgraph group_group_public["Public Experience"]
  node_node_home["Home<br/>landing page<br/>[Home.jsx]"]
  node_node_public_pages["Public pages<br/>informational pages<br/>[Explore.jsx]"]
  node_node_courses["Approved classes<br/>catalog"]
  node_node_payment["Payment<br/>checkout<br/>[Payment.jsx]"]
end

subgraph group_group_dashboards["Dashboards"]
  node_node_student_dash["Student area<br/>student LMS"]
  node_node_teacher_dash["Teacher area<br/>teacher LMS<br/>[AddClass.jsx]"]
  node_node_teacher_requests["Teacher requests<br/>approval workflow"]
  node_node_admin_dash["Admin analytics<br/>admin insights<br/>[AllUsers.jsx]"]
end

subgraph group_group_shared["Shared & Infra"]
  node_node_auth_context(("Auth context<br/>session state<br/>[AuthProvider.jsx]"))
  node_node_private_route{{"Private route<br/>route guard<br/>[PrivateRoute.jsx]"}}
  node_node_api["Secure API<br/>axios client<br/>[AxiosSecure.jsx]"]
  node_node_shared_ui["Shared UI<br/>component library<br/>[Navbar.jsx]"]
  node_node_firebase[("Firebase<br/>hosting/auth runtime<br/>[Firebase.init.js]")]
end

node_node_main -->|"boots"| node_node_app
node_node_app -->|"wires routes"| node_node_router
node_node_router -->|"public shell"| node_node_root_layout
node_node_router -->|"auth shell"| node_node_auth_layout
node_node_router -->|"protected shell"| node_node_dashboard_layout
node_node_dashboard_layout -->|"guards"| node_node_private_route
node_node_private_route -->|"reads session"| node_node_auth_context
node_node_app -->|"provides state"| node_node_auth_context
node_node_auth_context -->|"attaches creds"| node_node_api
node_node_root_layout -->|"renders"| node_node_home
node_node_root_layout -->|"renders"| node_node_public_pages
node_node_root_layout -->|"renders"| node_node_courses
node_node_courses -->|"starts checkout"| node_node_payment
node_node_payment -->|"submits"| node_node_api
node_node_dashboard_layout -->|"routes"| node_node_student_dash
node_node_dashboard_layout -->|"routes"| node_node_teacher_dash
node_node_dashboard_layout -->|"routes"| node_node_teacher_requests
node_node_dashboard_layout -->|"routes"| node_node_admin_dash
node_node_student_dash -->|"loads data"| node_node_api
node_node_teacher_dash -->|"manages data"| node_node_api
node_node_teacher_requests -->|"processes"| node_node_api
node_node_admin_dash -->|"aggregates"| node_node_api
node_node_app -->|"reuses"| node_node_shared_ui
node_node_app -->|"integrates"| node_node_firebase

click node_node_main "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/main.jsx"
click node_node_app "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/App.jsx"
click node_node_router "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Router/Router.jsx"
click node_node_root_layout "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/LayOuts/Root.jsx"
click node_node_auth_layout "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/LayOuts/AuthLayout/Login.jsx"
click node_node_dashboard_layout "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/LayOuts/DashBoard.jsx"
click node_node_auth_context "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Context/AuthProvider.jsx"
click node_node_private_route "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Routes/PrivateRoute.jsx"
click node_node_api "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Axios/AxiosSecure.jsx"
click node_node_home "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Pages/Home/Home.jsx"
click node_node_public_pages "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Pages/ExtraRoutes/Explore.jsx"
click node_node_courses "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Pages/AllApprovedClasses/AllApprovedClasses.jsx"
click node_node_payment "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Pages/Payment/Payment.jsx"
click node_node_student_dash "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/DashBoard/StudentDashBoard/MyEnrollmentClass/MyEnrollmentClass.jsx"
click node_node_teacher_dash "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/DashBoard/TeacherDashBoard/AddClass/AddClass.jsx"
click node_node_teacher_requests "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/DashBoard/TeacherRequests/TeacherRequests.jsx"
click node_node_admin_dash "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/DashBoard/AllUsers/AllUsers.jsx"
click node_node_shared_ui "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Shared/Navbar.jsx"
click node_node_firebase "https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/Firebase.init.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_node_main,node_node_app,node_node_router,node_node_root_layout,node_node_auth_layout,node_node_dashboard_layout toneBlue
class node_node_home,node_node_public_pages,node_node_courses,node_node_payment toneAmber
class node_node_student_dash,node_node_teacher_dash,node_node_teacher_requests,node_node_admin_dash toneMint
class node_node_auth_context,node_node_private_route,node_node_api,node_node_shared_ui,node_node_firebase toneRose
```

## Components

### App Shell

Routing, layouts, and auth gating for the SPA

- [main](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/main.jsx): entry · Vite React entrypoint · `src/main.jsx`
- [App](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/App.jsx): app shell · Top-level application composition · `src/App.jsx`
- [Router](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Router/Router.jsx): navigation · Central route map · `src/Router/Router.jsx`
- [Root layout](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/LayOuts/Root.jsx): layout · Public-site shell · `src/LayOuts/Root.jsx`
- [Auth layout](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/LayOuts/AuthLayout/Login.jsx): layout · Login and registration shell · `src/LayOuts/AuthLayout/Login.jsx`
- [Dashboard layout](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/LayOuts/DashBoard.jsx): layout · Protected dashboard shell · `src/LayOuts/DashBoard.jsx`

### Public Experience

Marketing, discovery, and transactional user flows

- [Home](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Pages/Home/Home.jsx): landing page · Homepage composition and discovery · `src/Pages/Home/Home.jsx`
- [Public pages](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Pages/ExtraRoutes/Explore.jsx): informational pages · About, contact, explore, policy, and teacher listing pages · `src/Pages/ExtraRoutes/Explore.jsx`
- [Approved classes](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Pages/AllApprovedClasses/AllApprovedClasses.jsx): catalog · Course discovery and detail view · `src/Pages/AllApprovedClasses/AllApprovedClasses.jsx`
- [Payment](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Pages/Payment/Payment.jsx): checkout · Paid enrollment flow · `src/Pages/Payment/Payment.jsx`

### Dashboards

Role-based student, teacher, and admin areas

- [Student area](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/DashBoard/StudentDashBoard/MyEnrollmentClass/MyEnrollmentClass.jsx): student LMS · Enrolled classes and class details · `src/DashBoard/StudentDashBoard/MyEnrollmentClass/MyEnrollmentClass.jsx`
- [Teacher area](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/DashBoard/TeacherDashBoard/AddClass/AddClass.jsx): teacher LMS · Add class and manage own classes · `src/DashBoard/TeacherDashBoard/AddClass/AddClass.jsx`
- [Teacher requests](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/DashBoard/TeacherRequests/TeacherRequests.jsx): approval workflow · Teacher-role request handling · `src/DashBoard/TeacherRequests/TeacherRequests.jsx`
- [Admin analytics](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/DashBoard/AllUsers/AllUsers.jsx): admin insights · Users, roles, class requests, and charts · `src/DashBoard/AllUsers/AllUsers.jsx`

### Shared & Infra

Reusable UI, auth/session, API access, and deployment/runtime support

- [Auth context](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Context/AuthProvider.jsx): session state · Global authentication and user state · `src/Context/AuthProvider.jsx`
- [Private route](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Routes/PrivateRoute.jsx): route guard · Role-based access gate · `src/Routes/PrivateRoute.jsx`
- [Secure API](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Axios/AxiosSecure.jsx): axios client · Authenticated backend requests · `src/Axios/AxiosSecure.jsx`
- [Shared UI](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/src/Shared/Navbar.jsx): component library · Reusable buttons, nav, footer, loaders, and custom UI · `src/Shared/Navbar.jsx`
- [Firebase](https://github.com/fahamidanimra173/learniqe-learning-website/blob/main/Firebase.init.js): hosting/auth runtime · Deployment and runtime integration · `Firebase.init.js`

## Connections

- main → App: boots · React mounts the application
- App → Router: wires routes · App delegates navigation to the router
- Router → Root layout: public shell · Public routes render through the root layout
- Router → Auth layout: auth shell · Login and register pages use the auth layout
- Router → Dashboard layout: protected shell · Dashboard routes render through the protected layout
- Dashboard layout → Private route: guards · Dashboard access is gated by route protection
- Private route → Auth context: reads session · Guard logic depends on current auth state
- App → Auth context: provides state · Auth provider wraps the SPA
- Auth context → Secure API: attaches creds · Authenticated requests use the secure client
- Root layout → Home: renders · Homepage is the main public landing view
- Root layout → Public pages: renders · Informational pages live in the public area
- Root layout → Approved classes: renders · Course discovery is exposed publicly
- Approved classes → Payment: starts checkout · Selected classes transition into payment
- Payment → Secure API: submits · Checkout and enrollment talk to the backend
- Dashboard layout → Student area: routes · Student learning views live inside the dashboard
- Dashboard layout → Teacher area: routes · Teacher authoring tools live inside the dashboard
- Dashboard layout → Teacher requests: routes · Teacher approval workflow is part of dashboard admin flow
- Dashboard layout → Admin analytics: routes · Admin analytics and management views live here
- Student area → Secure API: loads data · Student enrollment data is fetched from the backend
- Teacher area → Secure API: manages data · Teachers create and inspect classes through API calls
- Teacher requests → Secure API: processes · Teacher request approvals use backend data
- Admin analytics → Secure API: aggregates · Analytics charts summarize backend platform data
- App → Shared UI: reuses · Common UI elements support many pages
- App → Firebase: integrates · Firebase supports hosting and/or auth runtime