Anzeigen Portal Docs

Appearance

Frontend ​

The frontend was built using Vue.js. The frontend component of RefArch was utilized for this purpose.

Prerequisites ​

  • Node.js 22 LTS (22.11.x - 22.x.x)
  • Docker (for AppSwitcher)

Structure ​

The frontend component is structured into different folders with distinct functions.

API ​

This folder contains all functionalities related to API requests to the backend. This includes the client generated from the Open-Api specification. The client can be easily regenerated with the following command:

shell
openapi-generator-cli generate

No additional library was used for the generation. The generated client is based on standard fetch functions.

Additionally, this folder contains functions for requesting:

  • userinfo endpoint of the SSO
  • info endpoint of the Spring backend
  • healthcheck endpoint to check the status of the ApiGateway

Components ​

This folder contains all components created in Vue.js for the web application. All components are divided into general categories based on their usage. At the top level, we have the AdDialog for creating new ads or editing existing ones, and the AdList for displaying ads found through a search query. Additionally, there is the AdNavBar, which primarily includes all filter and sorting options, and the SnackbarQueue for displaying messages to the end user.

For the navigation bar, all individual components are located in the Filter folder. The common folder contains general components such as a simple YesNoDialog or the AccountCard.

For the admin page (admin), the settings options are divided into individual components. It is noteworthy that a new system setting can be easily added by updating the OpenApi specification and adding a "Row" in GeneralSettings. You only need to choose the type of setting - File, Number, TextSelect, or Text. Currently, there is no component for a Boolean setting, as it has not been required so far.

All components related to an ad are further divided into three display modes:

  • Details: Detailed view showing all possible parameters and specified options.
  • Dialog: Editable fields for creating and editing an ad.
  • List: Reduced view showing only the most necessary information within a list.

Composables ​

Vue.js describes reusable components as composables. These are stored in this folder. Generally, all API requests are wrapped with composables. The approach was inspired by TenStack. Each composable provides a call function and dynamic refs to the received data, any errors that may have occurred, and whether the current request is still running. They are categorized according to the respective controllers in the backend.

The composable useSnackbar wraps the use of the built-in snackbar. To send a message to the user, simply call the composable:

typescript
snackbar.sendMessage({
  level: Levels.INFO,
  message: "Some Msg",
});

Additionally, all event buses used here are registered in useEventBus. An event bus can thus be easily imported and used as a constant.

With useDownloadFile, files can be downloaded via browser functionality. This includes, for example, the terms and conditions file or attached files in an ad.

Locales ​

The web application uses i18n, which is actually intended for localization or offering different languages. Currently, only one language (German) is offered. The tool (i18n) serves to outsource all texts of the application into a common file (as long as none were forgotten).

Plugins ​

This folder contains all plugins used in Vue.js, each configured in individual files. The routing information is described in router, as well as the theme used by Vuetify in vuetify.

For the aforementioned localization and future-proofing, the configuration is in i18n. This also includes the ability to dynamically change the language throughout the application via function.

Stores ​

This web application utilizes state management through Pinia Store. All used stores are located in different files. The stores provide various access methods to the data contained within them. Some stores are populated with data in "special" ways - this includes, for example, the ads themselves.

Types ​

This folder contains "custom types," i.e., TypeScript classes or interfaces that are needed beyond the classes generated by the client.

Util ​

Functionalities that are needed in multiple places are outsourced to this folder. Specifically for this application, a mapping for the sorting dropdown is stored here.

Views ​

The views are the individual pages that can be directly accessed in the web application via a path.

  • AdminPage (/admin): Describes the admin page with options for adjusting categories and other system settings.
  • BoardPage (/): Essentially the homepage, which includes the listing of ads and general sorting options for them.
  • DetailsPage (/ad): Shows the detailed information of an ad with a large display of the image and contact information.