Full Stack Programming / Further Web Programming

COSC2758/COSC2938 (Semester 1, 2024)

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 required to use the following stacks:

. Frontend: ReactJS or ReactTS

. Middle layer:                        Node.js & Express.js with Sequelize ORM or TypeORM

. Backend database:              Cloud MySQL

.    You are not allowed to change technology stacks to suit your convenience and/or knowledge.

.     Using stacks other than the ones mentioned above will FETCH A ZERO for the whole assignment.

.     Use of Object-Oriented React 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 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 you for 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 this assignment and course, the lecturer is considered as the client.

It is your responsibility to regularly attend lectorial, practical and consultation session(s).

.     bring your questions to online discussion board, consultation sessions

.     watch the online lectorial recordings on a regular basis if you cannot attend the face-to-face session.

.     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.

2. Learning Outcomes

This assessment relates to the following learning outcomes of the course which are:

CLO2: Demonstrate proficiency with a web application development framework

CLO3: Implement a range of techniques and procedures for developing a small to medium-scale web application

CLO4: Demonstrate knowledge of and utilise software engineering patterns in development

CLO5: Design and manage the development life cycle of a complete application.

3. Assessment details

The senior executive committee has accepted the SOIL front-end prototype and now recommends that full stack version of website be developed. The committee recommends inclusion of extra features and constraints for the website- a summary is presented here; you will find more details in Section 4: Tasks. The extra features and constraints include-

3.1. The committee wants the developer to use a Cloud MySQL database (hosted at

rmit.australiaeast.cloudapp.azure.com) for the backend purposes. 3.2. Two users cannot have the same email/username.

3.3. 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.

3.4. The full stack version of SOIL must be a multi-user website where users can follow and unfollow one or more other users.

3.5. SOIL website will have a separate admin portal.

3.6. Admin dashboard part must be implemented via GraphQL and not REST API. 3.7. The codebase must be thoroughly commented.

3.8. GitHub should be used throughout the development lifecycle. The repository must be a part of rmit-fsd-2024-s1

organisation account. You have been emailed an invite to join this organisation at the start of the semester.

3.9. The website must be fully styled and look professional. The content must make sense i.e., use of lorem ipsum is not allowed.

3.10.  The digital assets (images, icons, audio & video) must be outsourced from free websites. You should not steal   someone else’s assets to enhance the look and feel of your website. High-quality & free assets can be obtained from:

https://unsplash.com/ (Images)

https://uifaces.co/ (Avatars)

https://fonts.google.com/icons?selected=Material+Icons:home (Icons)

https://www.flaticon.com/ (Icons)

4. Tasks

Here is the architecture diagram for the website:

Fig. 1

React front-end app talks to API defined in Node + Express layer via Axios library. REST 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/TypeORM middle layer. The tasks are shown below:

USE REST API for PA, CR & DI parts (zero for using GraphQL)

PA part [23 marks]

a.     (6 marks) Database schema model files

Create an ER (Entity-Relationship) diagram that will represent the database schema for the website. It 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 datatypes should these fields use? What kind of relationships exist among these tables? Is the database normalized? (i.e., avoid duplicated data, do not use too few or too many tables).

Place this model diagram inside Node + Express project. You may use a scanned image, or a PDF document.

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

b.    (6 marks) Sign-up & Sign-in

Implement the sign-up and sign-in features from assignment 1. This time the user details are stored in the MySQL database. The API in the middle layer should handle all the database operations. All the form input validations must be handled on the React end, as well as being validated in the middle layer / API.

Upon a successful log in, the user must see a welcome message in the format of Welcome username. Introduce a logout link for a logged in user.

c.     (6 marks) Profile (management)

Implement the profile and profile management features from assignment 1. The details of user profile must be fetched and modified via the API.

d.    (5 marks) Standard and Special products

Display all the standard and special products. The details of the products must be fetched from the database via the API.

At this stage, it was decided to remove all the information pertaining to small-scale farming from the website. The farming feature is now considered as out-of-scope for the final full stack SOIL website.

CR part   [8 marks]

e.     (5 marks) Shopping cart

Implement the complete shopping cart as described in assignment 1.

The users should have the ability to buy both standard and special products. All the relevant data must be stored in the database.

All the data and cart operations must be implemented with the API.

f.     (3 marks) Create three substantial unit tests pertaining to the shopping cart feature. Each test must be accompanied by a suitable explanation in the form of comments.

DI part [5 marks]

g.     (5 marks) Reviews

The logged-in users should be able to leave reviews for the products. The review can be a maximum of 100 words. The users should be able to allocate stars (1 being poor to 5 being excellent) as a part of review.

The user should be able to edit and delete their reviews.

The review and the number of stars should be stored in the database. All the data operations must be implemented with the API.

Add one substantial unit test pertaining to the review feature. The test must be accompanied by a suitable explanation in the form. of a comment entry.

Note: this part requires initiative, research, and effort. You will not find direct answers anywhere; you are to do some reading on the web before coming up with your implementation.

USE GraphQL for HD parts (zero for using REST API)

HD part  [9 marks]

Your task is to create an Admin Dashboard with the following requirements:

.     Requirement # 1: Create separate project(s) for this section i.e. admin react front & admin GraphQL. Admin Dashboard should not be linked to SOIL website.

.     Requirement # 2: The look and appeal of the admin dashboard must be different to the SOIL website. Spend some time thinking of an appropriate user interface.

.     Requirement # 3: For the data fetching part (from the Cloud MySQL), you must use GraphQL- i.e., use of REST API is not allowed.

h.    (2 marks) Admin should be able to perform. the following operations:

1)    block/unblock a user

2)    add/edit/delete standard and special product

i.      (2 marks) Admin should be able to delete reviews(s) if deemed inappropriate.

Deleting a review must show some corresponding message on the reviews page on the Loop Website such as- [**** This review has been deleted by the admin ***]

NOTE: This feature requires some thinking on your part, why should a review be considered inappropriate? What

kinds of appropriate will you handle in the implementation? Explain few scenarios in README.txt file for the benefit of the marker.

j.      (5 marks) The  senior executive committee requests the creation of a moderation feature as a part of admin

application. This feature should update in real-time as users interact with the site. To achieve this, the dashboard will need to utilise a GraphQL subscription. The key features should include:

1)    a dynamic display of the most recent reviews submitted by users, showing the latest two or three reviews.

2)    at least two distinct metrics related to the reviews or user engagement with products, presented visually. Each metric should be depicted through graphical representations rather than plain tables.

NOTE: You are encouraged to select meaningful metrics and provide a concise explanation in your readme

document about why these metrics were chosen. This explanation will enhance understanding of the dashboard's utility and relevance to the marker.

5. GitHub & Submission

You will be marked on the use of GitHub and development process. In week 2, you will be emailed an invitation to join the rmit-fsd-2024-s1 GitHub  organisation, you  must  accept  the  invitation  to join the  organisation.  Please  read  the following:

.    You must accept the invitation using a GitHub account that has been registered with your RMIT student email address.

.     Using a personal GitHub repository and not being a part of the rmit-fsd-2024-s1 GitHub organisation will lead to ZERO for the GitHub component in the rubric.

.     Since you are working in a group include both student IDs in the repository name as:

--a1 for example s3123456-s3654321-a2

.     Include the URL of your GitHub repository in the readme file. As an example,

https://github.com/ rmit-fsd-2024-s1/s3123456-s3654321-a2

After the due date, you will have 5 business days to submit your assignment as a late submission. Late submissions will incur a penalty of 10% per day. After these 5 days, Canvas will be closed, and you will lose ALL the assignment marks.

Assessment declaration:

When you submit work electronically, you agree to the assessment declaration:

https://www.rmit.edu.au/students/my-course/assessment-results/assessment