This is an interview application built for This Dot Labs

Welcome to this sample application that leverages two configurable proxy API endpoints against REST Countries API.

There are three components to this system (microservish)

• React UI - code

The following components are on the free hosted tier level of Render and are shutdown when not in use. Accessing each component from a shutdown state requires it to spin back up and this can delay requests for a minute or so.

• .NET API - code built with ServiceStack
• FastAPI API - code built with FastAPI

Proud of

It has a map!!!

Highlight

Vite is great for making React apps, no more webpack tears

Improvement

Rebuild out a new grid instead of using this one

Demo use

Flow

There are limited options on the user interface, but it is meant to show some React use and to work with the defined APIs. There are input select options to choose from and a free text search field. The next section is a JSON based grid component that renders the data returned from the API for exploring. At the bottom is a display map that picks a random row from the returned results for a visual representation.

Development

This project was built using the default Vite React template.

• Make sure to set all your .env variables.
• The .env.example file in this repository has the necessary keys you must fill out
• You will need to generate a free MapBox gljs API key MapBox.

VITE_APP_MAPBOX_TOKEN=<Your MapBox API token> get one here https://account.mapbox.com/access-tokens/
VITE_APP_API_PYTHON_URL=<Url to Python FastAPI> clone this https://github.com/Siliconrob/render-native
VITE_APP_API_NET_URL=<Url to ServiceStack API> clone this https://github.com/Siliconrob/calamansi

• Node.js Please install at least Node.js version v22.1.0 and npm.
• Run npm install to initialize all the dependencies

Render Deployment

• Signup for a free Render account. You won't regret it :)
• Connect your GitHub account
• Choose the Static Site option
• Setup a name
• Use the defaults and set the Build Command to npm install; npm run build
• Make sure to copy your data from your .env file you setup earlier into the Environment settings
• Trigger a manual deployment

!!REMEMBER!!

• Make sure you setup your accompanying Python and .NET APIs

Example render setup