raianrashidrimon/tenant-management-system

How raianrashidrimon/tenant-management-system works

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: App.js App Shell · Properties.js Properties · firebase.js Firebase Init · Tenants.js Tenants

Components 20

React SPA

Browser-based single-page application and routing shell.

Entry · Bootstraps the SPA into the browser. Tenant Management/src/index.js
App Shell · Top-level composition and route/navigation wiring. Tenant Management/src/components/App.js
Auth State · Holds and exposes login/session state to the app. Tenant Management/src/contexts/AuthContext.js
Firebase Init · Central Firebase initialization and service handles. Tenant Management/src/firebase.js

Shared UI

Reusable UI components used across pages.

Nav Bar · Authenticated navigation for primary workflows. Tenant Management/src/components/NavigationBar.js
Opening Nav · Landing and unauthenticated navigation. Tenant Management/src/components/OpeningNavigationBar.js
Footer · Shared page footer. Tenant Management/src/components/Footer.js
Pagination · Client-side paging for larger lists. Tenant Management/src/components/Pagination.js

Firebase

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

Auth · Identity provider for signup, login, and logout.
Firestore · Persistent application data for properties, tenants, payments, and queries.
Storage · Uploaded assets and documents.

Connections 28

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.

More JavaScript diagrams: barty-bart/openai-realtime-api-voice-assistant · coderdojo/community-platform · dblsai/webgl-fluid · devanshsahni/portfolio · dnacenta/claude-certified-architect

Drawn by GitDiagram on June 28, 2026 from the repository's file tree, README and source files. Read as Markdown ·