Savant

Visit the Savant deployed page here! (In-Depth Demo at the end of ReadMe)

Savant is a free, user-content driven portal for online tutorials and classes. Our motto is "Education through observation".

Knowledge is something that should be shared and this platform enables instructors to broadcast their expertise with the world via YouTube livestream.

---

Prerequisites

Things you will need:

• Files in this repo (excluding git images)

• NodeJS on your local or remote machine.

• NPM packages to install dependencies (built into NodeJS)

• MySQL to save data persistently.

  • If deploying to Heroku, install JawsDB as a resource and CLI to create an app

• Firebase application, to connect to authentication servers for saving accounts.

• AWS S3 Buckets for saving and hosting user profile pictures.

---

Keys

• After creating a firebase application, you will see three options: IOS, Android, Web. You will need to choose Web, fill out the form (without adding a host/domain). Then firebase will create a keyfile configuration for you. Copy this keyfile and the html cdns.

• After creating an AWS S3 Bucket, you will need to create secret access keys. Save these alongside firebase's key.

The keys generated from both apps, will be sent to a .env file. Here is the format:

firebase_apiKey="an-alphanumeric-key"
firebase_authDomain="name.firebaseapp.com"
firebase_databaseURL="https://name.firebaseio.com"
firebase_projectId="app-name"
firebase_storageBucket=""
firebase_messagingSenderId="number"
firebase_appId="alphanumeric"

S3_BUCKET_NAME="app-name"
AWS_ACCESS_KEY_ID="alphanumeric"
AWS_SECRET_ACCESS_KEY="alphanumeric"

Make sure to keep case-sensitivity accurate and all in quotes. The application will use these to authenticate with the respective servers.

If you will be running this on Heroku, these keys will be put into the "vars config" section within the Settings of the app created- however make sure not to add quotes when inputting the values.

---

Deployment

Once the .env file is created, or Heroku has all of the keys ready, you may install all important dependencies by executing: npm install in the terminal. The command reads the package.json and installs all of the modules necessary. If you are deploying to Heroku, they will install them for you and run the server.

To run the server on your local machine, you may run the server.js script with the command: node server.js. The express package will serve the application on a default port 3000 & can visit the app on localhost:3000; as for Heroku, you may visit the site provided to you.

---

Design

• User account creation

  • Savant users may begin with creating a user profile by entering their username, email, password, any form of contact url, and an avatar .jpg image file.

  • The profile image will be saved to the AWS S3 Bucket server. Once uploaded, the user may continue to fulfill the account creation.

• Class creation

  • After the account has been created, the Savant user can opt to teach a class by providing a class title. Once the title is given, the user must log into their google account to continue. This is so that the user is verified to be able to create Youtube livestreams. Once the instructor is logged in, the rest of the fields will be unlocked.

  • The user instructor then provides a class description, class description via drop-down menu, and schedules a date/time in Google Calendar. Upon sumbit, the YouTube API generates an embed with the livestream url. Then the user can accept the class submission to our site.

• Page Stylings

  • The UI for Savant makes extensive use of Twitter Bootstrap CDN, animate.css, Google Fonts, and Font Awesome to create an engaging UX.

  • Registered classes are displayed within dynamically generated cards within a Bootstrap carousel.

  • Embedded within each class card is YouTube livestream iframe and course information from the YouTube API.

  • The motto tagline and "Teach a Class"/"Learn A Skill" buttons are animated via class names in animate.css for aesthetic effect.

  • Bootstrap's forms and modals provide streamlined structure to collect data values in order to make API calls and populate our sequelize models.

---

Code Snippets

• Google Calendar:

  • Load in the keys and scopes to connect to Google Calendar.

    • 

  • Create the event object based on the title, date, and description of the connected card.

    • 

  • Let the user sign in, then insert event to their personal calendar.

    • 

• Youtube API:

  • Initialize google with the youtube scope

    • 

  • Load in YT client for auth with the key.

    • 

  • Create the youtube livestream content and return the live-embed

    • 

• AWS S3 Buckets:

  • Make a POST request with the file input and username. Once the image is uploaded, create an object of user data with the image url to send to the database.

    • 

  • When the image is received, we get the data of the image and send it to s3 servers with a unique name. Once it is uploaded, return connecting data including the picture link.

    • 

• Firebase Auth:

  • Creating a connection to the auth servers with the given key.

    • 

  • Using the provided email & pass, sign user into the site. Else, return an error.

    • 

  • If the account does not exist, user may run a createUserWithEmailAndPassword function.

    • 

  • When the user logs in, retrieve the uuid to send to the server whenever data is needed. Else remove the uuid upon log out.

    • 

---

Technologies Used

---

• HTML: Foundational structure of page elements.
• CSS: Styling of elements on the html page.
• JavaScript: Main language used to run the application.
• Node.js: Run-time environment that executes JavaScript code.
• Express: Web App framework to serve webpages.
• Bootstrap: Library to add styling alongside content.
• Google Fonts: Unique font types for webpage text.
• Animate.css: Custom animations on elements.
• JQuery: Dynamically changing content and adding functionality to elements.
• MySQL: Database used to store persistent data.
• Sequelize: Easy and versatile ORM to communicate with MySQL.
• AJAX: Calls between server and client to serve and retrieve data.
• Firebase: Client side authentication stored in Google's Firebase auth/db servers.
• Moment.JS: Custom time formats displayed to the client and date manipulation.
• YouTube API: Livestreaming api functionality authenticated by google account.
• Google Calendar API: Calendar api functionality authenticated by google account.
• AWS S3 Buckets: Storing files in specific bucket/section on Amazon Web Services.
• Font Awesome: Custom unique fonts for webpage text.
• Tempus Dominus DatePicker: Client-Side Date and time creator & manipulation.

---

Commit History:

Commit Charts:

---

Landing Page:

Sign Up Page:

Sign In Modal:

Profile Page:

---

Authors

• Esar Behlum - Github Link & LinkedIn Link

• Phillip Chang - Github Link & LinkedIn Link

• Derek Goldstone - Github Link & LinkedIn Link

• Matthew Hagarty - Github Link & LinkedIn Link

---