Building Rails app with Wistia and Heroku for Newbies

In this project, I will walk you through steps of how to create a simple online education web application.
4.0 (56 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
5,297 students enrolled
Instructed by Leo Trieu IT & Software / Other
Start Learning Now
  • Lectures 21
  • Length 1.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2015 English

Course Description

This comprehensive, step-by-step course will teach you basic steps of how to build a Rails app with understanding of MVC model and host it on Heroku. After completing the course, you will be able to create a basic Rails app even you're newbies.

Within just 1.5 hour of videos, "Building Rails app with Wistia and Heroku for Newbies" will give you the skills set you need to start off your Rail world quickly without much knowledge required.

With easy to follow, step-by-step videos, this course will give you an easy and quick way to start your learning curve with Ruby on Rails and build something real, this including;

  • Learn how to quickly build a web application without much knowledge required
  • The structure is very easy to follow and you create from empty folder
  • Learn Ruby on Rails with practical code & design
  • Learn how MVC model work in Rails
  • Learn how work with Wistia Video APIs
  • Learn how to design your web app with Material Design
  • Learn how to embed Twitter Widget and Google Map API into your website
  • Go Live with Heroku to share your work with this world

What are the requirements?

  • All you need is just a little bit of HTML and programming knowledge but if you don't, that is not a problem

What am I going to get from this course?

  • Ruby on Rails with practical code & design
  • Understand how MVC Model works in Rails.
  • Work with Wistia Video APIs.
  • Design your web app with Material Design.
  • How to embed Twitter Widget into your website to get more social engagements
  • Get Google Map API into your website
  • Go Live with Heroku to share your work with this world

What is the target audience?

  • This course would be ideal for who front-end designers, founders or even newbies who want to learn Ruby on Rails as a first stage to start creating a platform for their startup

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: *** Free GIFT for who joined this course ***
You really should NOT miss this...
Section 2: Task 1 - Starter
About Me

Welcome to my HERO course, version for newbies and beginners. In this course, you will be learning how to build a simple version of Code4Startup with Ruby on Rails and Wistia APIs.

What is Ruby on Rails?
Ruby on Rails is a web development framework written in the Ruby programming language and it is one of the most powerful and popular tools for building dynamic web applications.
Rails is used by big companies like AirBnb, GitHub, Kickstarter and Twitter.

Why do so many startups use RoR?
First, Rails is 100% open source so anyone can use it at no cost at all.

Second, Rails has a huge community with hundreds of open-source contributors and a large number of gems ( gems are sort of plugins that add great benefits to the application. For example, if your application needs an authentication system to manage users, then you don't have to create that from scratch. Instead, you're going to use a gem called Devise and integrate it into your application easily and quickly)

Third, you can build up your application rapidly with Rails and therefore the time to market would be cut down significantly. This is especially effective for startups in early stage when they want to validate their ideas as soon as possible with an MVP or prototype before investing heavily on that product.

Section 3: Task 2 - Installation and Setting up

Please follow the instruction to install Ruby, Rails to start off. If you're already done, feel free to skip this step


Please follow the instruction to install Ruby, Rails to start off. If you're already done, feel free to skip this step


Please follow the instruction to install Ruby, Rails to start off. If you're already done, feel free to skip this step


In this part, we're going to create a Wistia account. Now, I have a deal with Wistia in which they provide a special offer only for Code4Startup's students.

You can find the link here:

Section 4: Task 3 - Creating Code4Newbies project

In this part, I'll show you how easy to create static pages for a Web application with Rails. Let's see what we're going to build in this task.

We're going to build 2 static pages: About & Contact. In the About page, we have Twitter timeline and normal text. And in the Contact page, we're going to implement the Google Map like this, so no big deal.


It's time to create our 2 static pages.


In this video, we're going to add stylesheets to our pages to make them looks elegant. But some of you might ask straightaway: “How can I design those page without much knowledge of HTML or CSS or even Javascript?” Well, the good news is you don't have to be such a person. You don't have to spend days or even weeks just to learn HTML, CSS or Javascript to make this happen. You just need to know what you want and look for the solution for that issue only.

Section 5: Task 4 - Relaxing and having fun
Adding Twitter Timeline into About page

Yes, you get it right. Just relax and have fun in this task.

Let's start with the About page first.

In this page, we're going to create a panel with shadow. Inside the panel, we create two columns and they 50-50. One is for Twitter Timeline and the other is for avatar and text. Like I said early, you can go to Material Design and play around with their components, css like color, gird, shadow. Nowadays, things like Bootstrap, Material Design have changed the game. You don't have to be a rock star designer or HTML, CSS expert to get things done.

Section 6: Task 5 - Creating MVC model for videos

In this task, we're going to create back-end and front-end for our project. Back-end allows you to process database and then display it in front-end.

Rails structure is all about MVC model. MVC stands for Model – View - Controller. Briefly, model is the database object. View refers front-end user interface and Controller is where you apply your business rule.

In our case:

  • Model is Videos object having properties like WistiaID, Description.
  • Controller is where we implement functions like: add, edit and delete videos
  • View refers the HTML pages to display data that controller send to.

In this video, we're going to create a functionality that allows us to add new, edit or delete a video.

Section 7: Task 6 - Refactoring out application

The very first thing to do is refactor the style sheet to make our website looks elegant, rather than just simple text boxes or boring buttons.


Now is time to make some changes for our index page.


Next, we're going to modify the show page. The current one is quite simple and we don't use that. Instead, we're going to create 2 columns, one for a list of videos and the other for a video player.


In this sub-task, we're going to embed our videos hosted on Wistia into our website. Also, it's good idea to have buttons for different speed rates for your users. And we can do all of this easily with Wistia APIs.


Hey, we almost finish our application, just one last challenge. In this video, we're going to create functionality for Next and Previous links so when users click on Next, it's going to the next video on the list. Similarly, when users click on Previous, it's going to the previous video on the list.

Section 8: Task 7 - Go Live with Heroku

We're in the very last step to make our application REAL. It would be great if you can share your work to the world so everyone can enjoy your videos online. To make this happen, I'm going to show you the very easy way with simple steps that anyone can do and it's FREE.

Want to build apps like AirBnb, Tinder, TaskRabbit, Product Hunt?

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Leo Trieu, Founder at Code4Startup

Leo Trieu is full-time developer working in a Tech company and founder of Code4Startup in Melbourne, Australia. In addition to starting online businesses and teaching courses on Udemy, he has personally founded the online teaching website called Code4Startup where you can learn Ruby on Rails, AngularJS, HTML, CSS and much more by building Real-life Startup Project.

Leo loves sharing his experience in web development, project management, online marketing and video creation and spends his time working on online courses and developing web applications.

Ready to start learning?
Start Learning Now