Architecture Model
The website frontend of the Artsee application has a GUI that displays the data requested by the user and takes in user inputs to trigger events and send data to the system. Vue.js was used to implement the frontend. Users log into the website and have access to different pages depending on what kind of user is currently logged in (Customer, Artist or Administrator). The interactive elements of the GUI are defined to cover the use case implementations. The javascript scripts for each component contain function calls to the REST API controller allowing the user to send requests to the backend.
The frontend is split into three subsystems representing the different interfaces for each type of user. They all have a similar architecture model but different Vue components and javascript files needed to execute the tasks specific to each user.
The backend is where the calls to the REST API are triggered. The REST API controller then communicates with the service layer to query and/or modify the data that is stored in the database. The service methods are used to access specific object repositories. It can also access the Model through the DAO layer to create new instances of objects that will be saved in the persistence layer or to retrieve data as objects through the JPA repository implementation.