Skip to content
E4E
PROJECTS

Travel agency config dashboard

A config management dashboard for a travel agency.

GITHUB
  • React
COMMITS
3
FIRST
Jul 2023
LAST
Jul 2023
ACTIVE MONTHS
1

Travel App

A config management dashboard

Setup

image

The app contains 2 folders, myproject for the Django-base backend that exposes REST-APIs and the React-based frontend, which exposes the frontend part of the entire web-app.

To run the Django app, change to the myproject directory and spin the django server up:

text
cd myproject
python manage.py makemigrations
python manage.py migrate
python manage.py runserver

Now let's spin the front end up, make sure to install the npm packages

text
cd front-end
npm install
npm start

we're good to go @http://localhost:3000/

image

Creating Configs


  • Select the create config option.
  • Since there were a lot of values, I decided to handle the form randomly!
  • Use the Random button to generate a random config, and then hit submit.
  • This creates a config and fetches the entire data, again.

createConfig

Live Toggle

  • The app allows us to change the Live flag of a config.
  • Note that, only 1 and atleast 1 config is live at any time.
  • On calling the live function, the older live value is removed and the newer config set it's live flag to true.

image

Calculating Live Config Price

  • Price calculation takes place using 3 parameters, distance, time, and waiting time.
  • It uses the values from the Live config only.
  • It supplies the values as an object.

LivepriceCalculator

Easter Egg - Data Visualizer

  • Click any table of config, and the line graph for the Day based pricing pops up.
  • Provides a simple representation for debugging purposes

image