kpalmvik / infrastructure-supply-chain-seed

Infrastructure supply chain seed lean startup technology

Infrastructure Supply Chain Seed Lean Startup Technology (ISCSLST)

ISCSLST is an API driven web application that displays the hourly temperatures and average value for the current day.

By clicking on the "Show me a Trick" button, the monthly consumption for the last year is shown together with the average monthly consumption for the period. Clicking "Reset" will return to the original state.

The data is fetched by the client from the server API, which in turn makes a request to a third party API service returning hourly temperature readings and consumption history.

The application consist of two parts: server and client.

Development

To run the application, the following information must be known and provided in an .env file.

• The APP_ORIGIN for the third party app, for example https://example.com.
• The EMAIL to login to the third party app, for example [e-mail].
• The PASSWORD to login to the third party app, for example password.

To make it easier, an .env.example file exists which can be used as a template.

Note that it is also possible to set the same environment variables using other methods, although the .env is probably the easiest.

1. Clone the git repository
2. Copy .env.example to .env and insert the correct values
3. Install the npm dependencies from inside the project directory:

   $ npm i
   $ npm i --prefix client

4. Start the server and client at the same time:

   $ npm start

5. The web application, running on http://localhost:3000, will automatically open in a web browser.

Both the server and the client are automatically updated whenever the source files are changed.

Technical Details

The server is started by running npm run server. It is running through nodemon, which will monitor for any changes in the source code and automatically restart the server. The server will bind to http://localhost:3001.

The client is started by running npm run client. It is running using the Create React App server on http://localhost:3000, and leverages its proxy feature to transparently proxy the server API. Any request that does not accept text/html for an unknown resource will automatically be proxied to the server on http://localhost:3001.

The server and client are simultaneously started by running npm start, through concurrently.

Server

The server provides a simple API the the client can make a request to. Two endpoints currently exists.

Temperature

/api/temperature returns a JSON structure with the individual temperatures for each hour during the current day, and the (rounded) average temperature.

Example:

{
  "average": 19,
  "entries": [17.8,17,16.7,17.6,17.6,17.7,18.4,17.9,19.7,21.4,22.6,23.8,23.8,23.7,24.1,20.2,18.2,18.3,18.7,17.8,18.5,18.5,17.8,17.6]
}

The server API response is cached for 5 minutes to avoid making repeated requests to the third party GraphQL API. A corresponding max-age header is also set on the response, so that a web browser can cache the response until it expires.

Consumption

/api/consumption returns a JSON structure with the monthly consumption for the last 12 complete months, and the (rounded) average consumption.

Example:

{
  "average": 1171,
  "items": [508.43600000000004,565.178,622.842,758.475,1061.587,1299.573,1605.3,2322.862,2147.029,1617.138,1204.344,336.916]
}

The server API response is cached for 30 minutes to avoid making repeated requests to the third party GraphQL API. A corresponding max-age header is also set on the response, so that a web browser can cache the response until it expires.

Technology Used

The server is based on Express, a minimal and flexible Node.js web application framework.

apicache is used as an Express middleware to cache the API response.

graphql-request is used as a minimal GraphQL client implementation to talk to the third party GraphQL API.

Node Fetch is used as a lightweight implementation of fetch for Node.js. It is used for all network requests, such as fetching the JWT and GraphQL response.

dotenv is used to allow configuration of required information in a single .env file.

Client

The client is a static HTML website with corresponding JavaScript that makes a request to the API provided by the server. The data is automatically updated every 30 seconds, although the server API is cached so most of the responses should return almost instantly.

Technology Used

The client is based on Create React App to quickly create an efficient development environment.

The server API data is fetched from the server API through SWR.