ITSC VEaaS (Virtual Event as a Service)

Application Purpose and Context

Due to COVID-19, a lot of organizations have been forced to cancel their in-person events and conferences. We have developed a platform to allow these organizations to take their events virtual, with embedded videos, live streams, and discussion boards.

Your goal will be to create a mini virtual IT expo to showcase your fellow interns’ projects. This site will include embedded videos, information about each “presenter”, and live stream main stage, and a live chat section for each “presenter”

ITSC Guidelines

• Setup
  • PLEASE ask if you're having trouble setting up your project repository, project board, first branch, or development environment. The mentors are here to help you! We want to make sure you get off to a great start and this part is often the most challenging, so please don't hesitate to come to us immediately with any setup concerns!
• Hour/Day Policy
  • If you've been stuck on something for two hours, ask a fellow intern!
  • If you've been stuck on something for a full day, ask a mentor!
• Process for Getting Unstuck
  1. Search through the available resources in this document (located at the bottom of the page and throughout)
  2. Google! This is your most valuable resource and learning how to search the internet for your answer is going to be your most valuable skill moving forward! Forum resources like StackOverflow can be extremely helpful. In web development, there's almost always someone who has encountered your problem before. The trick lies in finding that answer!
  3. Ask an internship peer
  4. Ask an mentor

Technologies Used

• NodeJS
• NPM
• Google Analytics
• Front-End Libraries
  • React
  • React-Static
  • Disqus
• Back-End Libraries
  • Netlify

System Architecture

This is a static website and only relies on the built front-end code and the Netlify CDN that delivers the static assets.

Use Cases and Examples

• 2020 IT EXPO
• Political Science Nexus 2020
• UC International Online Conference

Universal Concepts

• JavaScript best practices (some are enforced by eslint)
• Use of source control (git and github)
  • Whenever you start a new task, you should make a branch from master, commit and push your code to the new branch often, and then merge to master when you are done

Tasks

Through all of these tasks, ensure the site you are building is accessible to persons with disabilities (UC Accessibility Policy)

Setup

1. Clone the Template Repository
   • You can name this whatever you want, just make certain that you leave it "Public" so that others can view your code
   • Resources:
     • Creating a Repository from a Template
2. Copy the Template Project Board
   • This is something you should keep constantly up-to-date. It is how we will track your progress.
     • Resources:
       • Copying a Project Board
3. Add the Provided Issues to your Project Board
   • Resources:
     • Creating an Issue
     • Adding Issues to a Project Board
4. Install NodeJS 12.19.x on your computer
   • MacOS Installer for 12.19.0
   • Windows x64 Installer for 12.19.0
   • Windows x86 Installer for 12.19.0
   • Latest 12.x for all platforms
5. Install VS Code your computer
6. Clone the project from GitHub
   • See the resources belong on using Git
7. Install the project
   • In VS Code, open a terminal window from the top (if one is not already open)
   • Run the command npm install
8. Start the project
   • In VS Code, open a terminal window from the top (if one is not already open)
   • Run the command npm start

Milestone 1

1. Create the event home page including:
   • An embedded YouTube live stream
   • A schedule of events
2. Create a page for each project type (DevOps, OCAT, VEaaS, etc) to list the projects for each one
3. Create a template page to display each project
   • Page should include a video embed, some text data about the project, and the name of the person who made the project
   • This should be a template page that receives JSON data to populate the specific project information, but you might have a different template page for each project type
4. Publish the site to Netlify
   • Make a Netlify account
   • Log in to Netlify from your command line
   • Run the command npm run deploy:prod to deploy

Milestone 2 (Stretch tasks if time allows)

1. Integrate a live chat for each project page
   • Recommend using Disqus
   • There is a React wrapper for Disqus that makes it very easy to implement called Disqus-React
2. Add a countdown timer to the home page and prevent users from accessing the project pages until the countdown is complete
3. Change the embedded video/stream on the home page to show a static video before the countdown and the live stream after the countdown

Resources

• React
  • Intro to React
  • Main Concepts
  • Video: React Tutorial for Beginners
• React-Static
  • React-Static getting started guide
  • React-Static Architecture Discussion
  • Video: Introduction to React-Static
• Git
  • Using git with VS Code
  • Using git with Github Desktop
• Recommended VS Code Extensions
  • Bracket Pair Colorizer 2
  • Code Spell Checker
  • ESLint
  • Path Intellisense