Build a reviews and ratings aggregator
Learn Ruby on Rails by building an site for people to browse and add reviews for restaurants.
Allow people to search and rate local eateries.
Topics covered
- Ruby on Rails
- HTML and CSS
- jQuery
- Bootstrap
- SQlite
- Google Maps API
- Git and Github
- Heroku
Audience
- Ruby on Rails beginners
- Entrepreneurs
- Aspiring junior web developers
Time
- Video content:
6 hours - Average completion time:
4 weeks
In this course, you'll learn how to build a restaurant review site for people to browse and rate local eateries. Admin users can add new restaurants while signed in users can leave star ratings with a review. Anyone can search through the listings index for specific restaurants.
Chapters
-
Course Introduction (2:31)
View a live demonstration of the final Yelpdemo app we'll be building. Get a quick tour of the BaseRails platform to see how you can navigate the site and get support when you get stuck.
-
Installation for Mac Users (6:08)
Install the latest versions of Ruby on Rails, Xcode, iTerm2, Homebrew, Git, and Sublime Text on your Mac computer. Set up a shortcut to launch Sublime Text from your terminal.
-
Installation for Non-Mac Users (3:35)
Install the latest versions of Ruby on Rails and Sublime Text on your computer. Launch your terminal with Git Bash and set up a shortcut to launch Sublime Text from your command line.
-
Create a New App (5:28)
Learn common terminal commands and create a new app Rails. Launch your Rails server and explore localhost:3000 to see your new app.
-
Add Our First Pages (6:54)
Generate a Pages controller in Rails and create an "About" and "Contact" page for your app. Add content to your pages with HTML.
-
Add Links (8:08)
Add links for the "About" and "Contact" URLs and learn how to create links to external sites. Organize common code into a single location in the Application Layout file to decrease code redundancy.
-
Add Restaurants (5:03)
Learn the three-step process for generating migration in Rails. Create a Restaurants database with name, address, phone, and website fields.
-
Set the Home Page (3:41)
Replace the default Rails homepage with the Restaurant Index page that you generated. Use 'rake routes' to find which routes to use for existing URLs.
-
Install Bootstrap (5:08)
Install a front-end tool called Bootstrap through the Bootstrap CDN method. Add the table class to the Restaurant Index page and layer additional options on top.
-
Add a Navigation Bar (6:17)
Learn to work with Bootstrap by reading the documentation on their site. Use Bootstrap to add a navigation bar and add the "About" and "Contact" links.
-
Simplify Our Code (6:19)
It's best practice to simplify code files for readability and debugging. Learn how partials and embedded Ruby work to create a navbar, footer, and Bootstrap partial to store our code.
-
Build Beautiful Forms (13:10)
Use Bootstrap classes with embedded Ruby code to add better spacing and design to our Restaurant forms. Wrap your pages in a fluid-container for a responsive layout.
-
Set Up Github (5:55)
Save your code using a version control system called Git, then create a new Github account to save your code online in a repository. Generate a new SSH key to authenticate your account on your computer.
-
Save Our Progress (6:31)
Learn how to commit and push your code to Github. Start by creating a new repository on Github for your app. Learn the four commands you need to run each time you save your code to Github.
-
Deploy on Heroku (12:26)
Learn how to launch your app live on the web by hosting it for free on Heroku. Set up Heroku for the production and development environments on your computer and launch your app live on the web for the first time.
-
Add the Carrierwave Gem (9:55)
Add images to your Restaurants pages with the Carrierwave gem. Add a new column to your Restaurants database to store images and a file_field helper to upload images in your New Restaurant form. Use strong parameters to tell Rails that your image form field is safe.
-
Image Hosting with Amazon S3 (9:20)
Use the Fog gem to link Carrierwave with Amazon S3, where we'll set up image hosting service to people can see your images live on the web. Store localhost images on your local computer and Heroku images on Amazon S3.
-
Protect Our Passwords (7:34)
Use the Figaro gem to pass your confidential Amazon S3 account information to Heroku without having it show up on GitHub for anyone to see.
-
Resize Images (6:16)
Install ImageMagick and MiniMagick to use Carrierwave options to resize your images to a preset thumbnail width and height.
-
Create a Custom Banner (9:05)
Create a homepage banner with Bootstrap's jumbotron class. Add a custom.css.scss file to write CSS code to format the background-color, border, and font inside the banner. Learn to use Google Chrome extensions to find specific web colors.
-
Format the Navbar (5:59)
Use CSS to format the background color, links, and logo in the navigation bar. Use the padding property to push out some area around the content.
-
Add Static Images (4:14)
Download and save a static image to your Amazon S3 account and use Ruby code to embed it to your homepage.
-
Install Devise (9:07)
Install and set up a popular gem called Devise to give our app the ability to have multiple user accounts. Verify that it works by signing up with an email and password.
-
Insert Conditional Links (16:14)
Convert the HTML links into embedded Ruby with the link_to Rails helper. Learn to use the command 'rake routes' to find which routes to use for creating new URLs. Add the "Sign up", "Sign in", and "Sign out" links to our navigation bar. Learn how to add conditional links so different users see different links depending on whether they are signed in or not.
-
Style Devise Forms (11:15)
Improve the look and feel of the Devise forms for signing in and signing up. Use Bootstrap to add sleek buttons to the forms.
-
Customize Alerts and Error Messages (6:36)
Add some custom Ruby and jQuery code to customize the Devise alert and error messages when users don't fill in the form properly. Use iQuery to add a close button to the messages.
-
Build a Review Scaffold (8:52)
Create a Reviews database by understand how the 'Rails generate scaffold' command works and how Creating, Reading, Updating, and Deleting (CRUD) are the available four actions for any resource. Get a sense for how Models Views Controller works for the Reviews database.
-
Link Reviews to Users (9:45)
Generate a migration to add a new column in the Reviews database to track the User ID that each Review belongs to. Tell Rails how the Users and Reviews databases are linked.
-
Modify Data with Rails Console (5:21)
Learn how to use the Rails Console to assign a User for every Review in the database. Modify existing localhost and Heroku data.
-
Remove Unnecessary URLs (6:07)
Customize the default scaffold URLs to include only the ones that you need. Delete the View pages, disable routes that point to those URLs, and redirect your links to different pages.
-
Link Reviews to Restaurants (10:56)
Generate a migration to add a new column in the Reviews database to track the Restaurant ID that each Review belongs to. Tell Rails how the Restaurants and Reviews databases are linked. Nest the Restaurant ID in the URL and use Rails Console to figure out specific Restaurant IDs on Heroku.
-
Nest Resource URLs (7:51)
Use 'rake routes' to create proper links for each individual restaurant, the 'Edit Review' page, and a "Write a Review" link.
-
Display Reviews (9:11)
Display the specific reviews for each Restaurant on its own page. Use Bootstrap's grid layout to format the page into two columns.
-
Convert Numbers to Stars (8:02)
Download and set up the jQuery Raty plugin to convert numerical ratings to star ratings.
-
Layer on More Options (10:23)
Calculate an average star rating for each Restaurant and display it on the Restaurant's Show page along with the total number of reviews written. For each Review written, turn raw text into HTML and display the reviews in reverse chronological order.
-
Add User Fields (10:46)
Distinguish between Admin users and normal users by disabling the ability for normal users to create a new Restaurant page. Add a first and last name field to the 'Sign Up' page and tell Rails that those new fields are safe.
-
Integrate Names into Reviews (5:30)
Display the User's first name and last initial for each Review. Add the date that each Review was written.
-
Validate Submitted Data (17:51)
Validate that the data users are submitting is valid by learning about regular expressions and how to convey the character pattern to verify if data is in the appropriate format.
-
Set User Permissions (13:26)
Set different authorizations for signed in and signed out users, admin and regular users, and different actions users can take depending on whether a review was written by them.
-
Set up Google Maps (8:15)
Use the Google Maps API to embed a dynamic map of a specific location for each Restaurant. Zoom in and out and customize the default zoom.
-
Set Up Search (13:19)
Install the Searchkick gem for localhost and Heroku and load it with the restaurants in the database. Create a new URL for the page showing the search results displayed in a table.
-
Course Summary (1:58)
Customize your app further with additional add-on features in our Features Library. Complete additional projects for further practice.
What you'll be building
A reviews and ratings site with Restaurant pages, user accounts, Google maps integration, star ratings, and search. Allow admins to add new restaurants and users to leave reviews for each restaurant.
Launch demo
Add more awesome features
After the completeing the foundational course, head on over to our video library and learn how to implement additional features like social media integration, internationalization, and more. Take your web app to the next level.
View features library
What are you waiting for?
“I also bought other tutorials on Rails earlier and found yours to be project-oriented and straight to the point. You don't waste so much time coding but instead show the way how things can be created as the final outcome, which I really admire, especially that your explanations are easy to understand. ” - Michael J.
"The scope/angle of this course seems perfectly tailored to what I'm looking for. From the looks of it so far, your course is similar in scope to Hartl's book, but takes a far more practical, hands-on approach - also it helps a great deal to see it in action vs. trying to follow along with just a book." - Chris S.
"Studying a new programming language can be daunting given the number of tools and concepts that need interact with each other. This course tackles that issue by providing a practical approach to learning ruby on rails: you get to build your own functional website" - Emmanuel T.