chore: update documentation

CONTRIBUTING.md

@@ -0,0 +1,96 @@
+# Contributing to syn_bio_vis
+
+
+<!-- vim-markdown-toc GFM -->
+
+- [Reporting Problems](#reporting-problems)
+- [Contribute](#contribute)
+  - [Project structure](#project-structure)
+  - [For developers](#for-developers)
+  - [For Educators](#for-educators)
+    - [Embed simulation](#embed-simulation)
+
+<!-- /TOC -->
+
+
+## Reporting Problems
+
+Feel free to open an [issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/creating-an-issue)
+if you encounter any problems.
+
+
+## Contribute
+
+[Pull requests](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request)
+are welcomed.
+
+### Project structure
+```
+.
+├── CONTRIBUTING.md
+├── LICENSE
+├── README.md
+├── client                            # Client is a React-app
+│   ├── README.md
+│   ├── package-lock.json             # Client dependencies
+│   ├── package.json
+│   ├── public
+│   │   └── index.html
+│   └── src                           # Source code for client
+│       ├── App.js
+│       ├── actions                   # Actions for API requests
+│       ├── api                       # All API requests
+│       ├── components                # React components
+│       │   ├── d3                    # Rendering simulation using d3
+│       │   ├── simulation            # Simulation page
+│       │   └── tutorial              # Tutorial page
+│       ├── constants
+│       ├── hooks                     # Custom hooks defined here
+│       ├── index.js
+│       └── reducers
+├── package-lock.json
+└── server                            # Nodejs server
+    ├── controller                    # Functions executed by routes
+    ├── index.js
+    ├── package-lock.json             # Server dependencies
+    ├── package.json
+    ├── routes                        # API interfaces of backend
+    ├── simulation                    # Python modules for simulation
+    ├── src
+    │   ├── simulation                # Pre-generated simulations are saved here
+    │   └── tutorial                  # Tutorial pages are saved here
+    └── utils                         # Some utility functions
+```
+
+### For developers
+
+### For Educators
+
+Each tutorial page is written
+in [markdown](https://github.github.com/gfm/)
+and saved in `syn_bio_vis/server/src/tutorial/`.
+
+#### Embed simulation
+
+1. Generate the desired simulation
+    on the website.
+    Refer to [README.md](https://github.com/FeiyouG/syn_bio_vis/blob/main/README.md)
+    for details.
+2. Save the `JSON` file of the simulation.
+3. Add the `JSON` file in `syn_bio_vis/server/src/simulation`
+    and give it an unique name.
+4. In your tutorial markdown file,
+    insert the following code block
+    in the section where you want to
+    insert the simulation:
+      ```code
+       ```
+       {
+        name: "name_of_the_JSON_no_extension"
+       }
+       ```
+      ```
+
+Refer to `syn_bio_vis/server/src/tutorial`
+for examples.
+

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Feiyou Guo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,48 +1,96 @@
 # syn_bio_vis
 An interactive tool for teaching and learning molecular programming.
 
-## Our Observable Notebooks:
 
-**Lesson 1**: [DNA Hybridization and Synthesis](https://observablehq.com/@sborje/lesson-1-dna-hybridization-and-synthesis)
+<!-- vim-markdown-toc GFM -->
 
-**Lesson 2**: [Introduction to DNA Strand Displacement (DSD)](https://observablehq.com/@jasonhof/lesson-2-introduction-to-dna-strand-displacement-dsd)
+- [Set up this project](#set-up-this-project)
+  - [Set up Server](#set-up-server)
+    - [Set up NUPACK and multistrand](#set-up-nupack-and-multistrand)
+    - [Start the server](#start-the-server)
+  - [Set up Client](#set-up-client)
+    - [Start the client](#start-the-client)
+- [Contribute to this project](#contribute-to-this-project)
 
-**Lesson 3**: [Abstraction for DNA Circuits](https://observablehq.com/@jasonhof/lesson-3-abstraction-for-dna-circuits)
-
-**Lesson 4**: Introduction to Circuits
-
-**Lesson 5**: Exploring Circuit design
-
-**Lesson 6**: In the Lab
-
-**Lesson 7**: In the World
+<!-- /TOC -->
 
 ## Set up this project
 
 First, ensure
-[node.js](https://nodejs.org/en/)
-and `npm` are installed on your machine
+[`node.js`](https://nodejs.org/en/)(>= v16)
+and `npm`(>= v8) are installed on your machine
 
 Then, clone this project:
 ```shell
-$ git clone https://github.com/gfeiyou/syn_bio_vis.git
+git clone https://github.com/gfeiyou/syn_bio_vis.git
 ```
+
 ### Set up Server
+
+#### Set up NUPACK and multistrand
+
+The simulation in the server depends on
+both [`NUPACK`](http://www.nupack.org)
+and [`multistrand`](https://github.com/DNA-and-Natural-Algorithms-Group/multistrand)
+
+1. Download `NUPACK` from the official website.
+2. Set `NUPACKHOME` environment variable to
+  the directory where `NUPACK` is installed.
+    - Add the following line to your `.zshrc` or `.bashrc`,
+      ```shell
+      export NUPACKHOME = /path/to/NUPACK/installed/dir
+      ```
+    - Restart your terminal app
+      or source your `.zshrc`/`.bashrc`
+    - Run `echo $NUPACKHOME`
+      and make sure it prints out the correct path
+      to the directory where `NUPACK` is installed.
+2. Clone `multistrand` to your local machine
+3. Create a python2.7 virtual environment
+  with [virtualenv](https://virtualenv.pypa.io/en/latest/)
+  (`multistrand` uses python2.7)
+4. Activate your virtual environment
+5. Make sure all dependencies are installed
+according to [`multistrand Requirements`](https://github.com/DNA-and-Natural-Algorithms-Group/multistrand#requirements)
+6. Navigate to `multistrand` repo
+  on your local machine
+  in terminal.
+7. Try to run an example file
+  in `multistrand/tutorials/under_the_hood/` directory
+  and make sure `multistrand` works as expected
+
+#### Start the server
+
 Inside the folder `syn_bio_vis/server/`, run `npm install` to install all
-the dependencies for the server.
+the dependencies for the server. Then, run `npm start` to start the server.
 
-Run `npm start` to start the server.
+```shell
+cd /path/to/server_folder
+npm install
+npm start
+```
 
 The server is running in port `3001` by default and can not redirect
 to another port automatically. So please make sure port `3001` is not in use
 when you start the server (We may change this behavior in production code)
 
 ### Set up Client
-Next, `cd` into `syn_bio_vis/client/` and run `npm install`
+#### Start the client
+Inside the folder `syn_bio_vis/client/`, run `npm install`
 to install all the dependencies for the client. Run `npm start` to start the
-client. A website will be opened in your default browser. The client runs
+client.
+
+```shell
+cd /path/to/client_folder
+npm install
+npm start
+```
+
+A website will be opened in your default browser. The client runs
 in port `3000` by default. But if `3000` is in use, it can automatically
 redirect to another port.
 
 
 ## Contribute to this project
+Please refer to [CONTRIBUTING.md]()
+if you want to contribute to this project.

client/public/index.html

@@ -2,10 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <!-- <meta name="viewport" content="width=device-width, initial-scale=1" /> -->
-    <!-- <meta name="theme-color" content="#000000" /> -->
-    <!-- <meta name="description" content="Web site created using create-react-app" /> -->
-    <!-- <link rel="icon" type="image/png" href="./memories.png"> -->
     <title>syn_bio_vis</title>
   </head>
   <body>