1.1 Introduction
The following report provides a comprehensive overview of the development and essential
consideration surrounding the Virunum City toll payment demonstrator application. While
originally designed solely for demonstration purposes, the application has undergone
enhancements aimed at elucidating the process for the audiences better understanding.
In constructing the framework, we employed React, TypeScript and Tailwind CSS to elevate
the user experience. The report underscores the pivotal role of the frameworks, meticulous
API design and the imperative implementation of security measures in guaranteeing the
efficiency and safety of the Virunum City toll collection system. These insights serve as a
cornerstone for informed decision-making and continual improvements in both application
development and security protocols.
,1.2 Application Development
The Virunum City demonstrator web application, designed to showcase the frontend of the
forthcoming toll collection system, reflects decisions centred around the framework. The
selected framework comprises of React, TypeScript and Tailwind CSS.
The decision to use React, a widely adopted JavaScript library by Facebook, was driven by the
popularity, streamline developments effort through its component-based architecture,
fostering code reuse, reducing errors, and saving time and resources (O’Grady, 2023). React
enhances user experience, adding dynamism and interactivity, while its fast rendering
contributes to shorter page load time, positively impacting Google search engine ranking
(Modan, 2023). Compared to Svelte, a faster option for smaller projects, React’s popularity
provides developers with extensive resources. The choice between them depends on the
specific project (Hungbo, 2023).
In terms of accessibility, React components like <h1> and <button> promote clear structure,
and the coding includes responsive design for mobile use, featuring a mobile menu triggered
by a hamburger icon in mobile view (see figure 1.2.1).
Figure 1.2.1. Mobile view hamburger trigger
Navbar
1|Page
, React with Tailwind CSS yields a powerful combination. The justification for using Tailwind
CSS is its efficiency in styling complemented by React’s component-based structure. By
expediting styling and instilling more control to the development process, Tailwind CSS
reduces the need for extensive CSS coding, aligning with modern development practices and
ensuring a visually appealing and efficient application (Corina, 2023).
Figure 1.2.2. Tailwind CSS used in Navbar.tsx
The consequence of choosing Tailwind CSS were evidence in the positive impact on the
styling process. It reduces the need for lengthy CSS coding, this is exemplified in figure 1.2.2
where styling is achieved through minimal coding.
In terms of accessibility, Tailwind CSS classes were leveraged to implement focus styles.
Careful consideration of colour contrast was undertaken to choose combinations adhering to
accessibility standards. An example of this can be seen in figure 1.2.3 that defines
background colour and the contrast colour for hovering over the payment button.
Figure 1.2.3. Colour Contrasts for Accessibility.
2|Page
The following report provides a comprehensive overview of the development and essential
consideration surrounding the Virunum City toll payment demonstrator application. While
originally designed solely for demonstration purposes, the application has undergone
enhancements aimed at elucidating the process for the audiences better understanding.
In constructing the framework, we employed React, TypeScript and Tailwind CSS to elevate
the user experience. The report underscores the pivotal role of the frameworks, meticulous
API design and the imperative implementation of security measures in guaranteeing the
efficiency and safety of the Virunum City toll collection system. These insights serve as a
cornerstone for informed decision-making and continual improvements in both application
development and security protocols.
,1.2 Application Development
The Virunum City demonstrator web application, designed to showcase the frontend of the
forthcoming toll collection system, reflects decisions centred around the framework. The
selected framework comprises of React, TypeScript and Tailwind CSS.
The decision to use React, a widely adopted JavaScript library by Facebook, was driven by the
popularity, streamline developments effort through its component-based architecture,
fostering code reuse, reducing errors, and saving time and resources (O’Grady, 2023). React
enhances user experience, adding dynamism and interactivity, while its fast rendering
contributes to shorter page load time, positively impacting Google search engine ranking
(Modan, 2023). Compared to Svelte, a faster option for smaller projects, React’s popularity
provides developers with extensive resources. The choice between them depends on the
specific project (Hungbo, 2023).
In terms of accessibility, React components like <h1> and <button> promote clear structure,
and the coding includes responsive design for mobile use, featuring a mobile menu triggered
by a hamburger icon in mobile view (see figure 1.2.1).
Figure 1.2.1. Mobile view hamburger trigger
Navbar
1|Page
, React with Tailwind CSS yields a powerful combination. The justification for using Tailwind
CSS is its efficiency in styling complemented by React’s component-based structure. By
expediting styling and instilling more control to the development process, Tailwind CSS
reduces the need for extensive CSS coding, aligning with modern development practices and
ensuring a visually appealing and efficient application (Corina, 2023).
Figure 1.2.2. Tailwind CSS used in Navbar.tsx
The consequence of choosing Tailwind CSS were evidence in the positive impact on the
styling process. It reduces the need for lengthy CSS coding, this is exemplified in figure 1.2.2
where styling is achieved through minimal coding.
In terms of accessibility, Tailwind CSS classes were leveraged to implement focus styles.
Careful consideration of colour contrast was undertaken to choose combinations adhering to
accessibility standards. An example of this can be seen in figure 1.2.3 that defines
background colour and the contrast colour for hovering over the payment button.
Figure 1.2.3. Colour Contrasts for Accessibility.
2|Page
