How vishalyadav0987/pg-finder works
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: Home Marketplace screens · index.js Express API · App.jsx Routes · PageListingController.js Listing controller
Components 24
Frontend
Vite React client for browsing, auth, and booking flows.
- App shell · Bootstraps the React app and global layout.
frontend/pg-frontend/src/main.jsx - Routes · Top-level app composition and screen routing.
frontend/pg-frontend/src/App.jsx - Redux store · Central client state for session and marketplace data.
frontend/pg-frontend/src/redux/store.js - State slice · Shared Redux state and reducers.
frontend/pg-frontend/src/redux/state.js - Auth screens · Login and registration flows.
frontend/pg-frontend/src/Pages/Auth - Marketplace screens · Home, search, listings, wishlist, trips, reservations, and hosting flows.
frontend/pg-frontend/src/Pages/Home - Shared UI · Reusable navigation, cards, media, and loading components.
frontend/pg-frontend/src/Components - Styles · Component-oriented styling for the frontend.
frontend/pg-frontend/src/Styles - Category 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 · API entry point that wires middleware, routes, and startup.
server/index.js - Auth routes · Login and register endpoints.
server/Routes/authRoutes.js - User routes · User profile and identity-related endpoints.
server/Routes/UserRoute.js - Listing routes · Property and listing endpoints.
server/Routes/PageListingRoute.js - Booking routes · Reservation and trip endpoints.
server/Routes/BookingRoute.js - Auth controller · Handles authentication and token issuance.
server/Controllers/AuthController.js - User controller · Handles user data and account operations.
server/Controllers/UserController.js - Listing controller · Handles property CRUD and listing retrieval.
server/Controllers/PageListingController.js - Booking controller · Handles reservations and booking lifecycle.
server/Controllers/BookingController.js - User model · User schema and persisted identity data.
server/modals/UserSchema.js - Listing model · Property/listing schema.
server/modals/PageListingSchema.js - Booking model · Reservation and booking schema.
server/modals/BookingSchema.js - MongoDB · Primary persistence layer.
server/connectDB/connect.js - Uploads · Public storage for uploaded listing media.
server/public/uploads
Other components
- Browser · User-facing marketplace UI.
Connections 30
- 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.