Description

Objective:

Build upon Assignment 2 by adding a custom landing page with links to sites, as well as an “about” page and custom 404 error page.  Additionally, we will be updating our server.js file to support more dynamic routes, status codes and static content (css).  Finally, we will publish the solution using Vercel.

If you require a clean version of Assignment 2 to begin this assignment, please email your professor.

 

NOTE: Please reference the sample: https://as3-322-sample.vercel.app/ when creating your solution.  The UI does not have to match exactly (e.g., the font, size, theme, the sites shown in the home page cards, etc.), but the basic functionalities and UI components must be implemented as shown in the sample app using the code or approaches discussed in class, e.g., navigation bar with region dropdown, card, layouts of the page and the content in the card, etc…

 

Part 1: Installing / Configuring Tailwind CSS

 

For this assignment, we will be adding multiple pages, including a landing page with links to some of your sites.  To make these appealing to the end user, we will be leveraging our knowledge of Tailwind CSS.  With your Assignment 2 folder open in Visual Studio Code, follow the follow the steps identified in Tailwind CSS & daisyUI to set up Tailwind CSS, ie:

 

• Installing the “tailwindcss” command as a “devDependency”
• Installing “@tailwindcss/typography” and “daisyui”
• Initializing tailwindcss
• Creating a “tailwind.css” file in /public/css
• Editing tailwind.config.js to ensure your .html files are watched during the build and “daisyui” / “@tailwindcss/typography” are added as plugins. Also, you may add a “theme” – the sample uses “fantasy”, but you’re free to use whatever you like.
• Adding a “tw:build” script to your package.json
• and finally building a main.css file.

 

 

Part 2: Adding .html Files

 

Now that we have our primary “main” css file in place, we can focus on creating the “views” for our application.  At the moment, this is home.html (“/”), about.html (“/about”) and 404.html (no matching route).  These must be created according to the following specifications:

 

NOTE:  Before you begin, do not forget to mark the “public” folder as “static”, ie: app.use(express.static(__dirname + ‘/public’)) in your server.js file

 

File: views/home.html

 

• Must reference “/css/main.css” (ie: compiled tailwindCSS)
• Must have a <title> property stating something like “National Historic Sites”
• Include a responsive navbar with the following items:
  • “National Historic Sites ” as the large text (left) with the flag image which links to “/”
  • Link to “/about” with text “About”
  • Dropdown with Label / Summary “Region”
    • The items in this dropdown should be links to all regions that are available in your dataset in the form: <a href=”/sites?region=someRegion“>someRegion</a>
  • Have an element with class “container mx-auto“, containing:
    • A “hero” daisyUI component featuring some text inviting users to explore the collection and a link styled as a “btn” that links to “/sites”
    • A responsive grid system containing 3 columns, each containing a “card” component featuring one of the items from the sites (hard-coded in the html). Each card must contain:
      • An image of the site at the top of the card
      • The “site” from the site object as card title
      • The “description” from the site object
      • The site’s “date” and “dateType” (in parentheses) after the text “Date: “
      • The site’s “location” and “provinceOrTerritoryCode” after the text “Location: “
      • A link styled as a “btn” that links to “/sites/site_id” where site_id is the siteId property of the site object shown in the card, ie “/sites/ON016” for the site “Public Grounds of the Parliament Buildings”

 

File: views/about.html

 

This file should follow the same layout as views/home.html, ie: reference main.css,  have a <title> property and identical navbar.  However, the navbar must have the text “About” highlighted by using the “active” class, ie:

 

<a class=”active” href=”/about”>About</a>

 

Additionally, this view should feature:

 

• an element with class “container mx-auto“, containing:
  • A “hero” daisyUI component containing the header “About” with some additional text, ie “All about me”, etc.
  • A responsive grid system containing 2 columns:
    • The left column should show an image that you like / represents you.
    • The right column should be a short blurb about yourself (hobbies, courses you’re taking, etc). Your full name must be displayed in this column.

 

 

File: views/404.html

 

Once again, this file should follow the same layout as views/home.html, ie: reference main.css,  have a <title> property and identical navbar.

 

Additionally, this view should feature some kind of 404 message / image for the user.  The sample uses a “hero” daisyUI component

 

Part 3: Updating server.js

 

To support dynamic routes, status codes and our custom 404 page, we must make the following changes to our server.js code from Assignment 2:

 

• Update the “/” route to respond with the “/views/home.html” file
• Add an “/about” route that responds with “/views/about.html” file
• Update the “/sites” route such that:
  • If there is a “region” query parameter present, respond with site data for that region, ie “/sites?region=Central Canada” will respond with all sites in Central Canada (in the format of JSON array of site objects)
  • If there is a “provinceOrTerritory” query parameter present, respond with site data for that provinceOrTerritory, e.g. “/sites?provinceOrTerritory=Ontario” will respond with all sites in Ontario province (in the format of JSON array of site objects). To implement this, you need to create a function getSitesBySubRegionName(name) in your data-service.js module.

 

• If there is not a “region” query parameter present, respond with all sites from site dataset
• If any errors occurred, return the error message with the “404” status code

• Update the “/sites/id-demo” route such that:
  • Instead of returning the hard-coded site from assignment 2, it should instead return the site with a site “siteId” value that matches the value after “/sites/”. For example, “/sites/ON016” should return the site with “siteId” ON016, ie the “Public Grounds of the Parliament Buildings”
  • If any errors occurred, return the error message with the “404” status code
• Delete the “/sites/region-demo” route – we no longer need this one, since “/sites” now supports the “region” query parameter
• Add support for a custom “404 error“. However, instead of returning text, respond with the 404 status code and the “/views/404.html” file

 

Part 4: Deploying your Site

 

Finally, once you have tested your site locally and are happy with it, it’s time to publish it online.

 

Check the “Vercel Guide” for more information about the deployment process.

 

Assignment Submission:

• Add the following declaration at the top of your js file:

/********************************************************************************

*  WEB322 – Assignment 03

*

*  I declare that this assignment is my own work in accordance with Seneca’s

*  Academic Integrity Policy:

*

*  https://www.senecacollege.ca/about/policies/academic-integrity-policy.html

*

*  Name: ______________________ Student ID: ______________ Date: ______________

*

*  Published (web app) URL:

*

********************************************************************************/

• Compress (.zip) your assignment folder and submit the .zip file to My.Seneca under
  Assignments -> Assignment 3

Important Note:

• NO LATE SUBMISSIONS for assignments. Late assignment submissions will not be accepted and will receive a grade of zero (0).
• Submitted assignments must run locally, ie: start up errors causing the assignment/app to fail on startup will result in a grade of zero (0)for the assignment.