Welcome to the Vandore Website Wiki

Relevant source files

The following files were used as context for generating this wiki page:

• package.json
• server.js
• stackbit.config.ts
• properties.html
• about.html
• contact.html
• 404.html
• css/custom.css

This document provides a technical overview of the Vandore Heritage website, a static real estate project. The website is designed to showcase properties and is built using standard web technologies, served by a lightweight Node.js server. Content for the site is managed through a Git-based CMS approach, configured via Stackbit.

The architecture is straightforward, consisting of a static frontend composed of HTML, CSS, and JavaScript files, and a simple backend server responsible for serving these files. This wiki details the project's structure, backend server logic, frontend components, and content management strategy.

Sources: package.json, server.js, stackbit.config.ts

System Architecture

The project is composed of two primary parts: a static frontend and a simple Node.js backend. Content is managed externally via Stackbit, which interfaces with the Git repository to update content stored in JSON files. The Node.js server reads these static files and serves them to the user's browser.

This diagram illustrates the high-level architecture of the system.

Backend: Node.js Server

The backend is a minimal HTTP server built with Node.js's native http module. Its sole responsibility is to serve static files from the project's root directory.

Sources: server.js

Request Handling

The server listens for incoming HTTP requests and maps the URL to a file path on the server's file system.

1. The root URL (/) is automatically mapped to index.html.
2. For other requests, it constructs a file path from the request URL (e.g., /css/custom.css becomes ./css/custom.css).
3. It determines the correct MIME type for the requested file based on its extension.
4. If the file is found, it's served with a 200 OK status.
5. If the file is not found (ENOENT error), the server attempts to serve the custom 404.html page with a 404 Not Found status.
6. For any other server-side errors, it returns a 500 Internal Server Error status.

The following diagram shows the request flow within server.js.

Supported MIME Types

The server supports a predefined list of MIME types to ensure browsers correctly interpret the served files.

Extension	MIME Type
.html	text/html
.css	text/css
.js	text/javascript
.json	application/json
.png	image/png
.jpg	image/jpeg
.svg	image/svg+xml
.ico	image/x-icon
.woff	font/woff
.woff2	font/woff2

Sources: server.js:7-20

Frontend Structure

The frontend is built with static HTML, styled with Bootstrap and custom CSS, and enhanced with JavaScript for interactivity.

Main Pages

The site consists of several key HTML pages that define its structure and content.

File	Purpose
index.html	The main landing page of the website.
about.html	Provides information about the company.
properties.html	Lists available properties with filtering.
contact.html	Contains contact information and a contact form.
404.html	Custom page for "Not Found" errors.

Sources: about.html, properties.html, contact.html, 404.html

Styling

Styling is handled by a combination of pre-defined CSS files and a custom stylesheet. The properties.html page, for example, includes a filter bar with specific styles defined in css/custom.css to match the "Vandore Heritage" brand. These styles cover form controls, buttons, and responsive layouts for the filter component.

Sources: css/custom.css:3-90, properties.html:9-11

Content Management with Stackbit

The project uses Stackbit for content management, leveraging a Git-based approach. The configuration in stackbit.config.ts defines the content models and how they map to the website's pages.

Sources: stackbit.config.ts

Content Models

Two primary content models are defined: Page and Property.

• Page: A generic model for standard pages like "About Us" or "Contact". It includes fields for title, hero content, and generic content sections.
• Property: A specific model for real estate listings, containing details like price, address, description, and specifications.

This class diagram shows the structure of the Stackbit content models.

Page Model Fields

Field	Type	Description
title	string	The page title.
heroHeading	string	Main heading in the hero section.
heroSubheading	text	Subheading text in the hero section.
sections	list	Generic sections with a heading and text.
properties	list	A list of property objects.

Sources: stackbit.config.ts:16-52

Property Model Fields

Field	Type	Description
title	string	The property title.
price	string	The asking price.
address	string	The property's location.
description	text	A detailed description of the property.
bedrooms	number	Number of bedrooms.
bathrooms	number	Number of bathrooms.

Sources: stackbit.config.ts:109-121

Site Mapping

The siteMap function in the Stackbit configuration maps the JSON content documents from the content/ directory to the final static HTML URLs. For example, a Page model stored at content/pages/about.json is mapped to the /about.html URL.

Sources: stackbit.config.ts:126-147

Key Features

Property Filtering

The properties.html page features a client-side filtering system for property listings. Users can filter by:

• Location: A text search for city, district, or neighborhood.
• Price Range: Minimum and maximum price.
• Bedrooms: A selection of bedroom counts.

The filter interface is responsive, appearing as a full bar on desktop and collapsing into an off-canvas drawer on mobile devices.

Sources: properties.html:223-305, css/custom.css:93-112

Contact Form

The contact.html page includes a contact form with fields for Name, Email, and Message. The form uses Bootstrap's client-side validation (needs-validation) to ensure required fields are filled out correctly. Upon submission, success or error messages are displayed to the user as toast notifications.

Sources: contact.html:245-285

Project Setup and Execution

The project is run using a Node.js server. The package.json file defines the scripts to start the application.

To run the server locally:

1. Install dependencies (though none are listed in dependencies or devDependencies).
2. Run the start command:

   npm start
   

   or

   npm run dev
   

3. The server will be accessible at http://localhost:8000.

Both start and dev scripts execute node server.js.

Sources: package.json:5-8, server.js:57-59