top of page

Express portfolio authentication

Need help with Web Development or Project Help? At Codersarts we offer 1:1 session with expert, Code mentorship, Course Training, and on-going development projects. Get help from vetted Machine Learning engineers, mentors, experts and tutors.


Using the Portfolio Web Site you developed in Assignment 1, restructure the web site to include a secure section of you site that displays a list of contacts.

Express portfolio authentication
Express portfolio authentication

Instructions :

This Secure Area must include the following components – a user Login View, a Business Contacts List View and an Update View.

  1. In addition to your site’s main Nav Bar and page template components, your Login View should include the following components

    1. A Form that includes a username field, a password field and a Login Button.

    2. The application database will contain a user collection. The single document in the collection will include your username, password, email address and other relevant information. The username and password credentials will be used for authentication. No Registration form is required

    3. If the user is authenticated, he will be taken to the Business Contacts List View, otherwise he will be redirected back to the Login View if his username and/or password is incorrect

    4. If a user attempts to access the secure area of your site, they should be redirected back to the Login View

  2. Your Business Contacts List View should include the following components

    1. An alphabetically sorted list of contacts should appear on this page. The connection to the database you created will display all the contact data in a table. The table will only include The Contact Name, Contact Number and Email Address

    2. Include an Update Button and a Delete Button at the end of each Row of the Table. The Update button links to the Update View. The Delete Button removes the contact from the database

  3. The Update View will include the following components

    1. A Form will allow the user to update any contact details (Name, Contact Number, Email Address, etc.)

    2. The Form will include a Delete Button that will remove the user from the database and return the user to the Contact List View

    3. The Form will include a Cancel Button that will return the user to the Contact List View

  4. Include Internal Documentation for your site

    1. Ensure you include a comment header for your CSS and JavaScript files that indicate: the File name, Student’s Name, StudentID, and Date

    2. Ensure you include a section header for all of your HTML structure, CSS style sections, and any JavaScript functions

    3. Ensure all your code uses contextual variable names that help make the files human-readable

    4. Ensure you include inline comments that describe your GUI Design and Functionality. Note: Please avoid “over-commenting”

  5. Share your files on GitHub to demonstrate Version Control Best Practices and push your site to a cloud host

    1. Your repository must include your code and be well structured

    2. Your repository must include commits that demonstrate the project being updated at different stages of development – each time a major change is implemented

    3. You must deploy your site to your Cloud Server using git

  6. Create a Short Video presentation on YouTube or another streaming provider. You must include a short PowerPoint (or Google Slides) Slide Deck that includes a single slide to start your video

    1. The first (and only) Slide of your Slide Deck must include a current image of you (no avatars allowed) that is displayed appropriately on the page. You must also include your Full Name, Student ID, the Course Code, Course Name, and your Assignment information

    2. You will demonstrate your site’s functionality. You must show each page working properly

    3. You will describe the code in your app.js file that drives the functionality of your site

    4. Sound for your Video must at an appropriate level so that your voice may be clearly heard, and your screen resolution should be set so that your code and site details are clearly visible

    5. Your Short Video should run no more than 5 minutes


bottom of page