Savant

E D U C A T I O N ~ t h r o u g h ~ O B S E R V A T I O N

---

Visit Savant deployed page

Savant is a free user content generated portal for tutorials and online 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.

---

Design

---

Configuration

Savant users begin by creating a user profile by entering their username, email, password, contact url, and avatar jpg image file. After account creation a Savant user can opt to teach a class by providing a class title. After a title is given, the 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.

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.

---

Logic

---

Getting Started

• Software Requirements
  • NodeJS
  • MySQL
  • Firebase
    • Generation of own firebase account and API Keys
  • AWS S3 Buckets
    • Generation of own AWS buckets API keys, bucket name and secret access

*** It is important to keep all API Keys and secret access confidential through the storage of keys in a .env file and securing upload of .env in a .gitignore file.

• Installing all node packages

  • Initialize terminal and execute npm i to install all necessary node packages

Deployment

• After successful installation of npm packages, deployment is done on Heroku for free.
• Be sure to include access keys, api keys and other secrets on Heroku's Config settings.

---

Code Snippets

---

• YouTube API
  
  

  • YouTube Live Authentication
    
    
  
  

  • Google Authentication w/ YouTube
    
    

  • Creating a YouTube LiveBroadcast
    
    

---

• Google Calendar API
  
  

  • Google Authorization
    
    

  • Insert Event Function
    
    

  • Event Listner to execute insertion of event to user's Google calendar
    
    

---

Built With

---

• HTML
• CSS
• JavaScript
• Node.js
• Express
• Bootstrap
• Google Fonts
• Animate.css
• JQuery
• MySQL
• Sequelize
• AJAX
• Firebase
• Moment.JS
• YouTube API
• Google Calendar API
• AWS S3 Buckets
• Font Awesome
• Tempus Dominus DatePicker

---

Commit History/Branching

---

Landing Page

---

Sign Up Page

---

Sign In Page

---

Profile Page

---

Authors

• Esar Behlum - UC Berkeley Extension
• Phillip Chang - UC Berkeley Extension
• Derek Goldstone - UC Berkeley Extension
• Matthew Hagarty - UC Berkeley Extension

Honorable Mention

Logo Creation Credits: Matthew Hagarthy

---