Overview

Our frontend is comprised of a controller (Django, a python webserver api) and a view (React using Typescript, a Javascript framework for web apps). Below are the directions for configuring and running both services.

For most purposes, once everything necessary is downloaded and installed (see below for details), just run the following two commands to be able to use the UI:

• python Django/manage.py runserver
• npm start

Django

Product website: https://www.djangoproject.com/

Before reading below you must install python, create a virtual environment and then pip install Django:

• Install Python (Python 3) here: https://www.python.org/downloads/

• Creating a virtual environment depends on your OS and where you installed python. Here's a good article explaining what to do (for most OS): https://medium.com/analytics-vidhya/how-to-set-a-virtual-environment-in-python-c2a9995d1843

• In the virtual environment run the following to install Django: python -m pip install Django

All code using Django is in the aptly named 'Django' folder. Settings for the web app are located in (from this current directory) Django/frontendurls/settings.py. You can change any of these settings (such as the database that is connected, debug mode, or security measures). To run the server and to make changes, you would (from this current directory) call python Django/manage.py <some command>. Django/manage.py is where all commands for the framework are executed. <some command> has several options, which you can use Django/manage.py help to learn most of. (The important ones are runserver and migrate.)

After running the command, a link will appear that takes you to a home page for the urls. All the urls and the code to see how they operate are in (from this local directory) Django/pages. Django/pages/views.py contains the functions that execute when a url is called, and Django/frontendurls/urls.py is where you can change url names and how url names are assigned to the Django/pages/views.py functions.

React

Product website: https://reactjs.org/

Website for specifics on Typescript: https://www.typescriptlang.org/

Before reading below you must install node.js, which can be done for most OS here https://nodejs.org/en/download/

All code using React is in the directory named clientview. Settings for the application are in both (from this current directory) clientview/package.json and clientview/package-lock.json. Make sure that if you are to change one, you change the other in a matching way. (For example, if you are changing directory name.) The actual Javascript code is in the directory clientview/src. clientview/src/index.tsx is the file that will create the desired web app when called by React.

To start the web application from the clientview directory call npm start. Most code leads to the cientview/src/App.tsx, which in turns calls different components from clientview/src/components directory. The components use aysnc functions to call on the Django urls, so you need to make sure that the Django server is running before calling this code otherwise you will get a blank screen, as there is no data to load to view.