Quantum Modeling App

Computational Nano Lab, UFL

Architecture Overview

Getting Started

Prerequsites

• Node 👉 install here
• Miniconda3 👉 install here

Installation - Part 1

1. Clone the repository

   git clone https://github.com/uf-quantum-computing/quantum_modeling_app.git
   

2. Install NPM packages

   cd src
   npm install
   

3. Start the frontend development server

   npm start
   

Installation - Part 2

1. Create a conda enviornment for the project

   conda create --name my_env_name python=3.12
   

2. Activate conda enviornment

   conda activate my_env_name
   

   At this point you should see that conda is activated to the my_env_name and you should verify that the proper python version is being used. You can check this with the below command which should be python 3.12.

   python --version
   

3. Install dependencies

   cd quantum_app_backend
   pip install -r requirements.txt 
   

4. Run backend locally

   python app.py
   

5. Run backend in Docker container

   docker build -t flask-backend .
   docker run -p 3001:3001 flask-backend
   

Running Locally

1. Take the port that the backend is running on and replace it in /src/setup/host.ts.

For example, I run the backend and I get "Running on http://127.0.0.1:3001". Take this http://127.0.0.1:3001 address and assign to the host variable (leave out the last /). Note: This file is not tracked by Git.

2. Utilize 2 terminals in parallel to run the back and the frontend.

3. If you're cloning the project for the first time and changes to /src/setup are being tracked, run:

git update-index --assume-unchanged src/setup/

File Structure

• /src/ - Contains the source code for the React website.
  • /src/App.tsx - The main entry point for the website. This is where the React Router is set up to route to the different pages.
  • /src/pages - Where each sub-page files are located
• /backend_functions/ - Contains the backend code for handling requests and generating model gifs
  • /backend_functions/model_generators - Contains the python code used to generate each model, ie interference.py or tunneling.py

Tech Stack

React

This project was bootstrapped with Create React App.

npm start Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Learn More

• You can learn more in the Create React App documentation.
• To learn React, check out the React documentation.

Sonar Cloud

Sonar Cloud is integrated with GitHub Actions to statically analyze code through the .github/workflows/build.yml and sonar-project.properties files.

You can learn more through Getting Started with SonarCloud