Skip to content

Latest commit

 

History

History
99 lines (76 loc) · 3.26 KB

README.md

File metadata and controls

99 lines (76 loc) · 3.26 KB
Raw

Quantum Modeling App

Computational Nano Lab, UFL

Architecture Overview

image

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.

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

  2. 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

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