Frontend Deployment

Requirements

• Ensure you have downloaded Visual Studio Code. If not, download it from the following link: https://code.visualstudio.com/download.

Step 1: Download the Source Code

• Click Download the Source Code.
• Extract the downloaded zip file.

Step 2: Update API Endpoint

• Open Visual Studio Code.
• Open the .env file and replace the API endpoint values with the corresponding API IDs from API Gateway:
  • REACT_APP_API_UPLOAD_URL : Use the API ID of PostInvoiceAPI (AWS API Gateway).
  • REACT_APP_API_INVOICE_URL : Use the API ID of GetInvoiceAPI (AWS API Gateway).
  • REACT_APP_API_UPDATE_TAGS_URL : Use the API ID of GetInvoiceAPI (AWS API Gateway).
  • REACT_APP_API_UPDATE_STARRED_URL : Use the API ID of GetInvoiceAPI (AWS API Gateway).

Step 3: Configure Amplify

• Open Terminal by pressing Ctrl + ~.

• Navigate to the project’s root directory using:

cd <folder_name>

• Run the following command to install dependencies:

npm install

• Run the following command to install AWS Amplify CLI:

npm install -g @aws-amplify/cli

• After installation, verify that AWS Amplify CLI is installed successfully by running:

amplify -v

• Use the following command to configure Amplify:

amplify configure

• In the Amplify configuration, proceed as follows:

  • Region: Select us-east-1.
  • Access Key ID: Enter the access key of the IAM User you created.
  • Secret Access Key: Enter the secret key of the IAM User you created.
  • Profile Name: Select default.

• Run the following command to initialize Amplify:

amplify init

• Configure the initialization as follows:

  • ? Do you want to use an existing environment: Select No.
  • ? Enter a name for the environment: dev.
  • ? Select the authentication method you want to use: AWS access keys.
  • ? accessKeyId: Enter the access key of the IAM User you created.
  • ? secretAccessKey: Enter the secret key of the IAM User you created.
  • ? region: us-east-1.

Step 4: Configure Cognito

• Run the following command to add Auth using AWS Cognito:

amplify add auth

• Configure Auth as follows:

  • Do you want to use the default authentication and security configuration?: Default configuration.
  • How do you want users to be able to sign in?: Email.
  • Do you want to configure advanced settings?: No, I am done.

• Then deploy the changes:

amplify push

Step 5: Run the Application

• Start the application by running:

npm start

• Test the following functionalities:

  • Upload an invoice file.
  • View invoice details.
  • View all invoices.
  • Search invoices by ID or customer name.
  • Export to Excel.
  • Filter by date.
  • Sort by total amount.
  • Sort by invoice date.
  • Drag-and-drop for invoice upload.
  • View invoice tags.
  • Add invoice tags.
  • Edit invoice tags.
  • Filter by tags.
  • Mark important invoices.