SCHOOL OF ARCHITECTURE
COMPUTING AND ENGINEERING
Submission instructions
• Cover sheet to be attached to the front of the assignment when submitted
• All pages to be numbered sequentially
• All work has to be presented in a ready to submit state upon arrival at the
Hub. Assignment cover sheets or stationery will NOT be provided by the Hub
staff.
Module code CN5006
Module title Web and Mobile Application Development
Dr. Nadeem Qazi
Module leader
Assignment tutor Dr. Nadeem Qazi
Assignment title Coursework Resit
Assignment number 1
Weighting 50%
Hand-out date 28th Oct 2024
Submission date 9th Dec 2024 at 23:59 (online submission) Strictly No
Extension
Learning outcomes
assessed by this 5-10
assignment
Turnitin submission Yes Turnitin Grade Mark No
requirement feedback used?
UEL Plus Grade Book No UEL Plus Grade Book No
submission used? feedback used?
Other electronic No Are submissions / feedback Yes
system used? totally electronic?
Additional information
Form of assessment:
Individual work Group work
Number of assignment copies required:
1 2 Other
Assignment to be presented in the following format:
On-line submission
Stapled once in the top left-hand corner
Glue bound
Spiral bound
Placed in a A4 ring bound folder (not lever arch)
Note: To students submitting work on A3/A2 boards, work has to be contained in
suitable protective case to ensure any damage to work is avoided.
Soft copy:
CD (to be attached to the work in an envelope or purpose made wallet adhered
to the rear)
USB (to be attached to the work in an envelope or purpose made wallet
adhered to the rear)
Soft copy not required
Note to all students
Assignment cover sheets can be downloaded from logging into UEL Direct via the
following pathway.
UEL Direct → My Record → My Program → Assessment log dates with
bar-coded front sheet
CN5006 Application Development
Assignment 2024/24 Academic Year
Course work for CN5006 Web and Mobile Application development. Total
Marks 50
• You should be working in Group of NOT be MORE THAN 6 students .
• React must be for used for user interface.
• Any tool other than React will NOT be accepted.
Task: Design a web server application consisting of the backend and front end in separate
files ,using node js express , mongo dB and mongoose to design the RESTAPI. The course
work would be evaluated through the submitted (Report(45 Marks) and a video file submission 5
Marks)
The REST API will use [Link] (provided to you for this coursework). The given csv data
having the following fields:
1. Team
2. Games Played
3. Win
4. Draw
5. Loss
6. Goals For
7. Goals Against
8. Points
Sub Task 1 Back End application. Following sub tasks should be performed
1. The BackEnd application run as web server using express having a REST API, should
use mongoDB queries to demonstrate following: (Total 25 Marks)
1.1 Create a Mongo dB collection to hold the data from the given CSV file. name this
collection as FootBall Data or any appropriate name. (marks 1)
1.2 Create mongoose Schema in a JS separate file (Name it as of your choice) for this
dataset and from this Schema create a model to be used in add, delete, update and find
queries. (marks 2)
1.3 Create another file (name it as of your choice) import the file that you uses
mongoose Schema created in 1.2 and make connection with mongoDB (marks 2)
1.4 Create a separate JS file ([Link] ) that runs a web server using express and import
the files created in 1.2 and 1.3 (marks 2)
Add the code in [Link] as required in the following :
1.5 , Add a Query in a POST method of the REST API that should be able to Add the
data to the Football collection in mongoDB marks 3
1. Team
2. Games Played
3. Win
4. Draw
5. Loss
6. Goals For
7. Goals Against
8. Points
1.6. write Query in a separate POST method for updating a single record for a Given
Team:
1. Team
2. Games Played
3. Win
4. Draw
5. Loss
6. Goals For
7. Goals Against
8. Points
9. Year
.(marks 3)
1.8 It should also have a separate endpoint using the POST method for deleting the record
for a given Team (marks 3)
1.7 It should also have an separate Get method to show the total games Played, Draw and
Won for the given year (marks 3)
1.9 it should have an endpoint to have a Query to display the first 10 records from the
Football data base to display all the Teams including all nine columns)) for the match “won”
greater than a given value entered by the user. the data should be displayed on
browser.(marks 3)
2.0. it should have an endpoint having a Query to display the all the Team (including all nine
columns) where average “Goal For” for a given year entered by the user the data should be
displayed on browser. . (marks 3)
2. Front End Application (20 Marks) : Create Front end using React Application
consisting of Components (either using functional or Class compoment) that should be
able to create user interface and access the appropriate REST API method using axios
API.
2.1 A component that makes a user interface using Form and HTML elements for
adding data i.e. number of Team,Games Played,Win,Draw,Loss,Goals For,Goals
Against,Points,Year to the collection in mongoDB through axios API marks 3.0
2.2 A component that to create user interface using Form and HTML element for update
Team,Games Played,Win,Draw,Loss,Goals For,Goals Against,Points,Year for a given
team Name marks 3.0
2.3 Create a User interface to show total total games Played, Draw and Won for a given
Team marks 3.0
2.4. A component that to create a user interface for deleting a record for a given team
marks 3.0
2.5. A component that to create userinterface to display first 10 drecords from the
records for Task mentioned in 1.9 marks 3.0
2.6. user interface to result of Task 2.0 i.e. Query to display the all the Team (including all
nine columns) where average “Goal For” for a given year marks 3.0
2.7 A React Router Application that integrates all the above components 2 Marks
The course work would be evaluated through the submitted Report ,a video presentation and Peer
Assessment form and Code. A template of this form is provided to all of you along the course
work.
What is the Peer Assessment Form:
Since it is a group project you all be working in the group. Each member of
the group would be submitting a peer review separately.
4 Summarize your code in a PDF Report 45 Marks including the Marks for Backend-
Front End
• Write a report(template given below) having proper format with a list of content, abstract introduction
reflecting your understanding of RESTAPI , coding used, etc. along with the development process
• The total marks of report 45 marks will include the marks of the backend i.e. 25 plus marks of
• Front end i.e. 20 marks.
• The report MUST contain, screenshots of the input and output of the user interface showing the
java script & HTML code and Mongodb query with proper explanation. It is mandatory to show all
the Mongo DB queries you used in the code, in the report according to the template provided below.
• The report should clearly mention the code mongoDB queries and snapshot of the user interfaces
as required in back-end and front-end application. For example you might use something like this
in your report
Task 1.1 : (snap shot of the code) explain its briefly and how it is used in User interface.
• Therefore in order to claim the marks for every respective tasks of the back-end and front-
end you must include the description of that task i.e. 1.1-1.9 for the back-end and 21.1-2.7
for the front end with code and corresponding user interface in the report.
• So If your report or presentation does not include any of the subtasks i.e. 1.1-1.9 for back
end and 2.1-2.6 for front-end with code and corresponding user interface screenshot, that
subtask will then be assumed incomplete and marked zero accordingly.
Therefore please note Your report and video presentation must evidence the completion of
every subtask to claim the marks of the corresponding sub task.
What to Submit
1. A single report should be submitted by the entire group showing the name of each
group member along with role of every group member in the project. The report
should be submitted on the Moodle,.
2. The entire code (JS files) in the zip file should also be submitted in the Moodle on the
provided link.
3. However Each member of the group will also submit a peer review assessment form
provided on Moodle. In this form you will assess how your group member participated
in the project. This will effect the final marks of the member of the group. For example
if the group project mark is say 80 then depending on the peer reviewe assessment
your marks can be same or less or greater than 80
5. Video Presentation (5 Marks)
The presentation of your project should be in group (one video presentation for entire
group) to give the demo of your work. The video should also use camera for the introduction
of each member of the group with his/her university ID card mentioned in the video. If any
of the member misses the presentation video he or she will lose 5 marks.
The video should be of 10-15 Minutes showing the working of the entire project. In the video
each group member will run at least one user interface of the project explaining the work he
or she is done in the project. The video will be submitted on Teams a separate channel
would be provided to upload the video.
Coursework Evaluation:
Report 45 Marks:
• Back End Application 25 Marks
• Front End Application 20 Marks
Video presentation 5 Marks
Total : 50 Marks
ASSIGNMENT TEMPLATE
SCHOOL OF ARCHITECTURE, COMPUTING & ENGINEERING
Module code CN5006
Module title Web and Mobile Application Development
Group
Names Student 1 (Name, ID)
Student 2 (Name, ID)
Student 3 Name ,ID
Case Study Title Title
Module leader Dr Nadeem Qazi
Assignment title Group report
Assignment number 1
Weighting 50%
REPORT TEMPLATE
Introduction/Abstract
The overall aim is to set the scene for your case study, explain any assumption, descope irrelevant issues,
etc.
Project plan
This section is used to explain who is doing what, milestones and other project planning [Link]
should mention here how you have structured the source code for back end and front end etc.
Body (You can give this section any name)
Use this section to respond to the questions as they are structured in the coursework document i.e. Back-
end and front end sub-domains describing each subs tasks
Example Task 2.1: you should describe the following in order to show that you have completed the task
2.1
Logic or procedure adopted: Describe here how did you performed that task
Code: Include the code and mongoDB queries for that subtask i.e. 2.1 and explain it
Interface: include the snapshot of subtask 2.1
Plagiarism
The University defines an assessment offence as any action(s) or behavior likely to
confer an unfair advantage in assessment, whether by advantaging the alleged
offender or disadvantaging (deliberately or unconsciously) another or others. A
number of examples are set out in the Regulations and these include:
“D.5.7.1 (e) the submission of material (written, visual or oral), originally produced by
another person or persons, without due acknowledgement, so that the work could be
assumed the student’s own. For the purposes of these Regulations, this includes
incorporation of significant extracts or elements taken from the work of (an) other(s),
without acknowledgement or reference, and the submission of work produced in
collaboration for an assignment based on the assessment of individual work. (Such
offences are typically described as plagiarism and collusion.)”
The University's Assessment Offences Regulations can be found on our web site.
Also, information about plagiarism can be found on the programme’s handbook.