↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

invoice-web-app

eCommerce TypeScript

Invoice Note (In Progress)

Table of contents

  • Invoice Note (In Progress)

    • Table of contents
    • Overview

      •   <li>
    <a rel="nofollow noopener" target="_blank" href="#my-process">My process</a></p> <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="#building-with">Building with</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="#the-challenge-situation">The challenge (Situation)</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="#expected-behaviour-tasks">Expected Behaviour (Tasks)</a>
      </li>
    </ul>
  </li>
  
  <li>
    <a rel="nofollow noopener" target="_blank" href="#author">Author</a>
  </li>
</ul>

    Overview

    This project uses the STAR approach.

    Screenshot

    Project Links

    Press . on the keyboard to view this project’s code just like in Visual Studio Code

    My process

    Building with

    • Semantic HTML5 markup
    • CSS custom properties
    • Flexbox
    • CSS Grid
    • Mobile-first workflow
    • React – JS library
    • Next.js – React framework
    • Tailwind CSS – For component composition and styles

    The challenge (Situation)

    View the User Stories at the User Stories Markdown File

    Expected Behaviour (Tasks)

    • Creating an invoice
      • When creating a new invoice, an ID needs to be created. Each ID should be 2 random uppercased letters followed by 4 random numbers.
      • Invoices can be created either as drafts or as pending. Clicking “Save as Draft” should allow the user to leave any form field blank, but should create an ID if one doesn’t exist and set the status to “draft”. Clicking “Save & Send” should require all forms fields to be filled in, and should set the status to “pending”.
      • Changing the Payments Terms field should set the paymentDue property based on the createdAt date plus the numbers of days set for the payment terms.
      • The total should be the sum of all items on the invoice.
    • Editing an invoice
      • When saving changes to an invoice, all fields are required when the “Save Changes” button is clicked. If the user clicks “Cancel”, any unsaved changes should be reset.
      • If the invoice being edited is a “draft”, the status needs to be updated to “pending” when the “Save Changes” button is clicked. All fields are required at this stage.
    • Users should be able to mark invoices as paid by clicking the “Mark as Paid” button. This should change the invoice’s status to “paid”.
    • Users should receive a confirmation modal when trying to delete invoices.
    • Feel free not to add custom styling for the date and dropdown form fields. The designs for those fields are optional extras and are mostly for illustration purposes.

    Author



↑