ProServe Portfolio Project

(v.0.2.9) Last Updated: 2019/08/21

Live links

• From CloudFront (dev-branch): https://d1kwrbspoyxfwl.cloudfront.net/
• From Deployment Pipeline (master-branch): https://master.d2mlzdi9cwhxfg.amplifyapp.com/

Back-end

Project Overview

Project set-up:

CodeCommit - repository CloudFront - static web hosting Deployment pipeline - amplify build pipeline, draws commits and continuously builds from master

Data Layer

• Database structure configured in DynamoDB
  • Offerings Table
    • Create Global Secondary indices (GSI)
      • Short-Index - Returns only data necessary for short cards. Performance impact: data retrieval 2x as fast as full table scan.
      • GSP-Index - Allows querying of the offerings table by GSP rather than offering name.
  • OfferingSales Table
    • Create Global Secondary indices (GSI)
      • customer_name-index - executes rapid search on Customer_name to only retrieve customer name. This index enables auto-filled form suggestions for choosing the customer name.

Compute Layer

• Lambda Compute Model
• Lambda function for retrieving data from DynamoDB through API Gateway

API Layer

• /api

  • /customer
    • /match
      • get
      • options
    • /predict
      • get
      • options
  • /db
    • /query
      • get
      • options

• API endpoint for offerings

  • Enable parameter querying through API Gateway

• Lambda function to generate suggestions

• API endpoint for suggestions

• Login UI done, yet to add SSO

  • Temp auth: awsintern | proserveportfolio

Progress: (Front-end)

• Project set-up:
  • App structure / hierarchy
  • ReactDOM & Webpack configs
  • Router & Switch
  • Styling: SCSS, Styled-Components, Bootstrap
  • Assets: logos, backgrounds, constants, utilities, colors
  • Storybook
• Login page (UI only)
• 404 page
• Navigation Bar
• Offerings page
  • Fetch offerings data from API
  • Render Cards as components
    • Card component
  • Filtering & Sorting
    • Checkbox component
    • FilterForm component
    • FilterBar component
  • Offering expanded view
    • Modal component
      • Logic & callback functions
      • UI
• Loading Spinner component
• Customer page
  • Added tables
  • Modal cards expand on Suggestion click
  • Auto-suggestion for customer name
  • Retrieve customer data from Salesforce DynamoDB
• Relations editor page

To-do

See Trello board for details.