GreatFrontEnd Projects is now in BETA! For a limited time, get 30% off with the promo code BETA30. Check it out! 🚀

Billing Information Section

Build a responsive billing information section that allows users to update their payment method, email, and address details securely
+300 rep

Project brief

In this challenge, you are tasked with developing a responsive interface that enables users to update their payment method, email, and address details.

Functional Requirements

1. Fields and validation

The table below describes the fields required in the billing form, as well as their validation. Here is what some of the columns mean:

  • Allowed values: Refers to the types of values that the user can type into the field
  • Validation: Refers to the validation to be done when the field is filled and blurred. All validation should nonetheless be triggered at once on Submission, with focus placed on the first field that has validation errors.
Field labelPlaceholderAllowed valuesValidationValidation message
All fields--Required, except "Apartment, suite, etc.""[Field name] is required"
Card number"1234 1234 1234 1234"Digits, up to 16 digits--
Cardholder name"Full name on card"Alphanumeric--
Expiry"MM / YY"Digits, up to 4 to fill up 'MM / YYYY'Cannot be before current date"Enter a valid expiration date"
CVV"CVV"Digits, up to 3--

Email format matches the standard email format (e.g.,

"Please enter a valid email address."
Country / Region

"United States" is chosen by default and disabled. In general, shipping information fields change according to country-specific customs, but we will avoid that complication.

Address"Street address"Unicode--
"Apartment, suite, etc. (optional)"Unicode--
State"State"List of values provided to you in the data--
Zip"12345"Digits, up to 5

Other field requirements

  • [Stretch goal] Detect payment type: For the "Card number" field, it is common to detect the card type and display the logo of the card e.g. Mastercard, Visa or AMEX.

2. Form submission

  • [Stretch goal] Populate database: Design a database schema and populate a database with your own dummy data.
  • [Stretch goal] Create and integrate with API endpoints: Build your own endpoints based on the database schema to fetch data and save the subscription.
  • Submission: On clicking "Save changes", the form should submit the data to your API endpoint, handling responses and errors gracefully:
    • Success feedback: Provide success feedback with "Changes saved successfully".
    • Error response: Handle any API error responses (e.g., 400 Bad Request, 500 Internal Server Error) by displaying an appropriate message such as "Unexpected error. Please try again later or contact support.".

3. State persistence

  • On loading the settings page, the fields should reflect the current user settings fetched from the back end.

4. Error states

  • Data fetch error: Show an empty state message titled "Unexpected error" with the description "We're facing some issues at the moment. Please try again later or contact support.".

General requirements

  • Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
  • Interactivity:
    • Toast notification: This component is used for displaying error messages when it is not specific to any input field
    • Link / Button states: Implement and style links and buttons to reflect different states - normal, hover, focus and disabled.
    • Input field states: Implement and style input fields to reflect different states - normal, focus filled, disabled, error, error filled, error focused.
  • Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari.
  • [Stretch goal] Performance optimization: Code for fast load times with efficient CSS and JavaScript techniques.
  • [Stretch goal] Accessibility and semantics: Follow best practices for web accessibility, such as using semantic HTML and ARIA roles where necessary and using proper alt tags for images.

Resources provided

Design files for desktop, tablet and mobile
High resolution image assets
Starter code with content copy
Style guide for typography, colors and spacing

Support you can expect

Official guides & resources
Development guides written & curated by Sr engineers at Big tech, such as:
Learn from good code
We recommend well-rated submissions using the same stack for your reference
Ask any questions in community
Have any doubts or need help? Ask in the community and discuss with others.