User Interface
Overview
Before development, let's understand the project page planning and design.
💡 Tip
Frontend frameworks also have the concept of components, which break the application into smaller modules, making it easier to build the user interface and increase reusability.
/home
The homepage has two tabs: Apply and Search.
- Apply displays all services available for application, categorized by type and relevant agencies. Clicking on a service item directs users to the form page. It also has a fuzzy search function for quickly finding services by title.
- Search displays ongoing and completed cases. This page connects to the backend API. For details, refer to Case Progress.
/form/:id
The form page retrieves the form structure via API based on the id passed when a service item is clicked on the homepage. The form is divided into two main sections:
- Basic Information
- Service Application Information
Basic Information is common for all, while Service Application Information is generated through our predefined API response JSON format to build the necessary form fields.
The form component also provides required field validation. When the next step is clicked, it validates all required fields and prompts the user to fill in any missing fields. If all fields are correctly filled, a preview screen is shown for user confirmation.
