72Hrs - Facade Hapi Service - Create Postman alike UI

Challenge Overview

• Create a postman like UI to call the APIs.   

 

Project background

 

The client wants to build a Hapi service which is able to transform and aggregate the data from remote data and lambda services through configuration. 

 

Technology Stack

• Docker

• NX

• TypeScript

• Angular9

 

Requirements

Create a single page with postman alike UI. 

• It has left and right panels. 
• In left panel,
  • it has an import and export buttons at the top to import the api collection from a local JSON file or save it as local JSON file. 
  • it has a tree view to show the imported api collection. only one api collection needs to be supported. 
  • the root node is the api collection name
    • display the number of requests similar as postman
    • it has options for user to add folder, add request and edit base api url
  • there are api nodes and folder nodes similar as postman
  • the api node has options to rename, edit, duplicate and delete 
  • the folder node has options to rename, add folder, add request, duplicate, and delete
  • when user clicks any api in the tree view, it opens the right side panel for this api. 
• in right panel
  • show the name of the api, it's also editable
  • show the request method and request url
  • Request section
    • show the Params, Headers and Body tabs
    • Params - allow user to add/edit/remove parameters
    • Headers - allow user to add/edit/remove headers
    • Body - show support JSON, form-data and x-www-form-urlencoded
    • user can click Send to send the request. 
    • user can click Save to save the api request to the collection
  • Resonse section
    • show the response body, status code, headers and cookies. 

For the api collection JSON data, you can keep it simple. And please make sure the UI is clean and professional. 

The current UI in facade-hapi-service should be replaced by this UI, but the auth and request signing feature should be kept the same. 
Here is a brief description of the auth and signing feature: 

• when the UI is loaded initially, it will call the /auth api to generate a token
• then whenever sending a request to server, the request will be signed to generate a x-nonce token. 

Note that we need to create a postman UI because the requests should be signed first, which cannot be easily done in the postman tool. 

Final Submission Guidelines

Submission Deliverable

• Patch file
• Verification Guide