# Virtual Conference Design
###### tags: `document` `virtual conference`

## Deployment
#### Front-end (Vanilla.js)
Use whichever http file server to implement a catch-all redirect to index.html. We recommend using [http-server](https://www.npmjs.com/package/http-server) for development and [Nginx](https://www.nginx.com/) for production.

##### http-server
Add a "?" behind your desired url. Please visit `localhost:8081` instead of `127.0.0.1:8080` to prevent CORS from blocking access to the server.

http-server --proxy "http://localhost:8081?"

##### Nginx
Add the following rule in your nginx.conf file.
You can refer to [this document](http://nginx.org/en/docs/beginners_guide.html) for how to set the nginx.conf

location / {
    try_files $uri /index.html;
}

Sample of nginx.conf

# http server setting
http {
  # import other setting files
  include mime.types;
  default_type application/octet-stream;
  include /etc/nginx/conf.d/*.conf;

  # server setting for http
  server {
	# this is for ipv4
    listen 80;
    # this is for ipv6
    listen [::]:80;
	# server domain name
    server_name [your server name];
   	
	# location path, in this case this is root
    location / {
	  # root directory, which starts searching from
      root [your front-end directory];
      # redirect to https
      return 301 https://$host$request_uri;
    }
  }

    # proxy pass to upstream, which other backend servers run 
  upstream api {
	# backend server setting
    server 127.0.0.1:8080;
  }

  # server setting listening for https
  server {
     # this is for ipv4
     listen 443 ssl http2;
     # this is for ipv6
     listen [::]:443 ssl http2;
     server_name [your server name];
     #root [your front-end directory];

	# location /api [~]<--regex
     location ~ /api/ {
		# proxy setting, in this case passing to https://api
     	proxy_pass https://api;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Host $host;
        proxy_set_header Connection 'upgrade';
        proxy_cache_bypass $http_upgrade;
     }

	# location / <-- root
     location / {
     	root [your front-end directory];
		# try to search some files, $uri <-- embedded variable
		try_files $uri $uri/ /index.html;
     }

	# ssl certificate for https
     ssl_certificate ...;
     ssl_certificate_key ...;
     ssl_session_timeout ...;
     ssl_session_cache ...;
     ssl_session_tickets ...;

     ssl_protocols ...;
     ssl_ciphers ...;
     ssl_prefer_server_ciphers ...;

     add_header Strict-Transport-Security max-age=15768000;
     resolver 8.8.8.8;
   }
}

#### Back-end (Express)
1. Ensure both Node.js and MongoDB community are installed on your machine.
2. Setup a `.env` file in the `server` directory with the following variables. DO NOT publicize your own settings.

    BCRYPT_SALT=[A random integer to encrypt user passwords]
    DB_URL="[Your MongoDB connection string]"
    TOKEN_SECRET="[Whatever string you prefer to encrypt in the JWT token]"
    EMAIL_ADDRESS="[SMTP email address]"
    DOMAIN="[Front-end domain name]"
    EMAIL_USERNAME="[SMTP email username]"
    EMAIL_PASSWORD="[SMTP email password]"

3. Run `npm install` to install all the required packages.
4. In development mode, run node server.js to start the server.
In production mode, we recommend using [pm2](https://pm2.keymetrics.io/) to manage the application. Run `./deploy.sh` to start pm2 with our preconfigured ecosystem file.
5. For updating the information in system, please use the [MongoDB Compass](#Mongo), a third-party database management system for MongoDB. The official website link is [here](https://www.mongodb.com/products/compass).

## Use Case Details
> CRUD: The abbreviation of Create, Read, Update, Delete.

<table>
<tr style="background-color:rgba(200,50,20,0.5)">
<th>Actor</th>
<th>Use Case</th>
<th>Description</th>
</tr>
<tr>
<td rowspan="15">Attendee</td>
<td>Verify Login Information</td>
<td>Check the login data and verify the authority in this system</td>
</tr>
<tr>
<td>Invalid Login</td>
<td>Show the invalid input tip</td>
</tr>
<tr>
<td>Forget Password</td>
<td>Help to reset the new password</td>
</tr>
<tr>
<td>Send Email</td>
<td>Send the email</td>
</tr>
<tr>
<td>Show News</td>
<td>Show the news by ascending datetime</td>
</tr>
<tr>
<td>Fold the News if it is too long</td>
<td>If the news content is too long, folding it</td>
</tr>
<tr>
<td>Show the schedule</td>
<td>Show the schedule of conference</td>
</tr>
<tr>
<td>Show the session</td>
<td>Show the description of session</td>
</tr>
<tr>
<td>Change Timezone</td>
<td>Select the appriopriate timezone</td>
</tr>
<tr>
<td>Filter for the sessions</td>
<td>Focus on some session who wants</td>
</tr>
<tr>
<td>Join the meeting room</td>
<td>Join the meeting of session who wants</td>
</tr>
<tr>
<td>Show the document</td>
<td>Show the description of document</td>
</tr>
<tr>
<td>Communicate concerning the document with others</td>
<td>Join the communication channel for some document</td>
</tr>
<tr>
<td>Download the document resources</td>
<td>Download the document like PDF, Slides, etc.</td>
</tr>
<tr>
<td>Show the contact information</td>
<td>Show the contact email, contributors.</td>
</tr>
<tr>
<td rowspan="11">Manager</td>
<td>Verify Login Information</td>
<td>Check the login data and verify the authority in this system</td>
</tr>
<tr>
<td>Invalid Login</td>
<td>Show the invalid input tip</td>
</tr>
<tr>
<td>Forget Password</td>
<td>Help to reset the new password</td>
</tr>
<tr>
<td>Send Email</td>
<td>Send the email</td>
</tr>
<tr>
<td>CRUD for News</td>
<td>Manage the news list</td>
</tr>
<tr>
<td>CRUD for Schedule</td>
<td>Manage the Schedule</td>
</tr>
<tr>
<td>CRUD for Session</td>
<td>Manage the Session</td>
</tr>
<tr>
<td>Upload the meeting of session video</td>
<td> If the session meeting is finished, let put video on the platform</td>
</tr>
<tr>
<td>CRUD for Document</td>
<td>Manage the Document</td>
</tr>
<tr>
<td>Upload the document video</td>
<td>Recorded Video for uploading on the platform</td>
</tr>
<tr>
<td>CRUD User Account</td>
<td>Manage User Account</td>
</tr>
</table>

### Actor
- Attendee: Take place into the virtual comference platform
- Manager: Manage the virtual conference platform
### Use Case
- Login Module
+ Verify Login Information
+ Invalid Login
+ Forget Password
- Mail Module
+ Send Email
- News Module
+ Show News by ascending datetime
+ CRUD for News
+ Fold the News if it is too long
- Schedule Module
+ Show the schedule of conference
+ CRUD for the schedule
- Session Module
+ Show the session
+ Change Timezone
+ Filter for the sessions
+ CRUD for the session
+ Upload the meeting of session video
+ Join the meeting room (e.g., Zoom)
- Document Module
+ Show the document information
+ CRUD for the document
+ Communicate concerning the document with others (e.g., Slack)
+ Download the document resources
+ Upload the document video
- Contact Module
+ Show the contact information
- User Module
+ CRUD User Accounts
### Diagram

## Roadmap
> CRUD is the abbreviation of Create, Read, Update, Delete.
### Frontend Roadmap

### Backend Roadmap

## Database Information
### Database Schema
Database Schema as below:
* News: store the news information
* User: store the user account
* Token: store the token who is logging
* Program: store the session information
* Document: store the paper information


## Functionality
### Frontend
Frontend services as below:

<table>
<tr style="background-color:rgba(200,100,20,0.3)">
<th>Item</th>
<th>Description</th>
</tr>
<tr>
<td rowspan="2">Login Service</td>
<td>Input your account</td>
</tr>
<tr>
<td>Verify the account exists or not</td>
</tr>
<tr>
<td rowspan="3">Forget Password Service</td>
<td>Input your email</td>
</tr>
<tr>
<td>The reset password link will be embedded in the email</td>
</tr>
<tr>
<td>Enter the reset password page and reset your password</td>
</tr>
<tr>
<td rowspan="8">Session Service</td>
</tr>
<tr>
<td>Filter by date or type of session which is on dropdown list</td>
</tr>
<tr>
<td>Click Zoom button to enter the zoom meeting (P.S. require to finish the url configuration before enterting)</td>
</tr>
<tr>
<td>Click Slack button to enter the chatroom for some paper (P.S. require to finish the url configuration before enterting)</td>
</tr>
<tr>
<td>Click PDF button to download the paper</td>
</tr>
<tr>
<td>Click Slide button to download the paper slide</td>
</tr>
<tr>
<td>The recorded video with each paper is able to download</td>
</tr>
<tr>
<td>Change the timezone for what zone you stay.</td>
</tr>
</table>

### Management Platform
Management Platform as below:
> input the "{virtual conference domain name}/panel", if the account is admin, then allowed to enter.
> Ex. https://{domain_name}/panel

<table>
<tr style="background-color:rgba(200,100,20,0.3)">
<th>Item</th>
<th>Description</th>
</tr>
<tr>
<td rowspan="2">Account Management Service</td>
<td>Create an account</td>
</tr>
<tr>
<td>Change the account information by MongoDB Compass</td>
</tr>
<tr>
<td rowspan="2">Meeting Management Service</td>
<td>Create a new session and paper information</td>
</tr>
<tr>
<td>Change the session and paper information by MongoDB Compass</td>
</tr>
<tr>
<td>Email Service</td>
<td>Not yet to implement, it needs to use the tool like POSTMAN to call API</td>
</tr>
<tr>
<td rowspan="2">News Management Service</td>
<td>Create a news and be able to embedded the HTML format</td>
</tr>
<tr>
<td>Change the news by MongoDB Compass</td>
</tr>
</table>

### <a id="Mongo">MongoDB Compass</a>
It's a database management tool for MongoDB.
For CRUD the information and the relation url for conference services (e.g., download the pdf of paper, enter the zoom meeting by zoom url link, etc.)


## Appearance
### Frontend Appearance
* Login Page

* Forget Password Page
* Forget Password Page
<br>
* Forget Password Success

* Reset Password Page
* Reset Password Link
<br>
* Reset Password Page

* News Page

* Schedule Page

* Program Page
* Session Page
<br>
* Program Navbar Dropdown (Per Day)
<br>
* Program Navbar Dropdown (Per Track)
<br>
* Paper Information
<br>
* Timezone

* Award Page

* User Information

### Management Platform Appearance
* Insert User Account

* Insert News

* Insert Session and Documents

## Tech Skills
* Front-end: Pure Javascript, HTML, CSS
* Application Server/Framework: [Express](https://expressjs.com/)
* Object Data Model (Database operation library): [Mongoose](https://mongoosejs.com/)
* Process Manager Kit: [PM2](https://pm2.keymetrics.io/)
* Web Server(Optional): [Nginx](https://www.nginx.com/), [http-server](https://www.npmjs.com/package/http-server)
* Apply for SSL(Optional): [SSL For Free](https://www.sslforfree.com/)
* Database: [MongoDB](https://www.mongodb.com/)
* Database Management System: [MongoDB Compass](https://www.mongodb.com/products/compass)

## Reference
* [PM2](https://pm2.keymetrics.io/)
* [http-server](https://www.npmjs.com/package/http-server)
* [Nginx](https://www.nginx.com/)
* [Nginx configuration guide](http://nginx.org/en/docs/beginners_guide.html)
* [MongoDB Compass](https://www.mongodb.com/products/compass)
* [Express](https://expressjs.com/)
* [Mongoose](https://mongoosejs.com/)
* [SSL For Free](https://www.sslforfree.com/)
* [MongoDB](https://www.mongodb.com/)