Application structure - lennartdeknikker/frontend-applications GitHub Wiki

The image below shows the component structure of my application. Everthing is loaded in the Appcomponent. Because I haven't implemented a clickable map yet, the application uses a menu to select locations. That's why, at this point, the location menu is rendered within the 'locationsMapComponent. The image above shows what the different components look like in production.

Each component has specific tasks. I tried to build the application in a way API calls are done in the right components, thus not slowing down the application when data is not needed.

AppComponent

This component contains the entire application. It contains the header with a link to the Volkenkunde website and the name of the application and the locations map. The header was meant to show instructions on how to use the application, but that has not yet been implemented.

Locations Map Component

This component should contain a clickable map, but at this stage, just shows the map as background and displays a menu with all the different locations the statues come from. Within this component, the statues list and detail component are loaded when the user makes a selection.

Statues List Component

This component shows a list of all the statues that correspond to the selected location. When this component is loaded, it obtains all the statues from Volkenkunde and stores those in an array. It then passes the necessary values to the detail component whenever a statue is clicked.

Detail Component

This component shows detailed info about selected statues. This info is obtained by the statues list component, but get's passed whenever a listed statue is clicked.