2023-24 CSC2062 PROJECT (TRA DECARD)

You are to develop a fully working website/app that allows users the ability to browse trading card
game (e.g. Pokémon) collections by other users. You can choose any viable trading Pokémon card
franchise to focus your design and functionality. Only one franchise should be developed.
The name/root of the site will be called tradecard
The web site/app will allow users to browse/search/filter trading card game collections as an
anonymous user. It will also allow users to join the trading card collection sharing community for
the purpose of giving the registered user extra functionality.
The main purpose of the assessment is to show an understanding of modern server-side JavaScript
web development.
Please note: this assignment contributes 100% of the overall assessment for the module (any re-sit
submissions will be capped at 50% whereas for any deferral submissions the mark will be
uncapped).
The following is a breakdown of the marks (marking criteria) for each area of system design &
development.
• System functionality & experience [50%]
• User interface [10%]
• Code-base implementation [30%]
• Report [10%]
TOTAL 100%

SYSTEM FUNCTIONALITY & EXPERIENCE (50 POINTS)

A user can access the website as an anonymous web user, someone who the system allows to
browse the website/app with limited user rights/privileges. The web app is a community based in
its ethos, allowing the public to access the data as read-only.
System requirements are described below:
• Browse & search the card data on the system (e.g., card details, member card collections)
• Filtering (e.g., categorising the cards or/and collections). For example:
▪ Set/series/expansions
▪ Member collection(s)
▪ Most likes
▪ Other (e.g. chronological, monetary trading value, artist, Pokémon ability).

• Register as a member (credentials, demographics, addition user info)

 • Member users can:
o Perform the same functions as a non-registered user
o Create a card collection list(s)
o Manage their data stored by the system
o Rate other members card collection(s)
o Like/wish list of other members card(s)
• Developer designed functionality that has not been mentioned above. For example...
• commenting function on members collections
• trading messaging system (contact the member to trade cards)
• comparison multiple card functionality
• System security(data is protected from malicious attacks).
Development advice: This is a Create, Read, Update & Delete system. The labs, lectures and notes will be
covering how to build a CRUD web app. What is extremely important is that the system understands who is using
the system. So, registration and login are required to store who is using the system/web app.

USER INTERFACE (10 POINTS)

The web system should look and feel professional in its implementation and design. A minimum
requirement it is modern & responsive. The use of a CSS framework e.g. Bootstrap, Bulma, Material
UI, Tailwind etc. is permitted.
Development advice: Use a CSS framework to help you layout your user interface. Don’t spend all your time on
the user interface as it’s weighting is minor.

CODE BASE IMPLEMENTATION (30 POINTS)

This covers several areas of the design and development of your web system/app. Below is a break
down of the different areas the system will be assessed on:
• Approach (the design and development of system)
• Code quality (is it robust & modular)
A DRY approach to your system code should be considered, but not essential.

Node.js dependencies can be used in your project code e.g. uid, validator, bcrypt etc. Using popular design
patterns is also an option e.g. MVC. Make sure to reference NPM dependencies and any extra learning material.

• Design of dataset/database
Holds the software system's data. It should be robust, scalable, and secure. An ER diagram of your final DB design
should be included in the report.

Development advice: Develop the database ER and sample data as soon as possible. This will help direct your
functionality design and development. A trading card could potentially hold the following data (taken from the
https://www.tcgdex.dev/ API) ...

Application Programmable Interface (API) can be design and implemented to show understanding of
advanced software system design and implementation. It is optional.

Development advice: Create two separate systems that run on a different PORT number e.g. have your web
app listening on PORT 3000 and your API listening on PORT 4000.
Below is a sample of data that could potential held by your system.

{
"image": "https://assets.tcgdex.net/en/base/basep/1/low.webp",
"name": "Pikachu",
"rarity": "Common",
"hp": 60,
"types": [
"Lightning"
],
"stage": "Basic",
"attacks": [
{
"cost": [
"Colorless"
],
"name": "Growl",
"effect": "If the Defending Pokemon attacks Pikachu during your opponent's next turn, any damage
done by the attack is reduced by 10 (after applying Weakness and Resistance)... "
},
{
"cost": [
"Lightning",
"Lightning"
],
"name": "Thundershock",
"effect": "Flip a coin. If heads, the Defending Pokemon is now Paralyzed.",
"damage": 20
}
],
"weakness": "Fighting"
]
}

Please note: It's your system, so you decide that data to be stored and used (CRUD).

REPORT (10 POINTS)

It must be submitted along with your system code. Use the following headings to develop your
report:
• References to external sources (1 page limit)
o code snippets, libraries, NPM dependencies, video tutorials etc
o (No need to reference media assets or module learning URLs)
o your private GitHub repository URL
o make sure you add buschwhack as a member to your repository
(https://github.com/buschwhack)
o legacy usernames and passwords of system users
• ER diagram (1 page limit)
• Analysis of your development approach (6 page limit)
o Git commits should have:
▪ recurrence
▪ longevity
▪ complexity (avoid commits that are superficial).

STACK DETAILS
There are many ways in which the requirements can be approached and many design decisions to
make. For example, UI design and implementation can be developed before coding the server-side
functionality. Database design and content can also be created early on.
Make sure to develop and test a website based on the given specification using both client-side
and server-side technologies covered in the module. Note: you are permitted to use client-side
libraries and frameworks, e.g., Bootstrap, jQuery etc.,
ALL CSS/JS dependencies should be clearly listed in your report.
You are limited in the web development stack you can use (like all software development projects).
Build your web site/app using both client-side (HTML, CSS & JS) and server-side (Node.js,
Express.js (EJS) & MySQL) technologies covered in this module.
AVOID implementing other front-end frameworks e.g. Vue, REACT, Angular etc. The assessment
is based on technologies covered in this module.
Below is a list of permittable technologies for the project:
• Other external JavaScript node modules (installed using NPM)
• Client-side JavaScript DOM libraries e.g., jQuery, MooTools
• CSS libraries e.g., Bootstrap. Bulma
REMEMBER to reference the above libraries and dependencies.
Below is a list of non-permitted technologies for the project:
• JavaScript frontend frameworks e.g., Vue, ReactJS, Angular, Ember.js
• NoSQL Databases e.g. Mongo DB, Apache CouchDB
• Other template engines for Express.js, e.g. Jade, Pug
If unsure what technology framework/library is allowed, then ask the module lecturer (Teams
message).

SUBMISSION PROCESS
Details on upload requirements on the CANVAS assessment (please read them carefully). You may
be deducted marks or receive a grade of 0% if submission requirements are not adhered to
correctly.
This will make the assessment and feedback process as efficient as possible. For example, you’re
your submission is missing a crucial file, then the system cannot run on the lecturer's local server.
Therefore, the functionality of the web app cannot be assessed as the web app cannot run.

Declaration of Academic Integrity

By submitting your work, the following criteria must be met:
1. Adherence to the prescribed limits, which may include page count, word count, and time
limits for videos, as specified in the assignment guidelines.
2. Presentation in a clear and well-proofread manner.
3. Submission on or before the specified or due date. In case of a late submission, deferment
should have been granted in advance.
4. Submission of all relevant files and URLs via Canvas.
5. Certification that this submission represents entirely original work, with correct attribution
of all sources, and full acknowledgment of any contributions from AI technologies.
6. Declaration of having reviewed the University guidelines on Academic Offences, which can
be found
at: https://www.qub.ac.uk/directorates/AcademicStudentAffairs/AcademicAffairs/Appeals
ComplaintsandMisconduct/AcademicOffences/Student-Guide/
7. Confirmation that the attached submission is original work, with no part of it having been
previously submitted for any other assignment.
Assessment must be submitted by the following deadline:
Friday 26th April 2024 00.15 (12.15am)

With the exception of students that have been granted an extension by the Exceptional
Circumstances panel, see https://qubstudentcloud.sharepoint.com/sites/assessment-support-
hub/SitePages/Adjustments-and-Mitigations.aspx
A penalty for late submissions will be applied as follows:
Coursework submitted after the deadline will be penalised at the rate of 5% of the total marks
available for each calendar day late up to a maximum of five calendar days, after which a
mark of zero shall be awarded, i.e., up to one calendar day is 100% - 5%; up to two calendar
days is 100% -10%; up to three calendar days is 100% - 15%, etc.

AUTHORSHIP OF WORK
Please be aware, contractual agreements with 3rd party sources should be avoided as this will fall
under the academic offence of 'contract cheating'. Relying heavily on 3rd party GitHub repositories
and code generated by AI and other sources should also be avoided and subject to the academic
offence of 'plagiarism',
Referencing third-party learning resources, coding tutorials (video/written) is a core requirement.
Students will be chosen to prove authorship of work post submission. Demonstrations to prove
originality of your work may involve demonstrating further implementation of your code
source/base.

HELP & SUPPORT

Contact the lecturer for support or ask a question about the assessment via Teams Chat click here

DISCUSSION FORUM
Post questions about assessment on Discussion forum.

MARKING CRITERIA & RUBRIC:

An indicative marking rubric based on the University’s Postgraduate Taught Conceptual
Equivalents Scale is provided on the Canvas Assessment module.