System Architecture Design

The system architecture design depicts the structure of a desktop application built with Electron, which is used to generate websites based on user input. Below is a description of each component.

User

This represents the end-user interacting with the application. The user provides input to the application through a graphical user interface.

Frontend

The application's frontend is made up of several key technologies:

• React: A JavaScript library, used to create the user interface.
• Electron: A JavaScript framework used to make the Website Generator a desktop application. It acts as a container for the React application, providing system-level access and additional native functionalities.
• JS/HTML/SCSS: Standard web technologies used for creating the content, styling, and scripting of the frontend.
• The frontend communicates with the backend by sending data and images through IPC (Inter-Process Communication).

Backend

Backend Server is built using Node.js, a JavaScript runtime executing the application's serve-side code. It processes the data sent from the frontend – saves it to JSON files in the template, and saves images to the specified directory.

Storage within the Website Template

The storage is situated within the website template, as the data required to stored is the data to be displayed on the generate website. It is structured as follow:

JSON Files
These files are located within the React application's src/pageContent directory and are used to store the website's textual and configuration content. The JSON files are essential for the Content Management System (CMS) to define and manage the site's structure and content dynamically. The specific JSON files utilized by the CMS include:

• homePageContent.json - Contains data for the homepage.
• sharedContent.json - Stores content shared across different pages.
• faqPageContent.json – Stores the FAQ page data.
• manualPageContent.json - Stores the manual page content.
• videoPageContent.json – Stores the data for the video page.

Example of how data is structured in the JSON file:

          "welcomeSection": {
            "header": "In-Air Multitouch Support Page",
            "description": "Welcome to the future of computer interaction! UCL MotionInput…",
            "img": "welcome_img.png"
          },
        

Image Store
This is a designated storage area located within the same src/pageContent directory, specifically in the img/ subdirectory. It is intended for all images that are uploaded by the user, to be displayed on the website. Backend processes these images and saves them to this directory. Relative paths to the images are stored in the JSON files.

Data Flow

• User Interaction: The flow starts with the user interacting with the frontend application.
• Send Data and Images Through IPC: The frontend collects the user's input and sends it to the backend through IPC. This includes both the textual data (in the form of JSON) and image files.
• Store Data: The backend receives the data and stores it in the storage system.
• Store Images: Similarly, the backend stores the images uploaded by the user in the image store.