Web-Based Systems Development: SPA Application Project, Semester 1

This document presents a comprehensive solution for a web-based systems development project, specifically a Single Page Application (SPA) designed as a blogging website. The application is built using a modern approach, bundling all necessary functionalities. The project's structure includes 'server' and 'spa_app' folders, each serving distinct roles in the backend and frontend, respectively. The backend utilizes Node.js with dependencies managed by Node Package Manager (NPM), while the frontend employs Angular and interacts with the server through an API. Styling is implemented using Bootstrap and custom CSS, ensuring responsiveness and user-friendliness. The application allows users to view and post content, with user authentication required for posting. The backend runs on localhost:5000, and the client runs on localhost:4200. The solution includes details on setting up the server and client, and the use of a database file. The submission includes the SPA structure, including node libraries and folders, along with a style guide in PDF format.

Running head: WEB-BASED SYSTEMS DEVELOPMENT
Web-Based Systems Development
Name of the Student
Institution Affiliation

WEB-BASED SYSTEMS DEVELOPMENT
Introduction
SPA, Single Page Application, is the most common and modern way of building rich and
robust websites. It ships along several merits for it is fully bundled together with all the necessary
functionalities required for an application, ( ). This application is also a SPA. The application allows
its users to view content as well as post them.
Project Structure
As pointed outlined above, the application is fully bundled with all the basic functionalities.
The application has the root folder, SPA_SITE. The folder contains two more folders: server and
spa_app. Each of these folders serves a different purpose but they finally depend on each other for
the complete functionality of the application. Beginning with the server folder. This folder holds all
the folders and files required by the back end of the application. Node_Modules, is a folder in the
server directory. The folder holds all the dependencies that the application needs for its back end.
Since the application is built on Node Package Manager, any additional packages or dependencies
get added to the Node_Module folder automatically. Besides, the server folder has folders for
routing, models and other static content. However, since there is a front end, the folders for static
content are not in use for the server-side.
The front side is handled inside the spa_app folder. There are a lot of similarities between
these two folders since both depend on the Node Package Manager for there creation. The spa_app
folder has the Node_Module folder just as the server. This folder serves the same purpose as the one
in the server directory. Unlike the server-side, the front end is responsible for rendering views to the
browser. The server side provides an API, Application Programming Interface, for the front end to
send and receive requests. The front end, therefore, has different routes for making different
requests to the server.
Style guidelines
Style is an aspect that has a lot of weight, especially in the front end. The application
carefully observed styling. Bootstrap, a CSS framework, is used alongside other customized

WEB-BASED SYSTEMS DEVELOPMENT
Cascading Style Sheets where necessary. Bootstrap is chosen for it is faster to implement and
already has functionalities for making an SPA responsive. The major fonts applied in this SPA are
Arial, Helvetica, and Sans-serif. The application is intended to be simple and user-friendly. Using
the Chrome developer tools, the application is proved to respond well in different screen sizes. It is
therefore very responsive. Besides, the SPA provides effects such as hover, focus gained. It,
therefore, easier for the user to understand and navigate through it easily.
Functionality
As outlined in the first sections, the application allows users to view contents as well as post
them. The application requires that users get signed up before they can post content. However, any
other users whether or not signed in, can view contents and navigate through the site. These
functionalities are implemented using two frameworks: Angular for the front end and Express for
the back end. The other files, Cascading Style Sheets, aids the process by making the appearance of
the SPA good. It is important to note that since these are two different frameworks running on
Node, they must have different ports. The server is running on localhost:5000 whereas the client
runs on localhost:4200. For the two to communicate, a linking script is provided under the client-
side. This makes it easier to run the application. To start the server, the computer should have
nodemon installed. It is a Node Package. If present, on the terminal type: nodemon server.js. Open
another separate terminal for the client and type: npm start. Besides, the php, myqsl server should
also be running to allow the application access to the database. A database file is attached.