Web代写 | COSC2758 Further Web Programming Assignment 2


1. Overview (you must read this first)

In this assignment, you will develop a full-stack web application to complete the front-end prototype built from
assignment 1. You are to use the following stacks:

• Front-end: ReactJS
• Middle-layer: Node.js & Express.js with Sequelize ORM
• Backend database: Cloud MySQL

You are not allowed to change technology stacks to suit your convenience, experience and/or knowledge. Using stacks
other than the ones mentioned above will FETCH A ZERO for the whole assignment.

The tasks are divided into four parts: PA (Pass), CR (Credit), DI (Distinction) & HD (High Distinction).

The DI & HD section tasks will require self-research, you will not get straight answers in the course
material. While we are happy to assist you on those tasks, most of the work and research must be
done by you. This is done on purpose to prepare for you future work and rigours of the IT industry.

If you find a specification open to interpretation, post a query identifying the specification in the corresponding discussion
board for assignment 2. Software development in real life does not come with a definitive roadmap and flowcharts
complete with instructions. More often than so, it is the job of the developer to clarify requirements from the client. For
the purpose of this assignment and course, the lecturer is considered as the client.

All of us have been affected by the unfortunate COVID-19 scenario and its aftermath. It is often hard to concentrate
and study; but as a student enrolled in this course, it is your responsibility to regularly attend lectorial, lab and
consultation session(s).

• Bring your questions to online discussion board, consultation sessions
• Watch the online recordings on a regular basis if you cannot attend the live sessions.
• Do NOT start the work on assignment at the last minute.
• Do NOT ask for last minute extensions, these are often rejected. Extensions can only be granted for personal
and medical reasons, provided you can supply some evidence.

3. Assessment details (READ THIS FIRST)

The senior student club committee has accepted the prototype of VC (Vibe Check) website and now recommends that
full stack version of website be developed. The committee recommends inclusion of extra features and constraints for
the VC website- a summary is presented here, you will find more details in Section 4: Tasks.

The extra features and constraints include-

The committee wants the developer to use a Cloud MySQL database for the backend purposes. All the user and any
other appropriate data for the website must be stored in the backend Cloud MySQL database
(rmit.australiaeast.cloudapp.azure.com). You have been emailed your username, password and access link to
phpMyAdmin- if you do not have these details, email Matthew Bolger at matthew.bolger2@rmit.edu.au

Two users cannot have the same username. Password must be stored in a hashed format in the database. Please do
not use MD5 as it is no longer considered secure by industry professionals

The full stack version of VC must be a multi-user website where users can follow and unfollow one or more other users.
Posting form must have an option for uploading photos.

User can now submit interactions on posts such as: like and dislike.

All user inputs must be sanitised to avoid XSS attacks.

VC website will have a separate admin portal for moderating posts and generating user statistics. Admin does not need
to login to access the portal ie no admin accounts exist. Admin dashboard is accessible via a separate Url to VC.

Codebase must be well-commented. Absense of sensible code commenting will lead to penalty of marks.

4. Tasks

Create a full-stack VC website with – ReactJS, Node.js, Express.js (with Sequelize ORM) & Cloud MySQL database.
Here is the architecture diagram for the website:

React front-end app talks to API defined in Node + Express layer via Axios library. API created by you in Node + Express
layer (middle layer) communicates with the backend database.

Create separate projects – one for React frontend app & one for Node + Express + Sequelize middle layer

The tasks are shown below:

PA part [23 marks]

a. (5 marks) Database schema

Create an ER (Entity-Relationship) diagram that will represent the database schema for the website. The
diagram should display the tables with the fields, keys, constraints and relationship(s) between the tables.
Think of these points- How many tables do I need? Which fields do I need in these tables? What data-types
should these fields use? What kind of relationships exist among these tables? Is the database normalized? (ie
avoid duplicated data, do not use too few or too many tables).

You can submit the diagram as an image or PDF file.

Create model files that represents the above tables, keys and constraints using Sequelize in the Node.js +
Express.js (middle layer) project.

b. (10 marks) Sign-up page

Implement the sign-up page from assignment 1. This time the user details are stored in the Cloud MySQL
database. The API in the middle layer should handle all the database operations. All the user (form) input must
be sanitised and validated on the React end.

c. (3 marks) Sign-in page

Implement the sign-in page with API handling authentication to verify the username and password. All the
user input must be santised and validated.

Introduce a logout link for the user.

Note: The API itself does not require authentication / authorisation; meaning all API endpoints can be
accessed without access / bearer tokens.