Front-end and Design

Embracing the tenet that a sophisticated user experience and user interface (UI/UX) can be pivotal to the success or failure of a mobile application product. In our visually driven world, oftentimes, UX/UI is the main distinction in products of different companies. “It is not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and yes, beauty to people’s lives.” This quote from Donald A. Norman (Allanwood and Beare, 2014, p.14) rings true to humans attaching emotion to a product. In this instance, an emotionally geared, well-designed UX/UI can grant a company competitive advantage and growth in the mobile applications market (Philips, 2017).

Highlighting the importance of UX/UI design, it is obvious that priority needs to be placed on the quality of software and hardware tools needed to produce a beautiful design. The tools needed will be specified as programming languages, tools, software and lastly, hardware and peripherals

Programming Languages

HTML5 (Hypertext Mark-Up Language) (Vicente, 2021) - Link

1. HTML5 is used to create pages for web-browsers to display by retrieving a HTML file stored in a server. It is then parsed to display a webpage as intended by the instructions written in the HTML file.
2. In the context of the development of Hex Clan’s Budget Hub application, HTML is used to achieve the desired structure of pages consisting of a series of elements agreed upon in the design and planning stage.

CSS3 (Cascading Style Sheets) (Morris, n.d.) - Link

1. CSS manipulates how the HTML elements are displayed. The CSS has values that specifies the HTML’s style.
2. In the context of the development of Hex Clan’s Budget Hub application, CSS is used to apply colour and font styles to elements found throughout the application. It is also used to determine the general look and feel of the application.

JavaScript (ECMA-262 - ECMAScript 2021) (Morris, n.d.) - Link

1. JavaScript is a scripting language used to build and manipulate dynamic site content. Features such as animated graphics, image slideshows and interactive forms are all created with JavaScript.
2. In the context of the development of the Budget Hub application, JavaScript is used to make the application dynamic.

Further Tools

The following UI tools have and will be used in the case of a web application, although the application that Hex Clan seeks to deliver, is a native one.

Techniques

JSON (Javascript Object Notation) (Balagun, 2021) - Link

1. JSON allows frontend and backend code to work synergistically, smoothening the data transferring back and forth.
2. For example, further development of the Budget Hub application would require the adoption of more libraries, backend technology and incorporation of other libraries. Using JSON could help data interchange.

Ajax (Asynchronous JavaScript and XML) (Morris, n.d.) - Link

1. Ajax is a set of development techniques that is used for developing websites and applications. Its main function is to update content asynchronously, meaning only parts of the content is reloaded while the rest stays static.
2. For example, in the Budget Hub application, price changes for groceries can change over time. The price changes can be reflected in the content while the user is browsing shops for groceries.

Frameworks and Libraries

Angular v13.0.0 (Codecademy, 2021) - Link

1. Angular is a frontend framework which makes developing and maintaining frontend applications faster and simpler by providing structured and recyclable code and components.
2. For example, Angular can be used to increase performance in the source code of the development project. Using Angular will also promote consistent code and simplicity when creating, by using Angular’s declarative templates. Another benefit is it is a widely supported framework, which is included in many code editors and IDEs.

React Native Version 0.66 (Codecademy, 2021b) - Link

1. React Native is an open-sourced framework that is used predominantly in mobile development. With React Native, hybrid applications that run on Android and iOS systems can be developed.
2. For example, the benefits of using React Native would be that our application, Budget Hub would look identical on either type of device (Apple or Android), or the UI would remain consistent. With further development of this project, the Budget Hub application will be more widely circulated and available on more devices for financial growth.

jQuery v3.6.0 (Pung, 2017) - Link

1. jQuery is a popular JavaScript library for front-end development. Furthering the development of the application, jQuery plugins built on top of the framework could add further functionality to the application.
2. For example, content could be arranged in a neater way using a plugin called matchHeight which could create blocks of content of equal height dynamically. Another example would be to use a SlickSlider plugin for sliders, responsive choices, and infinite looping.

Bootstrap v3.4.1 (Turner, 2021) - Link

1. Bootstrap is an entirely customizable framework with a massive open-sourced library of design templates based on CSS, HTML and JavaScript. The benefits of using Bootstrap are the responsiveness, quality added to applications and web content.
2. For example, using Bootstrap would allow for rapid UI development of the Budget Hub application. Apart from that, Bootstrap also requires a lower learning curve.

Languages

TypeScript 4.4 (Lease, 2018) - Link

1. TypeScript is a superset of JavaScript which gives the developer more control via type annotations, interfaces, and classes. It was created to ease the development of larger scaled applications as well as improve JavaScript code by catching errors during code compilation time more readily.
2. For example, as the project grows, it would be prudent to use TypeScript to improve workflow process. Errors can be caught with less time by using TypeScript.

Dart SASS 1.43.4 with SCSS (Syntactically Awesome Style Sheets/Sassy CSS)(Agrawal, 2021) - Link

1. SASS with SCSS can be used instead of CSS as the development of the application grows as regular CSS becomes hard to maintain with the drawn-out code.
2. For example, SASS and SCSS allows features such as modularity, inheritance, conditionals, looping, nesting, and mix-ins to make CSS easy to maintain.

Mobile Development

SwiftUI 5.5.1 (Jacobs 2021) - Link

Swift UI is a platform that follows multiple concepts and provides numerous services that are found in UIKit and AppKit. It holds multiple useful tools including “lists, stacks, buttons, pickers, and many more” (Jacobs, 2021). An essential aspect to this framework is that it is completely integrated into XCode. This does not only exponentially grow the efficiency of the development process but decreases any chance of miscommunication and mishaps between platforms. The ability to run the code from XCode and being able to see and preview the code you have just edited, is spoken of as an almost essential feature and one that is “more than a nice to have feature,” as the lack of necessity to run the code on a simulator or device leads to far more efficient programming. Another spectacular feature, that may not be useful in this application, is the cross-platform framework, that allows whatever UI you are using, to be used on multiple platforms " including macOS”. Despite the platform a frontend developer is targeting, the foundation remains immutable. As mentioned previously, said features shall be of great assistance to the development of the frontend of this application. As the Hex Clan intend on using this UI framework to develop the IOS native application, these visual aspects may be custom coded, or, built in default tools may be used. Hex Clan would require a developer that can custom code the UI and use as little built in default tools as possible.

JavaFX 16 (Staff Writers n.d.) - Link

JavaFX is an open-source platform that enables developers to build spectacular looking desktop and mobile UI’s. A testFX software is built into this kit that would allow programmers to run their code efficiently and accurately, thus being able to conduct and examine inputs and application behaviours efficiently and effortlessly. This UI kit will be essential to the building of the android application as the backend is only competent at storing data and displaying and receiving information through the console. JavaFX developers “rely on libraries such as Advanced Windowing Toolkit and Swing. After the advent of JavaFX, these Java programmers can now develop GUI applications effectively with rich content.” The syntax is written in Java, thus resulting in a higher collaboration rate between members within the team.

Software

IDE (Integrated Development Environment)

Microsoft Visual Studio Code Version 1.62 (VSCode) - Link

1. Open-sourced code editor for macOS, Windows and Linux systems.
2. In the Budget Hub application project, VSCode is used to write the code that makes up the application.

Design Software

Adobe Creative Cloud Version 5.6.0.788

Prices start at AUD$14.29 per month per application or AUD$76.99 per month for all applications (Adobe, n.d.). - Link

1. Adobe Lightroom 5.0 - Link
1. Bulk editing of images or photos.
2. Images of groceries and produced can be enhanced using Adobe Lightroom to attract the user.
2. Adobe Photoshop 23.0 - Link
1. Specialised editing of images or photos.
2. Creation of graphical elements such as shop banners which include photography can be edited and enhanced with Photoshop.
3. Adobe Illustrator 26.0.1 - Link
1. Creating or manipulating vector graphics.
2. Logo creation or vector graphics used throughout the Budget Hub application can be done through Illustrator.
4. Adobe XD 45.0.62 - Link
1. Creating application prototypes and mock-ups.
2. A very important tool which can be used for the design phase and for various UI/UX improvements.

Web Applications

Miro (Miro, n.d.) - Link

• Purpose: Collaboration tool for Whiteboarding, Wireframes, Visualisation and General Planning.
• Pricing: Subscriptions start from AUD$24.00 per month paid annually.
• In this project, Miro can be very useful for planning and brainstorming especially in post-pandemic times where a project team are separated by physical distance.

Canva (Canva, n.d.) - Link

• Purpose: Web graphic designing tool with templates and graphical elements.
• Pricing:
• Free to use with limited features
• Subscriptions start from AUD$17.99 per month.
• With this software’s drag and drop tools, fast turnaround for design ideation can be beneficial to the planning phase of the Budget Hub project.

Github (GitHub n.d.) - Link

• Purpose: GitHub uses Git which is an open-source project for version control systems, managing and storing revisions of projects.
• Pricing:
• Free to use with limited features and caps.
• Subscriptions start at AUD$5.40 per user in a team.
• The number of developers will eventually increase as the project increases; Therefore, it would be wise to have version control systems put in place. Currently, the Budget Hub application prototype is currently hosted in a GitHub repository to enable the use of version control and collaboration.

Hardware and Peripherals

With the software requirements for front-end development in mind, the hardware and peripherals recommended are as follows:

Laptop or Desktop Computer

• Specifications (Staff Writers, 2020):
1. CPU: Current generation Intel i5 or better.
2. GPU: A dedicated GPU, like an NVIDIA GeForce model, for example.
3. RAM: At least 8 GBs.
4. Storage: At least 250 GB of SSD storage.
5. Screen size: At least a 13-inch display.
• • Suggested Systems and Costs:
1. MacBook Pro 13” 256GB SSD - AUD$1,899.00 (Apple, n.d.)
2. 24” iMac Apple M1 chip 8GB memory 256GB SSD - $AUD$1,899.00 (Apple, n.d.)
3. Microsoft Surface Laptop 4 13.5” 8GB RAM - AUD$1,499.00 ((Microsoft, n.d.)
4. Dell Inspiron 24 5000 All-in-One - AUD$1,469.00 (Dell, n.d.)

Peripherals

1. Drawing Tablet for Visualising Design
1. Apple iPad from AUD$499.00 (Apple, n.d.)
2. Apple Pencil from AUD$145.00 (Apple, n.d.)
3. Wacom Intuos Graphics Tablets from AUD$399.00 (Wacom, n.d.)
2. Other peripherals:
1. Computer Mouse
2. Computer Keyboard
3. Computer Monitor

Prior Knowledge and Experience

The Hex Clan group members possess a varying amount of experience in frontend development and design tools. The following table displays the amount of experience each member has for the tools and technologies listed above:

The table resembles the competencies of each team member regarding all the tools in this document. The Hex Clan have moderate skill in this domain and can complete simple tasks that require little to no cognitive ability and research, such as pushing to a GitHub repository and scripting HTML and CSS interfaces. While these skills may be used as the foundation and even the further development of a web application, they would in no way suffice to create a native one. As the main platforms required to create said application are SwiftUI and JavaFX, which in both, the team holds limited knowledge.

Back-end and Design

The ultimate goal of technology is to give individuals the opportunity to fulfil tasks that may have at one point required great amounts of effort, effortlessly. The functionality of an application is crucial to the success of the company, despite the UI/UX design as, “without solid backend support, a great-looking frontend can easily fail. No matter how enticing a webpage looks at first glance, visitors will eventually turn away if the functions are compromised” (Nora Kramer Designs, 2021) Nora Kramer enlightens us regarding the impact that a functional backend has on a user and its vitality regarding the frequency of user returns. Various programming languages and platforms must be used in order to ensure the success of Budget Hub and complete functionality resulting in widespread usage of this application.

Programming Languages

Python 3.9.5 And Selenium Web scraping - Link

The tool used in order to retrieve information regarding the stores, their prices, items and images was a Python script along with a selenium module.

• Python 3.9.5 And Selenium Web scraping

Selenium is an open-source module, its main use is to test backend software, although this is its main function, it may also be used in order to scrape web pages. In this project we used the Selenium open-source module in order to implement the retrieval of images and information on the products listed from various web pages. As python does not require compilation, it is deemed a quick language that takes little memory to run, it is for this reason that this language was chosen to be used, as processing large amounts of data can be a rather strenuous and time-consuming task with alternate languages.

• Alternate Possibilities

Alternate software, and possibilities may have been, either direct access to the target stores databases, or manual logging.

• Manual Logging

This alternative would simply consist of a third-party software being granted to the store, making stock logging easier. The stores would then manually enter the items and stock along with the prices and updated sales. This approach is not feasible due to the time taken when manually logging stock, and the inconsistencies that may take place due to various complications and challenges that the store may encounter.

• Accessing databases

Another alternative would have been to request access to the databases of the store. This may have been feasible if the layout of acquired data was usable, contrastingly it would be redundant as the data on the web pages reflect the database stock log, prices, and images. Furthermore, security concerns may be raised when requesting access to store databases.

Java DK 17 - Link

Java is a backend language used to create and maintain android native applications, its datatypes are all strictly enforced and mentioned at declaration/initialization. The data type in the image shown below has been set to an integer, therefore, the type will not vary during runtime, the line proceeding is not mandatory as values may vary during runtime hence the name (variable).

Therefore “You end up writing less code, but your code is more elegant and precise.” Java utilizes the object-oriented paradigm as a foundation upon which it stands. Therefore, the program may be maintained and built by various programmers at once whilst simultaneously maintaing cohesion as various classes and packages would be administered to different teams. Java is also fond of inheritance and polymorphism that go hand in hand and are mutually exclusive, this means that sub/child-classes may inherit methods and variables that are declared in the parent class, further adding to the elegance and precision that this program will hold. The MVC (Model View Controller) software design pattern will be used as it separates packages and classes into appropriate usages, thus ensuring effortless maintenance, collaboration, High cohesion, and loose coupling.

MVC Software Design Pattern

1. UI(View) is the package that simply displays information to the user in a formatted layout whilst simultaneously retrieving user input and passing it into the controller. The view will withhold minimum business logic and restrictive operators, as these must be held in the controller, although this is the case, it is crucial to have input restrictions within the View that contain logic to restrict absurd user input.


2. The Controller is the application runner, it acts as a middleman that contains the functions and methods that return values from the model granted that said inputs and outputs follow precise business logic and security measures. The business logic kept in the controller ensures that the model is kept precise and clean, thus avoiding confusion and mishaps within the backend.


3. The Model is simply the backend where all the custom datatypes and data structures(classes), are created and managed. All the data is stored here, and the model will contain little to no business logic and will remain as small as possible.

Intended Uses

The object-oriented paradigm will be used to its fullest potential as classes and methods will be made effectively whilst also fulfilling pivotal roles in the make of the language. A simple example of a class that may be created is a recipe class that would hold the member variables, overall price, image and a list of strings that would be the ingredients and links that the recipe contains.

Alternatives

1. Kotlin 1.5.0

The object-oriented paradigm will be used to its fullest potential as classes and methods will be made effectively whilst also fulfilling pivotal roles in the make of the language. A simple example of a class that may be created is a recipe class that would hold the member variables, overall price, image and a list of strings that would be the ingredients and links that the recipe contains.

2. Software Design Patterns (MVVM and MVP)

Alternate software design patterns may include MVVM (ModelViewViewModel) and MVP(ModelViewPresenter).

Swift 5.5 - Link

As the Budget Hub application shall follow a native approach, two languages will be used to establish and ensure compatibility with the two main operating systems. Swift is the main language supported by Apples Operating System. It replaced a language named Objective – C and is known to be safe, quick, and easy to develop with.

Inferred Datatypes and syntax benefits

This language infers datatypes meaning that unlike many alternate languages where you must mention e.g., String example = “example”, a developer may simply declare a variable with the keyword “var”, this opens various possibilities as a condition may result in said declared variable, being initialized to a Boolean (“True/False”) or an integer (12), another popular language that utilizes this concept successfully is python. Swift also does not require semi – colons thus making the development process easier.

Note: The following are three examples of inferred types as the type is not statically typed.

Whereas the following code line represents an optional option in the syntax that allows the programmer to statically type the data type that the variable will be initialized to. The information that proceeds the colon will specify the data type the language is expecting.

Safety

Swift is a safe language as “Variables are always initialized before use, arrays and integers are checked for overflow, memory is automatically managed, and enforcement of exclusive access to memory guards against many programming mistakes”. Furthermore, variables are restricted when it comes to setting them to "nil”, meaning that Swift is not as prone to an exception that would encompass attempting to tamper with, or use a nil value. When a variable is set to nil, this is classified as a “compilation error” in opposed to a “run-time error”. Meaning that the compiler will automatically crash, in the instance of a variable being set to nil, and most IDE’s will warn the developer of this error pre-compilation.

Speed

With regards to speed, swift is incredibly efficient thanks to the innovative “LLVM compiler technology” and a fine tuning of the language so that the syntax is as easy to understand as possible whilst also being close to computer language. A mix of built-in functions, methods, and classes, commonly referred to as library's, have been introduced as binary compatible with swift 5. This means that the requirement of including the library's used in the creation of the application is no longer existent as the latest version of the OS library will always be automatically updated and in use by the application.

Hardware Requirement Con

Contrastingly, swift requires an IOS environment that remote developers may not have, with this restriction, there may be multiple complications that follow. To avoid all complications, all IOS developers must be granted a MacBook that they may use as their developing environment thus solving said obstacle.

Swift Foundational Paradigm

Contrastingly, swift requires an IOS environment that remote developers may not have, with this restriction, there may be multiple complications that follow. To avoid all complications, all IOS developers must be granted a MacBook that they may use as their developing environment thus solving said obstacle.

Intended uses

Swift will be used very similarly to Java, an example of how this language may be used is, a class may be named product and this class may hold object member variables including a price, the location, the type and name of the product. This class may then essentially be used as a blueprint to construct various objects that would then be managed and displayed in the fronted. This would be the intended use of this language and the Object-Oriented paradigm more specifically. The MVC model would also be used to ensure a clean backend, a purposeful frontend and a strict and functioning controller.

Alternatives

Before Swift, Objective C was used for a majority of IOS applications. Contrastingly, Objective C is outdated, and no longer receives support from IOS, preceding the introduction of Swift.

MySQL - Link

MySQL is a relational database Management system, or “RDBMS” for short. It was named after its founder's daughter and simply put it is, ‘an open-source database management system that enables users to maintain and manage their own web database systems.’ It is free of charge and may be customized according to the requirements of each individual user, or company. It is written in C and C++, and “can work on different platforms like Microsoft Windows, Oracle Solaris, AIX, Symbian, Linux, MAC OS” (What Is MySQL And Why It Is Used?, 2021) The first question that may be raised when handing over, not only mass amounts, but extremely sensitive data, is “Is this a secure and private platform that this organization can trust?”

The answer to this question is an absolute yes, as the largest and most advanced web applications such as Instagram and Facebook are currently entrusting this SQL platform with their data. The main security measure that MySQL implements is an encryption of data with a particular key that they (MySQL) do not have access to. This ensures the integrity of data management as intruders are not able to decipher said data and information, granted that they manage to enter the databases.

Furthermore, as previously mentioned, due to the fact that MySQL does not hold the key required to unencrypt the data stored on their platform, it is ensured to the user and organization that their data is protected from all threats. On top of said security features that have been implemented that essentially make it impossible to unencrypt data, authentication measures are also executed. It would be optimal to use MySQL for a web application, but despite this fact, it is still usable for an android application that would then use PHP in order to access the data stored in the database. The data that will be stored in said databases may be sign in details/credentials, previous purchases, store preferences, application credits etc. Thus, making this database vital for the success of the application.

GitHub - Link

The GitHub framework has revolutionized the way that programmers collaborate, it has now become standardized. This collaborative platform will be used in the further development of Budget Hub, as it, not only makes collaboration easier and efficient but also far safer. This is due to the version control that GitHub provides, said version control allows the user to access different instances of the repository in case of failure or unwanted code. It is also required that all programmers know how to use the command line in order to push and commit to a repository. This is due to the limitations that GitHub Desktop places on its users.

JIRA - Link

The JIRA platform is a collaborative software tool, allowing programming teams to pass their program through different phases/stories according to the sequence they choose to follow. In the beginning there will be a meeting between the programmers using the Fibonacci sequence in order to determine the level of difficulty to build the software required. After the meeting, the program will begin with JIRA allowing the team to either create their own project sequence or use the one they supply. Task allocation will all be managed by JIRA whilst simultaneously displaying the progress and priorities of said tasks such use of Kanban board in order to display and visually represent each team member's performance, and possibly re-allocate tasks depending on each person's workload. JIRA cultivates the same type of benefits.

The format that this software uses in order to ensure that each task is completed to the organization's satisfaction is as shown below.

In the diagram/roadmap above, there are 5 phases, the first simply means that the task is now ready to be completed but has not necessarily begun yet. If it stays in this stage for too long, the priority of this task will be increased. Proceeding the beginning of the task, the developer/employee will mark the task as in progress, this is a broad section, and one that may not be deciphered unless further communication is conducted. As a programmer, this section may be halfway finished, or 99% complete. Due to this high chance of miscommunication, it must be stated that this tool will not replace team communication but enhance and encourage it.

When the task is under review, the task has been somewhat completed, and is now ready to be tested and reviewed. This section is to be done by another team member with the skills required. If the reviewer notices flaws and inconsistencies in the work supplied, the task may move back into an in-progress story. On the other hand, if the task is deemed worthy of being finalized, and is up to the expectations of the reviewer, it will be sent to the final approval section. This phase is of utmost importance, as this program is highly likely worth a great amount of money, and if it is not completely assessed and confirmed before pushing it to production, massive complications may arise. Therefore, JIRA has used a simple two tick system, that is not satisfied with only one publisher's opinion on the task, but two. Once they are both satisfied, the task is pushed to the main branch that will then be a part of the application.

As shown in the image above, the website encouraged the use of a standard subscription, due to the hypothetically small number of members in the app development team. The price is $7.50 per person which would equate to about $1800 per year

IntelliJ - Link

IntelliJ IDE (Integrated Development Environment) was developed by JetBrains, the creators of Kotlin. Said IDE has a reputation amongst backend Java and Kotlin developers. It is known for its intelligence in the “Smart completion, Chain completion, Static members completion, Data flow analysis, Language injection, Cross-language refactoring's, Detecting duplicates, Inspections and quick-fixes” (Best Java IDE 2021 | Most Popular Java IDE for Coding, 2021) domains.

It has three modes, compensating for all types of programming preferences, including a high contrast mode, a dark theme mode and the widespread despised light mode. It has different appearances also, that Its debugging tools use smart annotations, revealing where an error may occur, and the Boolean results in a specific statement, it also provides a list of variables and their contents. In the end of the day, Java is Java, and the quality of the code will not vary much depending on the IDE, with that being said the Java developers will be granted not only the community edition of the IDEA but “a proprietary commercial edition.” (Best Java IDE 2021 | Most Popular Java IDE for Coding, 2021). The paid “Ultimate” version of this IDE is approximately $500 a year per user.

XCode - Link

XCode is a platform most commonly used for IOS Swift application development, XCode is the foundation upon which many IOS developing teams stand upon, utilizing its fullest potential as a platform that not only provides nice appearance and minute features, but also effectively integrates SwiftUI, in order to remove the requirement from the developers, to run the code on another platform, or a device, as XCode compiles and reveals the UI in the latest format. The developer may choose to view their application on different IOS devices, and closely analyze said application behavior accordingly.

According to the table above, the members of the Hex Clan team are moderately incompetent with regards to backend tools and technologies, the software listed are essential to the furthering of the application on a mobile app level. This outcome was hypothesized as the tools listed require high skill level to comprehend and utilize. Furthermore, said platforms are specific to those that have specialized, not only in the field of computer science, but in the specific platform. As the members in the team are all still at a tertiary level education, and in first year, there is not one single expert, and little competency in said areas.

Hardware and Peripherals

With the software requirements in mind, the following hardware and peripherals recommended are as follows:

Laptop or Desktop Computer

• Specifications :
1. CPU: Intel i7
2. GPU: Not necessarily required, may use CPU graphics, but not recommended
3. RAM: DDR4 16GB or more.
4. Storage: Minimum of 500 GB of SSD storage.
5. Screen size : Minimum of one screen 15” Two screens, one landscape and the other portrait recommended.
• Suggested Systems and Costs:
1. XPS 15 Laptop intel 17 11th gen - $2,899.01(Dell, n.d.)
2. IdeaPad L3i 15" – 11th Gen Intel - $1,289.00(Lenovo, n.d.)

Peripherals

1. Computer Mouse
2. Computer Keyboard
3. Computer Monitor

Reference List

Front-end and Design

• Adobe n.d., Creative Cloud pricing and membership plans | Adobe Creative Cloud, www.adobe.com.
• Agrawal, N 2021, What is SASS/SCSS?, TechNik, viewed 5 November 2021, < https://nikitaagarwal.hashnode.dev/what-is-sassscss>.
• Allanwood, G & Beare, P 2014, User experience design : creating designs users really love, Bloomsbury Academic, London ; New York, p. 14.
• Apple n.d., 10.2-inch iPad Wi‑Fi 64GB — Silver, Apple (AU).
• ― n.d., 24-inch Blue iMac with 4.5K Retina display, Apple (AU), viewed 4 November 2021, < https://www.apple.com/au/shop/buy-mac/imac/blue-24-inch-8-core-cpu-7-core-gpu-8gb-memory-256gb#>.
• ― n.d., Buy 13-inch MacBook Pro, Apple (AU), viewed 4 November 2021, < https://www.apple.com/au/shop/buy-mac/macbook-pro/13-inch>.
• Balagun, O 2021, What is JSON?, Beginner’s safe space., viewed 6 November 2021, < https://olabayobalogun.hashnode.dev/what-is-json>.
• Canva n.d., Pricing, Canva.com, viewed 4 November 2021, < https://www.canva.com/pricing/>.
• Codecademy 2021a, What Is Angular?, Codecademy News, viewed 6 November 2021, < https://www.codecademy.com/resources/blog/what-is-angular/>.
• ― 2021b, What Is React Native?, Codecademy News, viewed 6 November 2021, < https://www.codecademy.com/resources/blog/what-is-react-native/>.
• Dell n.d., Inspiron 24 5000 All-in-One | Dell Australia, deals.dell.com, viewed 4 November 2021, < https://deals.dell.com/en-au/work/productdetail/b5f4>.
• GitHub n.d., Build software better, together, GitHub, viewed 6 November 2021, < https://github.com/about>.
• Jacobs, B 2021, What Is SwiftUI, cocoacasts.com, viewed 13 November 2021, < https://cocoacasts.com/swiftui-fundamentals-what-is-swiftui>.
• Lease, D 2018, TypeScript: What is it & when is it useful?, Frontend Weekly, viewed 6 November 2021, < https://medium.com/front-end-weekly/typescript-what-is-it-when-is-it-useful-c4c41b5c4ae7>.
• Microsoft n.d., Surface Laptop 4 13.5" or 15" – Microsoft Store Australia, Microsoft Store, viewed 4 November 2021, < https://www.microsoft.com/en-au/d/surface-laptop-4/946627fb12t1?activetab=pivot%3aoverviewtab>.
• Miro n.d., Sign up, https://miro.com/, viewed 4 November 2021, < https://miro.com/app/dashboard/>.
• Morris, S n.d., What is AJAX, How Does It Work, and What Is It Used For?, Skillcrush, viewed 6 November 2021, < https://skillcrush.com/blog/what-is-ajax/>.
• ― n.d., What is CSS, How Does It Work and What is It Used For?, Skillcrush, viewed 5 November 2021, < https://skillcrush.com/blog/css/>.
• ― n.d., What Is JavaScript? A Guide for Total Beginners, Skillcrush, viewed 5 November 2021, < https://skillcrush.com/blog/javascript/>.
• Philips, M 2017, Design for Emotion to Increase User Engagement, Toptal Design Blog, viewed 4 November 2021, < https://www.toptal.com/designers/product-design/design-for-emotion-to-increase-user-engagement>.
• Pung, SM 2017, Top 10 jQuery plugins to simplify front-end development, Medium, viewed 5 November 2021, < https://medium.com/@sokemay/top-10-jquery-plugins-to-simplify-front-end-development-fab883f7a30c#:~:text=Used%20by%20over%2070%25%20of%20the%20world%E2%80%99s%20top>.
• Staff Writers 2020, Best Laptop for UI, UX, and Graphic Design, The Designer’s Toolbox, viewed 4 November 2021, < https://www.thedesignerstoolbox.com/blog/best-laptop-for-design/>.
• ― n.d., Discuss JavaFX, www.tutorialspoint.com, viewed 15 November 2021, < https://www.tutorialspoint.com/javafx/javafx_discussion.htm>.
• Turner, D 2021, What is Bootstrap? - Dustin B. Turner, Dustin B Turner, viewed 6 November 2021, < https://dustinbturner.com/what-is-bootstrap/>.
• Vicente, V 2021, What Is HTML?, How-To Geek, viewed 4 November 2021, < https://www.howtogeek.com/752587/what-is-html/>.
• Wacom n.d., Wacom Intuos Pro small, estore.wacom.com, viewed 4 November 2021, < https://estore.wacom.com/en-AU/wacom-intuos-pro-small.html>.

Backend Development and Tools

• Ansari, R n.d., Variable Declaration and Initialization in Java Programming Language | atnyla, www.atnyla.com, viewed 13 November 2021, < https://www.atnyla.com/tutorial/variable-initialization-and-declaration---in-java/0/32>.
• Apple n.d., Swift - Apple Developer, developer.apple.com, viewed 13 November 2021, < https://developer.apple.com/swift/#safety>.
• Dwivedi, H 2019, Data Types in Swift — Where it All Starts, Coding Blocks, viewed 13 November 2021, < https://medium.com/coding-blocks/data-types-in-swift-where-it-all-starts-c1311fa93368>.
• Kramer, N 2020, The Critical Importance of Frontend and Backend Website Maintenance, https://norakramerdesigns.com/, viewed 13 November 2021, < https://norakramerdesigns.com/the-critical-importance-of-frontend-and-backend-website-maintenance/>.
• Staff Writers 2016, Swift Data Types, Top Java Tutorial, viewed 13 November 2021, < https://www.topjavatutorial.com/mobile/swift/swift-data-types/>.
• ― 2021, What Is MySQL And Why It Is Used?, www.softwaretestinghelp.com, viewed 13 November 2021, < https://www.softwaretestinghelp.com/what-is-mysql/>.