# The Development of a Prototype Solution for Detecting Wear and Tear in Pedestrian Crossings
## 3 Prototype
### Software Components
#### 3.3.3 Web Application (Front-End)  
The \"CrosSafe\" web application was developed using the ReactJS framework [43] with the TypeScript variant [44] to ensure a solid basis for the development and maintenance of the code. This offers the advantage of allowing static types to be defined for variables, properties, and functions, which makes error detection easier and helps to improve the quality of the code developed. Furthermore, to optimize the development flow and ensure efficient construction of the application, it was decided to integrate Vite [45] as the build tool. This tool is distinguished by its ability to provide an extremely fast development server and an optimized build pipeline. It also takes full advantage of the capabilities of modern browsers, importing ES modules directly, which results in a more agile development time and a more fluid creation experience. About the styling of pages and components, a modern and efficient approach was adopted, combining Tailwind CSS [46] with the Shadcn UI component library [47]. Tailwind CSS provides a methodology based on utility classes, making it easier to style elements quickly and consistently. In turn, the Shadcn UI component library offers a wide variety of pre-designed and styled-components, speeding up the development process and ensuring a visually cohesive experience throughout the application. The communication between the API and the CrosSafe application can be observed in the sequence diagram in Figure 26. This communication employs two API endpoints: the /crosswalks endpoint, which retrieves all the documents recorded in the database to date, and the /crosswalks:id endpoint, which allows a crosswalk to be marked as repaired and subsequently removed from the database. The stored data can then be viewed in the CrosSafe web application. This application contains two pages: the home page and the dashboard page. The mockups of these two pages are shown in Figures 27 and 28, respectively. Figure 26: Sequence diagram of communication between the API and the CrosSafe application. The dashboard page shows all the detections in the database to date. This page consists of three components:  
* Count of crosswalks by state of degradation (Figure 29);
* Map showing the location of the detections (Figure 30);
* Table with additional information on the crosswalks detected (Figure 31). Figure 28: Mockup Dashboard page. Figure 27: Mockup Home page. Figure 29 illustrates the initial component of this page, which presents a comprehensive overview of the crosswalks, categorized according to their respective states of disrepair. This component serves to consolidate the information presented in the subsequent components. Regarding the map component, the Leaflet library [48] was employed. This library provides a robust framework for developing interactive maps in JavaScript, facilitating the seamless integration of an interactive map and the precise display of the underlying data. Figure 30 illustrates this component in greater detail. The map displays the location of the crosswalks and their state of disrepair. The states are indicated by three different colors: green for crossings with no wear, yellow for moderate wear, and red for severe wear. In the context of ReactS applications, there are various approaches to rendering large numbers of data lists [49]. One such approach is the use of pagination, which allows for the control of the number of items displayed within the application. This method divides the items into several \"pages\" if the number of elements in the list exceeds a defined threshold. Figure 31 depicts the implementation of the table component of the dashboard page using the pagination method. This table presents a variety of data, including the status,  
Figure 31: Table with additional information on crosswalks detected using the pagination method. Figure 30: Interactive map in the application. Figure 29: Crosswalk counting component by state of degradation.