dynamic_website_arch.md

Dynamic Website Design & Architecture Plan

• Create a frontend with React

  • Use React Router enables "client side routing" and having multiple pages
  • Use Material UI, AntDesignfor state management
  • Use Styled Components for small, reusable components
  • Use Redux for state management and eliminate the need to use props or callbacks.

• Create a server & API endpoints with Node.js & Express

  • The API endpoints will be used by the frontend to:
    1. run the respective julia script and generate data/images
    2. store the images in the database
    3. retrieve the images from the database
  • Use Julia to perform computations on a webpage

• Create a database with MongoDB

  • Used to store the images generated by the julia scripts

  • Organize by quantum phenomena (e.g. tunneling, wavefunction, spin, etc.)

  • Images will be named as such: <phenomenon_name>_<par1>x<par2>x<par3>.png. For example, tunneling_1x1x1.png or wavefunction_1x1x1.png

    • The images can then be easily retrieved by the frontend by querying the database for the image with the name <phenomenon_name>_<par1>x<par2>x<par3>.png

• Deploy application

  • Top Free Services To Deploy Full-Stack Applications
    • Heroku
      • Deploying a Full-Stack App with Heroku
    • Vercel
      • Node.js/MongoDB Backend example w/ Vercel
    • AWS

Potential Challenges

• Storage management
  • Images are large files and will take up a lot of space
  • Need to find a way to store the images in the database without taking up too much space
    • Images should probably be deleted after a certain amount of time
• Runtime speeds
  • The julia scripts can take a long time to run
  • Need to find a way to:
    • Run the scripts on a server
    • Run the scripts in the background and not block the frontend
    • Run the scripts in parallel
    • Avoid running the a script if the image is already in the database