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

Billing History Section

Build a responsive payment history section that allows users to view and download their past invoice details
+300 rep

Project brief

In this challenge, you are tasked with creating a user interface according to the specific layouts provided for desktop, tablet, and mobile views. The section will display a list of invoices, including details such as the date, status, amount, and associated plan, with an option to download each invoice.

Apart from the provided designs, which have been adapted for desktop, tablet and mobile, you will be provided with an API to fetch the data.

Functional Requirements

1. Invoice listing

Display each invoice with details such as:

  • Invoice date (e.g., "1 Mar 2024")
  • Status: "Paid", "Pending"
  • Invoice amount (e.g., "$10.00")
  • Plan: "Starter plan", "Basic plan", "Professional plan"
  • A link or button for downloading the invoice – "Download"

2. Fetching data dynamically

  • Dynamically load and display invoice data as retrieved from the back end server, including real-time updates if applicable.
  • [Stretch goal] Populate database: Design a database schema and populate a database with the given provided data.
  • [Stretch goal] Create endpoints: Build your own endpoints based on the provided or created database schema to fetch data.
  • API integration: Use the provided or created endpoints to fetch data.

3. [Stretch goal] Download functionality

  • Host and serve invoice PDFs upon user clicking "Download".
  • Provide a secure method for users to download invoices directly from the server.
  • API integration:: Integrate with blob hosting services like Amazon S3 to generate secure and time-limited URLs for downloading invoices to ensure that access is controlled and secure.

4. Various states

  • No payment history: Show an empty state message titled "No payment history available" with the description "Once you start making transactions, your payment details will appear here.".
  • 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.
  • 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
API specifications and sample data

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.