# vishalyadav0987/pg-finder architecture

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

- Interactive diagram: https://gitdiagram.com/vishalyadav0987/pg-finder
- Repository: https://github.com/vishalyadav0987/pg-finder

## Overview

1. **Overall shape**
   - PG-Finder is a two-part MERN-style application: a React/Vite frontend in `frontend/pg-frontend` and a Node/Express backend in `server`.
   - The backend owns authentication, property/listing data, bookings, and user-related APIs. The frontend is a client that renders the marketplace experience and consumes those APIs.

2. **Frontend runtime and composition**
   - The frontend is a Vite-powered React app (`src/main.jsx`, `src/App.jsx`) with UI broken into reusable components and page-level screens.
   - Styling is split across CSS/SCSS files under `src/Styles`, suggesting a component-oriented UI with substantial custom styling rather than a UI kit.

3. **Frontend screen boundaries**
   - Auth flows live under `src/Pages/Auth` with `Login.jsx` and `Register.jsx`.
   - The main product flow lives under `src/Pages/Home`, including home, category browsing, listing creation, listing details, search results, wishlist, trips, reservations, and property management.
   - This implies the frontend is organized around user journeys: browse, search, save, book, and manage listings.

4. **Frontend shared UI layer**
   - `src/Components` contains common building blocks such as `Navbar`, `Footer`, `Slider`, `Categories`, `ListingCard`, `Listing`, and `Loader`.
   - These are likely reused across multiple pages, with `ListingCard` and `Listing` bridging search/browse views to listing detail views.
   - `src/catDB.jsx` suggests a local category dataset or category metadata used by the UI.

5. **Frontend state management**
   - The presence of `src/redux/state.js` and `src/redux/store.js` indicates centralized client-side state, likely for user/session state, listings, search results, and booking-related data.
   - Redux is the main boundary between page components and API-derived application state.

6. **Backend service boundaries**
   - The backend is organized by concern: `Controllers`, `Routes`, `modals` (models), and `connectDB`.
   - This is a classic Express layering: routes define HTTP endpoints, controllers hold request logic, models define MongoDB schemas, and the DB connector initializes the database connection.
   - `server/index.js` is the entry point that likely wires Express middleware, routes, database startup, and static file hosting.

7. **Backend domain areas**
   - `AuthController.js` and `authRoutes.js` handle login/register and JWT-based authentication.
   - `UserController.js` and `UserSchema.js` cover user profile data and identity-linked records.
   - `PageListingController.js` / `PageListingSchema.js` manage property/listing CRUD and retrieval.
   - `BookingController.js` / `BookingSchema.js` manage reservations, trip history, and booking lifecycle.

8. **Primary data flow**
   - A user interacts with the React pages, which call the Express API.
   - The backend validates/authenticates the request, reads/writes MongoDB through the models, and returns JSON to the frontend.
   - Frontend Redux likely caches and propagates those results across views such as search, listing details, wishlist, trip list, and reservation list.

9. **Authentication boundary**
   - The project explicitly uses JWT, so authenticated actions are separated from public browsing.
   - Login/register are the entry points to identity creation and token issuance; protected actions likely include creating listings, managing bookings, and viewing personal trips/reservations.

10. **Listing and media handling**
   - `server/public/uploads` indicates server-side file storage for listing images or user-uploaded assets.
   - That makes media a distinct subsystem: the frontend likely uploads files through listing creation, and the backend persists them under a public path for later retrieval.

11. **Booking/reservation workflow**
   - The existence of `ReservationList.jsx`, `TripList.jsx`, and booking controllers/models suggests a booking-centric flow after property selection.
   - “Trip” and “Reservation” are separate UI concepts, implying the app distinguishes between a user’s future stays and the bookings they manage.

12. **Operational setup**
   - The repo is developed as two independently run services: frontend on Vite dev server (`localhost:5173`) and backend on Express (`localhost:3000`).
   - MongoDB is the external persistence layer, while the backend mediates all data access.
   - For an architecture diagram, the key boxes are: browser/React UI, Redux state, Express API, MongoDB, and server file uploads.

13. **What matters most for a diagram**
   - Draw the system as a client-server app with clear separation between presentation and domain/API layers.
   - Show auth as a cross-cutting concern feeding all protected listing/booking/user flows.
   - Show listings and bookings as the two main business domains, with uploaded media as supporting storage attached to listings.

Main entry points: [`frontend/pg-frontend/src/Pages/Home`](https://github.com/vishalyadav0987/pg-finder/tree/master/frontend/pg-frontend/src/Pages/Home) (Marketplace screens), [`server/index.js`](https://github.com/vishalyadav0987/pg-finder/blob/master/server/index.js) (Express API), [`frontend/pg-frontend/src/App.jsx`](https://github.com/vishalyadav0987/pg-finder/blob/master/frontend/pg-frontend/src/App.jsx) (Routes), [`server/Controllers/PageListingController.js`](https://github.com/vishalyadav0987/pg-finder/blob/master/server/Controllers/PageListingController.js) (Listing controller)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend"]
  node_main["App shell<br/>react entry<br/>[main.jsx]"]
  node_app["Routes<br/>react router<br/>[App.jsx]"]
  node_redux["Redux store<br/>client state<br/>[store.js]"]
  node_state["State slice<br/>client state<br/>[state.js]"]
  node_auth["Auth screens<br/>ui screens"]
  node_market["Marketplace screens<br/>ui screens"]
  node_ui["Shared UI<br/>components"]
  node_styles["Styles<br/>scss/css"]
  node_categorydb["Category data<br/>local data<br/>[catDB.jsx]"]
end

subgraph group_backend["Backend"]
  node_server["Express API<br/>node service<br/>[index.js]"]
  node_authroutes["Auth routes<br/>http routes<br/>[authRoutes.js]"]
  node_userroutes["User routes<br/>http routes<br/>[UserRoute.js]"]
  node_listingroutes["Listing routes<br/>http routes"]
  node_bookingroutes["Booking routes<br/>http routes<br/>[BookingRoute.js]"]
  node_authctl["Auth controller<br/>[AuthController.js]"]
  node_userctl["User controller<br/>[UserController.js]"]
  node_listingctl["Listing controller"]
  node_bookingctl["Booking controller"]
  node_userschema[("User model<br/>mongo model<br/>[UserSchema.js]")]
  node_listingschema[("Listing model<br/>mongo model")]
  node_bookingschema[("Booking model<br/>mongo model<br/>[BookingSchema.js]")]
  node_db[("MongoDB<br/>database<br/>[connect.js]")]
  node_uploads["Uploads<br/>file storage"]
end

node_browser(("Browser<br/>client"))

node_browser -->|"opens"| node_main
node_main -->|"mounts"| node_app
node_app -->|"uses"| node_redux
node_redux -->|"stores"| node_state
node_app -->|"routes"| node_auth
node_app -->|"routes"| node_market
node_market -->|"composes"| node_ui
node_auth -->|"composes"| node_ui
node_ui -->|"styled by"| node_styles
node_market -->|"reads"| node_categorydb
node_main -.->|"api calls"| node_server
node_server -->|"registers"| node_authroutes
node_server -->|"registers"| node_userroutes
node_server -->|"registers"| node_listingroutes
node_server -->|"registers"| node_bookingroutes
node_authroutes -->|"delegates"| node_authctl
node_userroutes -->|"delegates"| node_userctl
node_listingroutes -->|"delegates"| node_listingctl
node_bookingroutes -->|"delegates"| node_bookingctl
node_authctl -->|"reads/writes"| node_userschema
node_userctl -->|"reads/writes"| node_userschema
node_listingctl -->|"reads/writes"| node_listingschema
node_bookingctl -->|"reads/writes"| node_bookingschema
node_userschema -->|"persists"| node_db
node_listingschema -->|"persists"| node_db
node_bookingschema -->|"persists"| node_db
node_listingctl -.->|"stores media"| node_uploads
node_market -.->|"auth flow"| node_authctl
node_market -.->|"browse/manage"| node_listingctl
node_market -.->|"bookings"| node_bookingctl

click node_main "https://github.com/vishalyadav0987/pg-finder/blob/master/frontend/pg-frontend/src/main.jsx"
click node_app "https://github.com/vishalyadav0987/pg-finder/blob/master/frontend/pg-frontend/src/App.jsx"
click node_redux "https://github.com/vishalyadav0987/pg-finder/blob/master/frontend/pg-frontend/src/redux/store.js"
click node_state "https://github.com/vishalyadav0987/pg-finder/blob/master/frontend/pg-frontend/src/redux/state.js"
click node_auth "https://github.com/vishalyadav0987/pg-finder/tree/master/frontend/pg-frontend/src/Pages/Auth"
click node_market "https://github.com/vishalyadav0987/pg-finder/tree/master/frontend/pg-frontend/src/Pages/Home"
click node_ui "https://github.com/vishalyadav0987/pg-finder/tree/master/frontend/pg-frontend/src/Components"
click node_styles "https://github.com/vishalyadav0987/pg-finder/tree/master/frontend/pg-frontend/src/Styles"
click node_categorydb "https://github.com/vishalyadav0987/pg-finder/blob/master/frontend/pg-frontend/src/catDB.jsx"
click node_server "https://github.com/vishalyadav0987/pg-finder/blob/master/server/index.js"
click node_authroutes "https://github.com/vishalyadav0987/pg-finder/blob/master/server/Routes/authRoutes.js"
click node_userroutes "https://github.com/vishalyadav0987/pg-finder/blob/master/server/Routes/UserRoute.js"
click node_listingroutes "https://github.com/vishalyadav0987/pg-finder/blob/master/server/Routes/PageListingRoute.js"
click node_bookingroutes "https://github.com/vishalyadav0987/pg-finder/blob/master/server/Routes/BookingRoute.js"
click node_authctl "https://github.com/vishalyadav0987/pg-finder/blob/master/server/Controllers/AuthController.js"
click node_userctl "https://github.com/vishalyadav0987/pg-finder/blob/master/server/Controllers/UserController.js"
click node_listingctl "https://github.com/vishalyadav0987/pg-finder/blob/master/server/Controllers/PageListingController.js"
click node_bookingctl "https://github.com/vishalyadav0987/pg-finder/blob/master/server/Controllers/BookingController.js"
click node_userschema "https://github.com/vishalyadav0987/pg-finder/blob/master/server/modals/UserSchema.js"
click node_listingschema "https://github.com/vishalyadav0987/pg-finder/blob/master/server/modals/PageListingSchema.js"
click node_bookingschema "https://github.com/vishalyadav0987/pg-finder/blob/master/server/modals/BookingSchema.js"
click node_db "https://github.com/vishalyadav0987/pg-finder/blob/master/server/connectDB/connect.js"
click node_uploads "https://github.com/vishalyadav0987/pg-finder/tree/master/server/public/uploads"

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_main,node_app,node_redux,node_state,node_auth,node_market,node_ui,node_styles,node_categorydb toneBlue
class node_server,node_authroutes,node_userroutes,node_listingroutes,node_bookingroutes,node_authctl,node_userctl,node_listingctl,node_bookingctl,node_userschema,node_listingschema,node_bookingschema,node_db,node_uploads toneAmber
class node_browser toneNeutral
```

## Components

### Frontend

Vite React client for browsing, auth, and booking flows.

- [App shell](https://github.com/vishalyadav0987/pg-finder/blob/master/frontend/pg-frontend/src/main.jsx): react entry · Bootstraps the React app and global layout. · `frontend/pg-frontend/src/main.jsx`
- [Routes](https://github.com/vishalyadav0987/pg-finder/blob/master/frontend/pg-frontend/src/App.jsx): react router · Top-level app composition and screen routing. · `frontend/pg-frontend/src/App.jsx`
- [Redux store](https://github.com/vishalyadav0987/pg-finder/blob/master/frontend/pg-frontend/src/redux/store.js): client state · Central client state for session and marketplace data. · `frontend/pg-frontend/src/redux/store.js`
- [State slice](https://github.com/vishalyadav0987/pg-finder/blob/master/frontend/pg-frontend/src/redux/state.js): client state · Shared Redux state and reducers. · `frontend/pg-frontend/src/redux/state.js`
- [Auth screens](https://github.com/vishalyadav0987/pg-finder/tree/master/frontend/pg-frontend/src/Pages/Auth): ui screens · Login and registration flows. · `frontend/pg-frontend/src/Pages/Auth`
- [Marketplace screens](https://github.com/vishalyadav0987/pg-finder/tree/master/frontend/pg-frontend/src/Pages/Home): ui screens · Home, search, listings, wishlist, trips, reservations, and hosting flows. · `frontend/pg-frontend/src/Pages/Home`
- [Shared UI](https://github.com/vishalyadav0987/pg-finder/tree/master/frontend/pg-frontend/src/Components): components · Reusable navigation, cards, media, and loading components. · `frontend/pg-frontend/src/Components`
- [Styles](https://github.com/vishalyadav0987/pg-finder/tree/master/frontend/pg-frontend/src/Styles): scss/css · Component-oriented styling for the frontend. · `frontend/pg-frontend/src/Styles`
- [Category data](https://github.com/vishalyadav0987/pg-finder/blob/master/frontend/pg-frontend/src/catDB.jsx): local data · Client-side category metadata used by the UI. · `frontend/pg-frontend/src/catDB.jsx`

### Backend

Express API, MongoDB models, and upload storage.

- [Express API](https://github.com/vishalyadav0987/pg-finder/blob/master/server/index.js): node service · API entry point that wires middleware, routes, and startup. · `server/index.js`
- [Auth routes](https://github.com/vishalyadav0987/pg-finder/blob/master/server/Routes/authRoutes.js): http routes · Login and register endpoints. · `server/Routes/authRoutes.js`
- [User routes](https://github.com/vishalyadav0987/pg-finder/blob/master/server/Routes/UserRoute.js): http routes · User profile and identity-related endpoints. · `server/Routes/UserRoute.js`
- [Listing routes](https://github.com/vishalyadav0987/pg-finder/blob/master/server/Routes/PageListingRoute.js): http routes · Property and listing endpoints. · `server/Routes/PageListingRoute.js`
- [Booking routes](https://github.com/vishalyadav0987/pg-finder/blob/master/server/Routes/BookingRoute.js): http routes · Reservation and trip endpoints. · `server/Routes/BookingRoute.js`
- [Auth controller](https://github.com/vishalyadav0987/pg-finder/blob/master/server/Controllers/AuthController.js): controller · Handles authentication and token issuance. · `server/Controllers/AuthController.js`
- [User controller](https://github.com/vishalyadav0987/pg-finder/blob/master/server/Controllers/UserController.js): controller · Handles user data and account operations. · `server/Controllers/UserController.js`
- [Listing controller](https://github.com/vishalyadav0987/pg-finder/blob/master/server/Controllers/PageListingController.js): controller · Handles property CRUD and listing retrieval. · `server/Controllers/PageListingController.js`
- [Booking controller](https://github.com/vishalyadav0987/pg-finder/blob/master/server/Controllers/BookingController.js): controller · Handles reservations and booking lifecycle. · `server/Controllers/BookingController.js`
- [User model](https://github.com/vishalyadav0987/pg-finder/blob/master/server/modals/UserSchema.js): mongo model · User schema and persisted identity data. · `server/modals/UserSchema.js`
- [Listing model](https://github.com/vishalyadav0987/pg-finder/blob/master/server/modals/PageListingSchema.js): mongo model · Property/listing schema. · `server/modals/PageListingSchema.js`
- [Booking model](https://github.com/vishalyadav0987/pg-finder/blob/master/server/modals/BookingSchema.js): mongo model · Reservation and booking schema. · `server/modals/BookingSchema.js`
- [MongoDB](https://github.com/vishalyadav0987/pg-finder/blob/master/server/connectDB/connect.js): database · Primary persistence layer. · `server/connectDB/connect.js`
- [Uploads](https://github.com/vishalyadav0987/pg-finder/tree/master/server/public/uploads): file storage · Public storage for uploaded listing media. · `server/public/uploads`

### Other components

- **Browser**: client · User-facing marketplace UI.

## Connections

- Browser → App shell: opens · Users load the client app.
- App shell → Routes: mounts · React entry mounts the app shell.
- Routes → Redux store: uses · Screens read and update shared state.
- Redux store → State slice: stores · Central store is built from shared state logic.
- Routes → Auth screens: routes · Auth screens are part of the client navigation.
- Routes → Marketplace screens: routes · Core marketplace screens are part of the client navigation.
- Marketplace screens → Shared UI: composes · Pages reuse shared UI components.
- Auth screens → Shared UI: composes · Auth views reuse shared UI elements.
- Shared UI → Styles: styled by · Components are backed by dedicated CSS/SCSS.
- Marketplace screens → Category data: reads · Category browsing uses local category metadata.
- App shell → Express API: api calls · Client requests data from the backend API.
- Express API → Auth routes: registers · API entry mounts auth endpoints.
- Express API → User routes: registers · API entry mounts user endpoints.
- Express API → Listing routes: registers · API entry mounts listing endpoints.
- Express API → Booking routes: registers · API entry mounts booking endpoints.
- Auth routes → Auth controller: delegates · Auth requests are handled by the auth controller.
- User routes → User controller: delegates · User requests are handled by the user controller.
- Listing routes → Listing controller: delegates · Listing requests are handled by the listing controller.
- Booking routes → Booking controller: delegates · Booking requests are handled by the booking controller.
- Auth controller → User model: reads/writes · Authentication works with user records.
- User controller → User model: reads/writes · User operations persist to the user model.
- Listing controller → Listing model: reads/writes · Listing operations persist to the listing model.
- Booking controller → Booking model: reads/writes · Booking operations persist to the booking model.
- User model → MongoDB: persists · MongoDB stores user data.
- Listing model → MongoDB: persists · MongoDB stores listing data.
- Booking model → MongoDB: persists · MongoDB stores booking data.
- Listing controller → Uploads: stores media · Listing creation and updates may write uploaded assets.
- Marketplace screens → Auth controller: auth flow · Login and registration feed token-based access.
- Marketplace screens → Listing controller: browse/manage · Listing screens consume property and host data.
- Marketplace screens → Booking controller: bookings · Trip and reservation screens consume booking data.