[Scope Reduced] Insurance Site Part1 ReactJS Responsive UI Prototype

Challenge Overview

• Build the responsive prototype for Insurance Site

 

Project background

• Woodburn is a fictional organization that exists only for site demonstration purposes. 

• Woodburn provides Health & Life Insurance to individuals and families in the USA.

• They pride themselves on providing personalized experiences to their policyholders, including help finding the best policy for their needs, and identification of local facilities where they can seek health care services in-network that they need.

 

 

Technology Stack

• ReactJS Latest

• HTML5

• Javascript

• SCSS

• react-intl-universal: https://github.com/alibaba/react-intl-universal

 

UI Requirements

Notes:

• Load the data from JSON files. You must not hardcode any test data into the code.

• Internationalization support is required, the app should detect the browser language and show the texts in the corresponding language. Please create mockup translation texts for demo purposes. For mockup translation text, you can use english-text with "_T" suffix. 

• Here are the marvel app links

  • Mobile - https://marvelapp.com/221hhheg

  • Desktop - https://marvelapp.com/e2iff4a

• The marvel app screens are clickable, please follow the navigation

 

Screens Scope:

• The numbers from the mobile screens are used (e.g. 02_Loging)

• Only the 01_xx - 12_xx screens are in scope. The other screens will be covered in the next challenge. 

• Their corresponding Desktop screens are also in scope

 

 

Login Header and Hamburger Menu (Overall)

• If the user is not logged in, show the “Sign Up” in the header, and the Hamburger Menu will have a “Login” option. 

• If the user is already logged, show the user profile icon in the header, and the Hamburger Menu should have a “Logout” option instead. 

 

Home (01)

• Tap the hamburger button, show the menu. 

• Tap signup button, go to the create account screen

• Tap view full benefits button, go to the full benefits screen

• Tap the zipcode input, go to the Insurance Enrollment Wizard

 

About Us (02_AboutUs)

• All are deadlinks except the ones in the header

 

Login (02_Login)

• Only the email/password login needs to be implemented. 

• Tap signup go to create account screen

• Tap login, and if login successfully, go to the home screen. 

• Forgot Password - deadlink

• Continue with Apple / Google - deadlinks

 

Contact Us (03_ContactUs)

• “Send this Message” - deadlink

• Get Directions - deadlink

• hello@xxx - the phone and mail icons should work

 

Insurance Enrollment Wizard (04 - 11)

• 04 - select insurance type step - when the user enters the zip code, the text on the right is automatically populated

• 05 - complete form (details) step

  • Tap car value/coverage, show a pull-up list to allow the user to select a value (do the same for the other selection input)

  • allow the user to take a photo through the camera for the driver’s license 

• 08 - create account step is not needed if the user is already logged-in

• 09 - select insurance plan step

  • the discount expiration should show as a count-down timer

  • tap the “Change” button goes back to the complete form (details) step

  • tap Ratings, show a pull-up list to allow the user to select a value

  • tap any insurance plan goes to the next step

• 10 - review your input step

  • all inputs should be displayed on this step

• It should create an insurance plan with pending status

 

My Benefits (12)

• This is the my benefits screen

  


 

GENERAL REQUIREMENTS

• Must use ReactJS and follow the provided design.

• Searching/filtering should work whenever applicable.

• Pagination should work whenever applicable.

• Filtering/pagination happens on the server-side so you need to pass the query parameters and the server is expected to return the pagination info (pageSize, total, etc).

• Implement popup for confirmation and warning messages. Do NOT use browser alerts, but use custom styles popups as shown in the design

• Show loading spinners when populating data from local JSON to UI

• Implement validation errors (for example login error as shown in design), and restrict user inputs based upon data type (for example, for a year input, the user should only be allowed to input numbers). 

• No linting errors

• No errors with prod build

• You are expected to create a detailed README file including information on how to set up, run and verify your application.

 

CODE REQUIREMENTS

• Functional component and React Hooks should be used

• CSS Module must be used to avoid CSS conflicts.

• ES6 syntax is preferred, as Babel has been set up to handle transpiling the syntax to the current JavaScript standard.

• Use .js extension for React components; using PascalCase for filenames. E.g., ComponentName/index.jsx.

• propTypes should be defined for components, and defaultProps should be provided when necessary. You need to define types for the array item and inner objects too. 

• Do not create a single .scss file for the whole app. Each component should have its own stylesheet file.

• Ensure that there are no lint errors.

• You should use SCSS and you need to use flex instead of float.

• Follow a clean folder structure.

• Create reusable components.

 

JAVASCRIPT REQUIREMENTS

• All JavaScript must not have copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

• Use linter for code quality

 

LICENSES & ATTRIBUTION

• Third-party assets used to build your item must be properly licensed and free for commercial use. MIT and Apache v2 licenses are ok, for any others please check with us to get approval first.

• Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.

 

BROWSER REQUIREMENTS

• Windows: IE 11+, Chrome latest, Firefox latest

• Mac: Safari Latest, Chrome Latest, Firefox Latest

• Chrome browser on android phone/tables and Safari browser on iPhone and iPad

• The UI should be responsive. 

 

���

Final Submission Guidelines

Submission Deliverable

• Source Code

• Verification Guide