Created by:

• Eric Duffield
• Liam Kopke
• Pleasure Ghotra

Our home page is the core of our site. It prompts the user to rent or learn more about us.

Its features are as follows:

1. Hero Image

   • Prompts the user to rent now

2. Rental examples

   • Forces the user to see our rentals

3. Sneak Peak at the about us

   • Makes our site feel more human

4. Locations

   • Added for flare

The page allows a user to rent an item from our inventory.

In order to access this page, the user must be logged in from the login page.

Once inside, the user can expect to find two categories of items. Items related to skiing and items related to snowboarding. These two categories of items are split down the middle with the left pertaining to the former and the right the latter.

Once the user picks the item they wish to rent, they just have to fill out the form and select the rent button.

The rental forms is as follows:

• Date

  • The user has to input a date
  • This is limited so that the date cannot be smaller than current date

• Time

  • The user has to input a time
  • Duration is picked from a dropdown
    • 4 hours
    • 8 hours
  • The time is limited so that a rental can only occur within operating hours
    • Depending on the duration of the rental, the maximum time changes to:
      • 4 hours: 18:00
      • 8 hours: 14:00
    • 08:00 being opening time
    • 22:00 being closing time

• Submit

  • If all of the fields are valid, then the site makes a request to the server.

  • The model checks that all the fields are good.

  • If all the fields are good, it checks if there is a matching item available at that time

  • If an item is found, it creates the rental under that users id

The name of our db file is skiEquipment_db

Here are all the npm packages we used:

Our of those, the ones we did not use in class include:

This package allows User to send us an email from the footer

This package allows two dates to be easily be added together in one command

We have two different headers to better display, both of which have our logo, which redirects the user back the our home page

Our footer allows the user to know more about us, contact us or access the different parts of the site.

Personalization: Dark Mode / Light Mode switch

Socials: Links to our other platforms

Contact Us: Sends an email to the dev team

Location: Address where people can come see us

Pages: Links to all the pages of our site depending on the logged in users' type. Changes depending on which user is logged in.

Admin:

User:

The login page allows the user to log in to their account.

The site verifies that the inputted credentials match those stored in the database.

Any error is displayed over the form.

Once a user is logged in, the header will display account instead of login

Allows a user to logout. This clears all session cookies.

Users will find this feature in the Account page whilst Admins will find it instead of the Account page

In the footer, a Dark Mode / Light Mode button can be found that switches the theme of the site. This choice is saved as a cookie so that the choice is constant across all pages.

All errors on the site are graciously handled and success / error messages are displayed in the according window. If a user tries to access a page they are not authorized to access, they will be prompted to login.

If a user tries to access a page that does not exist, an error message will show, and they can then go to a correct page.

Our header allows the user to access all the pages they have access to.

Home Page: Call to actions to all parts of our site

Rentals Page: The core reason for our site

About Us: Information about our team to make the site feel more human

User Pages:

1. Account: Displays account information
2. Login: Allows the user to log in or sign up

Only difference from main footer is that the links are for the same as the same as in the user header

This page allows the user to get to know more about our team as well as visit some of our personal links. They also get to see who is behind the website.

Account will only display if a user is logged in

The account page lists all of the user fields

As well as every rental that user has

The signup page, accessed from the login page allows a user to create a new account. Any account made from this form will be a user account. Admin accounts can only be created from the admin page

During the Sign Up process, automated checks are made and displayed on the side of the form to show validity to the user before they submit.

Our header allows the admin to access all the pages they need.

List: Displays all of the following

• Items
• Item Types
• Users

Items: Allows the admin to add, edit or delete an item from the inventory

Item Types: Allows the admin to add, edit or delete an item type from the database

Users: Allows the admin to add, edit or delete a user from the database

Logout: Allows the admin to logout

Only difference from main footer is that the links are for the same as the same as in the admin header

Gets and displays all of the following to the screen:

• Items

  • Id

  • Description

  • Cost

  • Item Type

• Item Types

  • Name

  • Id

• Users

  • Id

  • First Name

  • Last Name

  • Credit

  • User Type

Allows the admin to add, edit or delete items from the forms. All the values are validated and results are displayed above the forms.

Allows the admin to add, edit or delete item types from the forms. All the values are validated and results are displayed above the forms.

Allows the admin to add, edit or delete users from the forms. All the values are validated and results are displayed above the forms.