AWS serverless typescript demo - Backslash Frontend assigment

React app representing the code flow of AWS serverless typescrip Demo Api metods.

Aws demo app consists of an Amazon API Gateway backed by four AWS Lambda functions and an Amazon DynamoDB table for storage.

 

   

App data 📦

Manually created csv files, one for nodes and another for the relations between them.

Reading csv files didn't work due to  `versions` incompatibility.
Instead, defeining const representing the csv string for each file, reading and parsing it.

The data consts are inside the app.consts file

 

Node Data

Rows of data, seperated by '\n'.

• First row contains the headers
  • Id : string
  • Label : string
  • Type : 'input' (API node) | 'output' (dynamoDB node) | 'default' (lmbda node)

Relations

The relations data, has a diffrent structure, in order to present diffrent flows in the app. Groups of Data, each one contains flow id, and pairs of node id's seperated by a comma.

flowId + '\n' + sourceId,targetId' + '\n' ....

Groups are seperated with a space after '\n';

For example:

flow 1\n1,2\n2,6\n flow 2

   

Local Setup 🚀

1. Install Node.js.
2. Clone the repo from Github.

git clone https://github.com/mayareu/backslash-frontend-assigment.git

3. Navigate to the root directory and install dependencies through npm.

cd backslash-frontend-assigment
npm install

4. Run npm start

   

Technologies 🧬

• React v18.0.14
• Typescript v4.7.2
• Nx v14.4.3
• MobX v3.4.0 (mobx-react-lite)
• React Flow v10.3.12
• Jest v27.5.1