WEB322-Assignment 1 Solved

In this assignment, you will ONLY focus on building views for your website/web application. No database connectivity is required for Assignment 1.

 

REMINDER:

All back-end functionality MUST be done using Node JS and Express.

Your views MUST be created with Express-Handlebars

 
 

 

Specifically, you are ONLY required to implement the following: 

 

Features
 
Express web server set up
 

Create an Express web server that listens to incoming HTTP requests.

 

Route Handlers Implementation
 

Ensure that you create route handlers that will direct users to specific views when they navigate to the following routes:

●       Home 

●       Meals Package Page

●       Customer Registration

●       Login

 

Home Page
 

You are required to build a well-designed home page that consists of the following sections:

 

●       Header - The header MUST contain the logo of your website and could contain the navigation bar and any other content you deem necessary. 

 

●       A Navigation bar - The navigation bar can be within the header or defined as an entirely new area. It MUST have links that navigate visitors to a sign-up page and the login page.  Please note, instead of creating a separate page for the sign-up page and the login page, you can render it as modal pop-up boxes. 

 

●       A Hero Section- The section must have a prominent image or video element that is placed at the top of your pages, below the header and navigation section. Example:

 

Figure 1.1

                    

 

●       Content Section(s) - The sections MUST use a combination of grids, words, headings, and images with the sole purpose of highlighting some selling features of the website and the stellar service that they provide. See the below example:

 

Figure 1.2

  

 

●         - This section must display at least four (4) top meal packages, as shown in figure 1.3. Please note, for this Assignment, Assignment 1, the data for this section must be static, i.e. it will not be pulled from a database. However, you are required to define the data in a separate module (JavaScript file). Each meal package must display an image, title, price.

 

Figure 1.3

  

 

●       Footer - This section must include footer menu items, social media links, and any other information you deem necessary.

 

Meal Package Listing page
 

You are required to build a well-designed meal package listing page. This page must have at least 4 sample meal packages within a 4 column grid layout, as shown in the below image:

 

 

Figure 1.4

    

Note, every meal package must have an image, title, price, food category, number of meals in the package, synopsis of the content within the meals and a boolean attribute indicating if it is a top package or not. This view must also have a header, navigation, hero section, and footer like the home page. 

 

Like the Top Meal Package section, for this Assignment, Assignment 1, the data for this section must be static, i.e. it will not be pulled from a database. However, you are required to define the data in a separate module (JavaScript file).

 

Please be advised, you must create one separate module file to encapsulate all the static data “fake database data” for the Meal Package Listing page, and for the Top listing. This module/JavaScript file is going to represent the Model for your MVC application.

 
 
Registration Page
 

You are required to build a well-designed user registration form as shown in Figure1.5 . This can be implemented as an entirely new page or as a pop-up modal. In the event you implement this as a new page then you must ensure that the page maintains consistency regarding its structure, header, nav, hero section, footer, and etc as the home page.

 

Figure 1.5

  

 

 
 

 

 
 
Login Page
 

You are required to build a well-designed login form as shown in Figure1.6 . This can be implemented as an entirely new page or as a pop-up modal. In the event you implement this as a new page then you must ensure that the page maintains consistency regarding its structure, header, nav, footer, and etc as the home page.

Figure1.6

 

  

 

Reminder: All back-end functionality MUST be done using Node JS and Express.

Your views MUST be created with Express-Handlebars.  You must create one Model (JavaScript file) to encapsulate the static data (“fake database data”) for the Meal Package Listing Page, and the Top Meal Package section located on the home page.