Getting Started

Relevant source files

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

• package.json
• server.js
• stackbit.config.ts
• js/submit-form.js
• properties.html
• css/custom.css
• contact.html

This document provides a technical overview of the vandore-website-metera project, a static real estate website. The project is built with a simple Node.js backend for serving static files, a frontend composed of HTML, CSS, and JavaScript (utilizing jQuery and Bootstrap), and integrates with Stackbit for content modeling and management. The purpose of this guide is to help developers understand the project's architecture, key components, and how to run it locally.

The core of the project is a vanilla Node.js server that handles HTTP requests for static assets. The website's content structure is defined through Stackbit's configuration, which models data types like pages and properties. Client-side interactivity, such as form submissions and property filtering, is managed by custom JavaScript files.

Project Setup and Execution

The project relies on a simple Node.js environment. There are no external production or development dependencies listed in package.json, indicating a lightweight setup.

Sources: package.json:9-10

Scripts

The following scripts are available to run the application:

Script	Command	Description
dev	node server.js	Starts the local development server.
start	node server.js	Starts the server, typically for production.

Sources: package.json:5-8

To run the project, execute the following command in your terminal:

npm start

This will start the server on http://localhost:8000.

Sources: server.js:4, server.js:70-72

Backend Architecture

The backend consists of a single file, server.js, which implements a basic static file server using Node.js's built-in http and fs modules.

Sources: server.js

Request Handling Flow

The server listens for incoming HTTP requests and serves the corresponding files from the project's root directory.

The diagram below illustrates the server's request handling logic.

Key Logic:

• It maps the root URL (/) to index.html.
• It determines the correct Content-Type header based on the file extension using a predefined mimeTypes object.
• If a requested file is not found (ENOENT error), it attempts to serve a custom 404.html page.
• If 404.html is also missing, it returns a generic "404 - Page Not Found" message.
• For other file-read errors, it returns a 500 server error.

Sources: server.js:23-68

Supported MIME Types

The server is configured to handle a variety of common web file types.

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
.woff	font/woff
.woff2	font/woff2

Sources: server.js:7-21

Frontend Architecture

The frontend is built with standard HTML, CSS, and JavaScript. It uses libraries like jQuery and Bootstrap for DOM manipulation, styling, and UI components.

Sources: properties.html:565-575, about.html:437-447, contact.html:456-466

Client-Side Scripting

Custom logic for UI interactions is primarily located in the /js directory.

• js/script.js: Contains general-purpose scripts, including tab switching, scroll effects, and number animations.
• js/submit-form.js: Manages all form submissions, including contact forms and newsletter subscriptions. It provides client-side validation and feedback.
• css/custom.css: Contains custom styles for components like the property filter bar, chips, and responsive adjustments.

Sources: js/script.js, js/submit-form.js, css/custom.css

Form Submission

The js/submit-form.js script handles form submissions using jQuery. It intercepts the submit event, performs validation, and provides user feedback via toast messages.

The sequence diagram below shows the flow for submitting a contact form.

This logic is applied to forms with the .form class, such as the one on the contact page. The script distinguishes between a contact form and a newsletter subscription based on a hidden input field action.

Sources: js/submit-form.js:3-50, contact.html:276-313

Content Management with Stackbit

The project uses Stackbit to define and manage content models. The configuration is located in stackbit.config.ts.

Sources: stackbit.config.ts

Content Models

Two primary data models are defined: Page and Property. These models dictate the structure of the JSON files located in the content/ directory.

The relationship between these models is shown in the diagram below.

Page Model

The Page model is a generic type for most pages on the site (e.g., about, contact).

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 content blocks (heading + text).
properties	list	A list of property cards for listing pages.
team	list	A list of team members.
faqs	list	A list of frequently asked questions.
blogPosts	list	A list of blog post cards.

Sources: stackbit.config.ts:15-88

Property Model

The Property model represents individual real estate properties.

Field	Type	Description
title	string	The property's title or name.
price	string	The listed price.
address	string	The property's address.
description	text	A detailed description of the property.
image	string	URL or path to the property's main image.
bedrooms	number	The number of bedrooms.
bathrooms	number	The number of bathrooms.
area	number	The total area (e.g., in square meters).

Sources: stackbit.config.ts:90-107

Site Mapping

The siteMap function in stackbit.config.ts is responsible for mapping the JSON content documents to the final static HTML URLs. It filters documents by their modelName and constructs the appropriate urlPath and pageSrc.

• Pages: A Page document like content/pages/about.json is mapped to /about.html.
• Properties: A Property document like content/properties/historic-villa.json is mapped to /properties/historic-villa.html and uses property-detail-template.html as its source template.

Sources: stackbit.config.ts:117-140