Assessment 4 - ReactJS: Presto
1. Background & Motivation
2. The Task (Frontend)
3. The Support (Backend)
4. Constraints & Assumptions
5. Teamwork
6. Marking Criteria
7. Originality of Work
8. Submission
9. Late Submission Policy
0. Change Log
- 01/04 Fix movable element spec & video element's url option & Fix backend swaggerdoc
1. Before you start
1.1. Background & Motivation
In March of 2024 you and your friends pitched a startup idea to produce An alternative to slides.com that
is a lean, lightweight app that is a lot more enjoyable and interesting to use and that will revolutionise
the presentations industry for decades to come. You pitched this solution in the form of a web-based
application, and called this quiz application Presto.
A week later you received a tentative $50,000 investment from an Angel Investor pending you producing
a working minimum viable product of the application.
Shortly after you discussed the functionality and feature set with your friends, and wrote out a RESTful
specification / interface together so that you can split up the frontend and backend work between the
group. You build the frontend, they build the backend. To get things moving, the backend was built
EXTREMELY light in order to reduce the amount of interfacing needed.
Whilst you (and optionally another one of your friends) decided to work on building the frontend. You
wrote a list of requirements and functionalities your frontend should adhere to (described in section
2). You also decided to complete this application in ReactJS, a declarative framework for building single
page applications. This front-end will interact with a Restful API that your team members are producing,
based on the pre-defined interface.
Because your MVP is only going to be demonstrated once, your team considers it imperative that your
front-end is thoroughly tested.
To satisfy modern tastes and expectations you have also decided to ensure that the UI/UX and
Accessibility standards are very
This assignment is the process you building the front-end for that MVP(Minimum viable product) to
the standards described. This assignment is closely modelled off the popular website slides. If you're not
familiar with the site, we would recommend spending the time to try it out so that you can get a feel for
how this application may function as a reference point.
1.2. Lectures to watch
You will need to watch at least the following lectures before starting (it will help you get started):
* Javascript Ecosystem
* Node Package Manager
* ReactJS Introduction
* ReactJS Global CSS Usage
* ReactJS Lifecycle
* ReactJS useState hook
* ReactJS useEffect hook
* Working with multiple files
* Components & Props
* Linting
You will need to watch at least the following lectures to finish the assessment completely:
* Routing & SPAs
* CSS Frameworks
* useContext hook
* Testing introduction
* Component testing
* UI Testing
2. The Front-end (Work to do)
You are to build a frontend for a provided backend. This frontend shall be built with ReactJS. It shall be a
single page application that does NOT require a refresh for state updates. (Failure to make your app a
fully single page app will result in significant mark penalties)
Features need to be implemented (described below) in order for your ReactJS app to meet the
requirements of the task, and to operate with the backend described in 3.2.
The requirements describe a series of screens. Screens can be presented as popups/modals, or full-page
views. The term Screen is used to refer to a specific state or representation of the web application. You
have the flexibility to decide how to implement them, whether as modals, separate pages, or other
appropriate UI components.
Anything marked