The Problem

Clients need a ready‑to‑run real‑estate portal that lets agents publish listings, buyers browse properties, and administrators manage content—all without cobbling together separate front‑end and back‑end stacks.

What This Does

Hozn-RealEstate-Fullstack delivers a complete web platform. The frontend lives under src/ and is a Next.js application written in TypeScript/TSX (src/components/…, src/layouts/…). Styling mixes Tailwind, SCSS and a large static asset tree in public/assets/. The backend resides in real-estate-backend/ and is an Express server using Sequelize to talk to PostgreSQL (real-estate-backend/models/index.js sets up the ORM, JWT middleware lives in real-estate-backend/middleware/). Authentication, CRUD for listings, and admin dashboards are all wired through REST endpoints that the front‑end calls via Axios.

How It Is Wired

Execution starts at the two conventional entry points:

  • Frontend – next.config.js together with the scripts in package.json (typically npm run dev). Next.js builds the page tree, resolves routes in src/pages/, and renders components such as src/components/ListingDetails/listing-details-1/ListingDetailsOneArea.
  • Backend – real-estate-backend/models/index.js is the first file loaded when the server boots (npm start in the backend folder). It creates the Sequelize instance, loads all model definitions, and then real-estate-backend/app.js (not listed but implied) attaches route handlers (/api/auth, /api/listings, etc.) and starts listening.

The call graph shows 421 internal modules with 287 import edges and no circular dependencies. The most connected front‑end modules are the six ListingDetails*Area components; each is imported by a single parent (Ca = 1) but pulls in 11‑13 other modules (Ce ≈ 12), giving them an instability score of ≈ 0.92. These components therefore act as hubs: changes inside them can affect many downstream UI pieces.

A typical request flow is:

  1. Browser loads /properties/[id] → Next.js resolves the page in src/pages/properties/[id].tsx.
  2. Page component calls axios.get('/api/listings/:id').
  3. Express route defined in real-estate-backend/routes/listings.js receives the request, validates JWT via middleware, and invokes ListingController.findById.
  4. Controller uses the Sequelize model (real-estate-backend/models/listing.js) to query PostgreSQL, returns JSON.
  5. Axios resolves, and the UI component (ListingDetailsOneArea etc.) renders the data.

No circular imports means refactoring a hub component does not risk hidden feedback loops, but the high instability of those hubs suggests careful testing when modifying them.

How To Use It

# 1. Clone the repository
git clone https://github.com/moses-y/Hozn-RealEstate-Fullstack.git
cd Hozn-RealEstate-Fullstack

# 2. Install shared dependencies (frontend + backend)
npm ci          # respects package-lock.json

# 3. Start the backend (assumes a PostgreSQL instance is reachable)
#    Check real-estate-backend/.env.example for required vars.
cd real-estate-backend
npm start       # runs the Express server

# 4. In a separate terminal, start the frontend
cd ..
npm run dev    # launches Next.js in development mode

Configuration: The backend expects typical DB credentials (DB_HOST, DB_USER, DB_PASS, DB_NAME) and a JWT_SECRET. Those variables are referenced in the source but no concrete .env file is committed; create one based on real-estate-backend/.env.example (if present) or the Sequelize config.

Real‑World Use

A property‑portal SaaS could fork this repo, point the backend at a managed PostgreSQL instance, replace the static assets with brand‑specific logos, and expose the API behind a corporate gateway. Front‑end customisation would focus on the src/components/ library, especially the high‑instability ListingDetails*Area components.

Code Health & Issues

  • High – Cognitive Load – 60 files contain deep nesting (max indentation depth 16). Examples: src/layouts/headers/Menu/NavMenu.tsx, src/components/ListingDetails/listing-details-common/CommonBanner.tsx, src/components/homes/home-four/PropertyOne.tsx. Refactor by extracting inner blocks or using guard clauses.
  • Import Graph – 421 modules, 287 edges, 0 circular deps. No structural red‑flags.
  • Tests – 221 test files are present; CI is configured via Travis (.travis.yml not listed but CI flag is true).
  • Documentation – 703 markdown files, including a detailed README.
  • Missing – No Dockerfile, so containerisation must be added manually if required. No committed secrets detected.

The Bottom Line

The repo offers a functional full‑stack real‑estate platform with a clear separation between a Next.js front‑end and an Express/Sequelize back‑end. It is test‑covered and CI‑enabled, but several UI components suffer from excessive nesting, making future changes riskier. Teams that need a quick starter and are comfortable refactoring the identified hubs will find it usable; otherwise, allocate time for UI cleanup before extending the product.