SIT120 - Assignment 2
Responsive Web App: Implementation and Demonstration
Worth: 40% of your grade (30% project, 10% presentation)
Due Week 10, Friday 11:00 pm (Firm Deadline)
On Campus Students: Demonstration in person (Week 11 Practical)
Introduction
In this assignment you will demonstrate your understanding of the coding concepts and skills developed throughout
this trimester in a creative context. Using robust Vue platform, you will use HTML, CSS and JavaScript to create a
responsive web application. You are free to design and think of imaginative behaviours and actions for the
components in your aquarium that satisfy the requirements below in a creative manner.
As an individual, your project should demonstrate the use of multiple components in a larger system of both
autonomous and interactive elements. The purpose and format of your project is up to you. For example, you may
choose to focus on a realistic simulation, a game-like experience, a virtual toy, a digital performance, etc. The unit staff
will be happy to hear your ideas and provide feedback.
Tasks
You may work in a group helping each other, however, you should be based on Assignment 1 Proposal and develop
the web application. You are free to improve or modify from this plan during development. Using your Project
Proposal as a guide, you should apply coding using Vue framework and components system to your components in
order to demonstrate a range of coding concepts in a creative manner. All must be included in your project.
Additionally, the following effective coding practices should be demonstrated by your implementation:
The way in which your web satisfies each of these requirements is up to your design. Your submission of the
assignment must be presented as a single zip archive.
Submission
Written Report
An accompanying written report (maximum 5 pages, may be shorter) should explain your implementation, design
and reasoning behind your code and system, include the following information:
1. Overall description of design challenges and system.
2. Explanation of how each of the above listed coding concept requirements have been fulfilled in a creative
manner (screenshots of blueprints, diagrams may also be useful here!).
Oral Presentation
During your practical in Week 11 you will present an oral presentation which includes the following information:
• Short summary of the project goals including target audience.
• Demonstration of the functional project.
• Discussion of the process you took to implementing the features (e.g., how did you translate your ideas into
the functional result? Did you use user stories, UX/UI, create asset lists, etc).
Coding Practises Requirement
Documentation and Basics Effective commenting inside codes to allow easy understanding of the
purpose of different aspects of your code. Efficient use of some of the
following basic ideas.
• Computed Properties and Watchers
• Class and Style Bindings
• Conditional Rendering
• List Rendering
• Event Handling
• Form Input Bindings
• Components Basics
Components in depth • Component Registration
• Props
• Custom Events
• Slots
• Dynamic & Async Components
• Handling Edge Cases
Transitions and Animations
Reusability & Composition
Tooling and Scaling Up
• Enter/Leave & List Transitions
• State Transitions
• Mixins
• Custom Directives
• Render Functions & JSX
• Plugins
• Filters
• Single File Components
• Unit Testing
• TypeScript Support
• Production Deployment
• Routing
• State Management
• Highlights of key features and how the coding concepts you have learned were applied to these.
• Discussion of the major obstacles and challenges encountered during the course of this project and how you
solved them or made changes. Be honest – coding is challenging and your approach to problem solving and
demonstration of how you have learned from this are very important!
A powerpoint presentation or visual aid is recommended, and should be submitted with your project.
Submission
One must submit the following files to the Assignment 2 link prior to the due date and time. Your submission must
include:
1. Written report as a HTML file.
2. Project in a .zip archive. Make sure to zip the entire project directory (i.e., the folder containing the project
file and all other folders and contents contained within).
3. Powerpoint presentation of your oral presentation visual aid (cloud students: voice over presentation).
Marking Rubric for Assignment 2
Project & Written Report Rubric (30%)