# raianrashidrimon/tenant-management-system architecture

> Architecture diagram of the GitHub repository raianrashidrimon/tenant-management-system, 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/raianrashidrimon/tenant-management-system
- Repository: https://github.com/raianrashidrimon/tenant-management-system

## Overview

1. **Repository shape**
   - The runnable app is the **React frontend** in `Tenant Management/`.
   - There is **no custom server/API layer** in this repo; the client talks directly to **Firebase** services.
   - The `UI & Use Case Diagram/` folder is documentation only, not part of the runtime system.

2. **Overall architecture**
   - This is a **single-page application (SPA)** with routed pages for landlord and admin workflows.
   - The browser UI is the presentation layer; Firebase provides authentication, persistence, and file storage.

3. **Core frontend modules**
   - `src/index.js` is the app entry point.
   - `src/components/App.js` likely defines the top-level app shell and routing/navigation composition.
   - Shared UI is split into reusable components:
     - `NavigationBar.js`
     - `OpeningNavigationBar.js`
     - `Footer.js`
     - `Pagination.js`
   - Styling is mostly in `App.css`.

4. **Authentication boundary**
   - `src/contexts/AuthContext.js` is the main state boundary for login state.
   - The app uses **Firebase Authentication** for sign-up, login, and logout.
   - Pages consume auth state to decide whether the user can access property, tenant, payment, and admin views.

5. **Firebase integration**
   - `src/firebase.js` centralizes Firebase initialization and service access.
   - The README and file set indicate use of:
     - **Firebase Authentication** for user identity
     - **Firestore** for application data
     - **Firebase Storage** for uploaded assets/documents
   - `database.rules.json` suggests Firestore security rules are managed in-repo.

6. **Primary business domains**
   - The app is organized around five main data areas:
     - **Properties**: add/edit/delete rental units and their details
     - **Tenants**: maintain tenant records
     - **Payments**: update and track tenant payment status
     - **Queries/Contact**: submit landlord requests or maintenance-like queries
     - **Admin**: privileged oversight panel
   - These are represented as page-level modules in `src/pages/`.

7. **Page-level structure**
   - Main pages include:
     - `SignUp.js`
     - `LogIn.js`
     - `AdminLogIn.js`
     - `Properties.js`
     - `Tenants.js`
     - `Payments.js`
     - `Profile.js`
     - `ContactUs.js`
     - `AdminPage.js`
   - This suggests a route-driven layout where each page owns its own data loading and form interactions.

8. **Data flow**
   - User enters the app through login/signup pages.
   - After authentication, the app reads/writes tenant-management records in **Firestore**.
   - Property and tenant lists are rendered in React, with `Pagination.js` indicating large datasets are paged on the client.
   - Any files associated with records are likely stored in **Firebase Storage** and referenced from Firestore documents.

9. **Role separation**
   - The README explicitly calls out a **separate admin panel**.
   - This implies at least two access paths:
     - landlord/owner workflow for managing properties, tenants, and payments
     - admin workflow for oversight and control
   - `AdminLogIn.js` and `AdminPage.js` reinforce that this is a distinct privilege boundary, not just a UI tab.

10. **UI composition**
   - Navigation is split between an initial/landing navigation bar and the authenticated navigation bar.
   - The presence of `Footer.js` and shared CSS indicates a lightweight app shell surrounding the page content.
   - Images in `src/images/` likely support branded UI and page illustrations.

11. **Deployment/runtime model**
   - This is a **frontend-only React app** intended to run in the browser.
   - All persistent state lives in Firebase, so the architecture is stateless on the client side except for auth/session and transient UI state.

12. **Architecture diagram takeaway**
   - The diagram should show:
     - **Browser/React SPA**
     - **AuthContext** as the auth-state controller
     - **Firebase Auth** for identity
     - **Firestore** for properties/tenants/payments/queries/admin data
     - **Firebase Storage** for uploaded assets
     - Separate user flows for **landlord** and **admin**
     - Shared UI components and page modules layered on top of the data services

Main entry points: [`Tenant Management/src/components/App.js`](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/components/App.js) (App Shell), [`Tenant Management/src/pages/Properties.js`](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/pages/Properties.js) (Properties), [`Tenant Management/src/firebase.js`](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/firebase.js) (Firebase Init), [`Tenant Management/src/pages/Tenants.js`](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/pages/Tenants.js) (Tenants)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["React SPA"]
  node_src_index["Entry<br/>[index.js]"]
  node_app_shell["App Shell<br/>routing shell<br/>[App.js]"]
  node_auth_context{{"Auth State<br/>context<br/>[AuthContext.js]"}}
  node_firebase_config["Firebase Init<br/>service config<br/>[firebase.js]"]
end

subgraph group_shared["Shared UI"]
  node_nav_bar["Nav Bar<br/>shared nav<br/>[NavigationBar.js]"]
  node_opening_nav["Opening Nav<br/>shared nav"]
  node_footer["Footer<br/>shared chrome<br/>[Footer.js]"]
  node_pagination["Pagination<br/>shared control<br/>[Pagination.js]"]
end

subgraph group_pages["Pages"]
  node_signup["Sign Up<br/>auth page<br/>[SignUp.js]"]
  node_login["Log In<br/>auth page<br/>[LogIn.js]"]
  node_admin_login["Admin Log In<br/>admin auth<br/>[AdminLogIn.js]"]
  node_properties["Properties<br/>landlord page<br/>[Properties.js]"]
  node_tenants["Tenants<br/>landlord page<br/>[Tenants.js]"]
  node_payments["Payments<br/>landlord page<br/>[Payments.js]"]
  node_profile["Profile<br/>account page<br/>[Profile.js]"]
  node_contact["Contact Us<br/>query page<br/>[ContactUs.js]"]
  node_admin_page["Admin Page<br/>admin panel<br/>[AdminPage.js]"]
end

subgraph group_firebase["Firebase"]
  node_firebase_auth(("Auth"))
  node_firestore[("Firestore<br/>data store")]
  node_storage[("Storage<br/>file store")]
end

node_src_index -->|"bootstraps"| node_app_shell
node_app_shell -->|"uses"| node_auth_context
node_auth_context -->|"reads session"| node_firebase_auth
node_firebase_config -->|"initializes"| node_firebase_auth
node_firebase_config -->|"initializes"| node_firestore
node_firebase_config -->|"initializes"| node_storage
node_app_shell -->|"renders public"| node_opening_nav
node_app_shell -->|"renders app"| node_nav_bar
node_app_shell -->|"wraps"| node_footer
node_app_shell -->|"routes to"| node_signup
node_app_shell -->|"routes to"| node_login
node_app_shell -->|"routes to"| node_admin_login
node_app_shell -->|"routes to"| node_properties
node_app_shell -->|"routes to"| node_tenants
node_app_shell -->|"routes to"| node_payments
node_app_shell -->|"routes to"| node_profile
node_app_shell -->|"routes to"| node_contact
node_app_shell -->|"routes to"| node_admin_page
node_properties -->|"reads/writes"| node_firestore
node_tenants -->|"reads/writes"| node_firestore
node_payments -->|"reads/writes"| node_firestore
node_contact -->|"submits"| node_firestore
node_admin_page -->|"oversees"| node_firestore
node_properties -->|"uploads"| node_storage
node_profile -->|"attaches files"| node_storage
node_properties -->|"paginates"| node_pagination
node_tenants -->|"paginates"| node_pagination
node_payments -->|"paginates"| node_pagination

click node_src_index "https://github.com/raianrashidrimon/tenant-management-system/blob/main/Tenant Management/src/index.js"
click node_app_shell "https://github.com/raianrashidrimon/tenant-management-system/blob/main/Tenant Management/src/components/App.js"
click node_auth_context "https://github.com/raianrashidrimon/tenant-management-system/blob/main/Tenant Management/src/contexts/AuthContext.js"
click node_firebase_config "https://github.com/raianrashidrimon/tenant-management-system/blob/main/Tenant Management/src/firebase.js"
click node_nav_bar "https://github.com/raianrashidrimon/tenant-management-system/blob/main/Tenant Management/src/components/NavigationBar.js"
click node_opening_nav "https://github.com/raianrashidrimon/tenant-management-system/blob/main/Tenant Management/src/components/OpeningNavigationBar.js"
click node_footer "https://github.com/raianrashidrimon/tenant-management-system/blob/main/Tenant Management/src/components/Footer.js"
click node_pagination "https://github.com/raianrashidrimon/tenant-management-system/blob/main/Tenant Management/src/components/Pagination.js"
click node_signup "https://github.com/raianrashidrimon/tenant-management-system/blob/main/Tenant Management/src/pages/SignUp.js"
click node_login "https://github.com/raianrashidrimon/tenant-management-system/blob/main/Tenant Management/src/pages/LogIn.js"
click node_admin_login "https://github.com/raianrashidrimon/tenant-management-system/blob/main/Tenant Management/src/pages/AdminLogIn.js"
click node_properties "https://github.com/raianrashidrimon/tenant-management-system/blob/main/Tenant Management/src/pages/Properties.js"
click node_tenants "https://github.com/raianrashidrimon/tenant-management-system/blob/main/Tenant Management/src/pages/Tenants.js"
click node_payments "https://github.com/raianrashidrimon/tenant-management-system/blob/main/Tenant Management/src/pages/Payments.js"
click node_profile "https://github.com/raianrashidrimon/tenant-management-system/blob/main/Tenant Management/src/pages/Profile.js"
click node_contact "https://github.com/raianrashidrimon/tenant-management-system/blob/main/Tenant Management/src/pages/ContactUs.js"
click node_admin_page "https://github.com/raianrashidrimon/tenant-management-system/blob/main/Tenant Management/src/pages/AdminPage.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_src_index,node_app_shell,node_auth_context,node_firebase_config toneBlue
class node_nav_bar,node_opening_nav,node_footer,node_pagination toneAmber
class node_signup,node_login,node_admin_login,node_properties,node_tenants,node_payments,node_profile,node_contact,node_admin_page toneMint
class node_firebase_auth,node_firestore,node_storage toneRose
```

## Components

### React SPA

Browser-based single-page application and routing shell.

- [Entry](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/index.js): React entry · Bootstraps the SPA into the browser. · `Tenant Management/src/index.js`
- [App Shell](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/components/App.js): routing shell · Top-level composition and route/navigation wiring. · `Tenant Management/src/components/App.js`
- [Auth State](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/contexts/AuthContext.js): context · Holds and exposes login/session state to the app. · `Tenant Management/src/contexts/AuthContext.js`
- [Firebase Init](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/firebase.js): service config · Central Firebase initialization and service handles. · `Tenant Management/src/firebase.js`

### Shared UI

Reusable UI components used across pages.

- [Nav Bar](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/components/NavigationBar.js): shared nav · Authenticated navigation for primary workflows. · `Tenant Management/src/components/NavigationBar.js`
- [Opening Nav](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/components/OpeningNavigationBar.js): shared nav · Landing and unauthenticated navigation. · `Tenant Management/src/components/OpeningNavigationBar.js`
- [Footer](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/components/Footer.js): shared chrome · Shared page footer. · `Tenant Management/src/components/Footer.js`
- [Pagination](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/components/Pagination.js): shared control · Client-side paging for larger lists. · `Tenant Management/src/components/Pagination.js`

### Pages

Route-level screens for auth, landlord, and admin workflows.

- [Sign Up](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/pages/SignUp.js): auth page · User registration screen. · `Tenant Management/src/pages/SignUp.js`
- [Log In](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/pages/LogIn.js): auth page · Primary user sign-in screen. · `Tenant Management/src/pages/LogIn.js`
- [Admin Log In](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/pages/AdminLogIn.js): admin auth · Separate sign-in path for privileged access. · `Tenant Management/src/pages/AdminLogIn.js`
- [Properties](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/pages/Properties.js): landlord page · Manage rental units and property details. · `Tenant Management/src/pages/Properties.js`
- [Tenants](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/pages/Tenants.js): landlord page · Maintain tenant records. · `Tenant Management/src/pages/Tenants.js`
- [Payments](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/pages/Payments.js): landlord page · Track and update payment status. · `Tenant Management/src/pages/Payments.js`
- [Profile](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/pages/Profile.js): account page · User profile and account details. · `Tenant Management/src/pages/Profile.js`
- [Contact Us](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/pages/ContactUs.js): query page · Submit landlord requests and support queries. · `Tenant Management/src/pages/ContactUs.js`
- [Admin Page](https://github.com/raianrashidrimon/tenant-management-system/blob/HEAD/Tenant%20Management/src/pages/AdminPage.js): admin panel · Privileged oversight and control screen. · `Tenant Management/src/pages/AdminPage.js`

### Firebase

External services used for identity, data, and file storage.

- **Auth**: Firebase Auth · Identity provider for signup, login, and logout.
- **Firestore**: data store · Persistent application data for properties, tenants, payments, and queries.
- **Storage**: file store · Uploaded assets and documents.

## Connections

- Entry → App Shell: bootstraps · Entry point mounts the React app.
- App Shell → Auth State: uses · App shell consumes auth state.
- Auth State → Auth: reads session · Auth context delegates identity to Firebase Authentication.
- Firebase Init → Auth: initializes · Central config wires authentication.
- Firebase Init → Firestore: initializes · Central config wires database access.
- Firebase Init → Storage: initializes · Central config wires file storage access.
- App Shell → Opening Nav: renders public · Unauthenticated entry navigation.
- App Shell → Nav Bar: renders app · Authenticated navigation shell.
- App Shell → Footer: wraps · Shared page footer.
- App Shell → Sign Up: routes to · Public registration flow.
- App Shell → Log In: routes to · Primary sign-in flow.
- App Shell → Admin Log In: routes to · Privileged sign-in flow.
- App Shell → Properties: routes to · Landlord property management screen.
- App Shell → Tenants: routes to · Landlord tenant management screen.
- App Shell → Payments: routes to · Payment tracking screen.
- App Shell → Profile: routes to · Account/profile screen.
- App Shell → Contact Us: routes to · Support/contact screen.
- App Shell → Admin Page: routes to · Admin oversight screen.
- Properties → Firestore: reads/writes · Property records are persisted in Firestore.
- Tenants → Firestore: reads/writes · Tenant records are persisted in Firestore.
- Payments → Firestore: reads/writes · Payment status lives in Firestore.
- Contact Us → Firestore: submits · Contact or query records are stored in Firestore.
- Admin Page → Firestore: oversees · Admin panel inspects and manages application data.
- Properties → Storage: uploads · Property-related files can be stored in Firebase Storage.
- Profile → Storage: attaches files · Profile assets or documents can reference storage objects.
- Properties → Pagination: paginates · Large property lists are paged in the UI.
- Tenants → Pagination: paginates · Large tenant lists are paged in the UI.
- Payments → Pagination: paginates · Payment records may be paged in the UI.