Use Case Frontend
The Use Case Frontend is responsible for the interaction with the user (e.g. citizen or civil servant). The User Interface (UI) is visually and technically designed to ease understanding and usage of the displayed functionalities by users. The business logic is managed by the Use Case Backend.
What do we use to build it?
Library for web and native user interfaces
Developer tool
Component library for bootstrapping (in USCT and Consturction Permit demo)
Material-UI
Component library for bootstrapping (in Early Warning demo)
Where do we demo it?
Which conceptual decisions do we follow?
Early Warning Material-UI
React, a popular JavaScript library for building user interfaces, is the chosen frontend technology for the demo. When paired with Material UI, a robust component library that implements Google’s Material Design, it provides a powerful framework for creating responsive and visually appealing applications.
Key Features
Component-Based Architecture: React’s component-based structure allows developers to build encapsulated components that manage their own state, promoting reusability and maintainability.
Declarative UI: React enables developers to describe how the UI should look based on the current application state, making it easier to understand and debug.
Virtual DOM: This feature optimizes rendering by updating only the parts of the UI that have changed, enhancing performance and user experience.
Material UI Integration
Pre-Built Components: Material UI offers a wide range of pre-designed components, such as buttons, forms, and navigation elements, which adhere to Material Design principles. This accelerates development and ensures consistency across the application.
Customizability: While providing a solid design foundation, Material UI allows for extensive customization, enabling developers to tailor components to meet specific branding and functional requirements.
Responsive Design: The library supports responsive layouts, ensuring that applications look great on various devices, from desktops to mobile phones.
USCT Chakra-UI
Both the full-stack USCT demo and the front-end only USCT demo applications live in the same application due to the interconnectedness of the UI and not seeing a point in separating them at this point in time for simplicity's sake. The full-stack demo is an MVP-like application demonstrating how the front-end and the back-end work together when using multiple building blocks to build an application.
The RPC Layer
The RPC Layer is based on the Facade Pattern. In short, we are using it as a configurable API layer for the full-stack USCT demo. It allows us granular control over our API call method endpoints from one location, which is good for demonstrating connectivity between different interchangeable Building Blocks. In addition, the RPC layer can also be configured for different providers, such as MockProvider, APIProvider, LocalStorageProvider, etc.