Created a sample insurance picker tool single page application as a part of class project.
Viewing of the plans will let users to understand the hierarchy of the plans with their categories. The application will provide suitable different viewing options to provide a focused or all option for comparing purpose. The flow of the application will have following steps (screens):
The screen will provide one of the two options, Limited and Comprehensive. User will choose one of the two options by clicking “Select” button for the appropriate section.
Clicking the select button in screen 1 will display the screen 2 without reloading the page in screen 1.Screen 2 will show all individual plans for the selected coverage.
User enters personal details. By default the form will display the form for a single person.User can add information for multiple persons by clicking “ Add more insured” link. By clicking the link the form will show another block of personal detail form with start date and end date being pre-filled with the insured #1 detail. The form will also have standard required field check. Start date and end date can be added/edited only by clicking the calendar icon next to the date input field.
Upon successful submission of the form, user will get a “Thank you” page as a confirmation. The content should include thank you text addressed to user with their first name.
Note:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent