Shoppingcart

Build a two-sided marketplace

Learn Ruby on Rails by building an online marketplace like Etsy or Airbnb from scratch.
Connect two parties through your platform.

Topics covered

  • Ruby on Rails
  • HTML and CSS
  • Bootstrap
  • Coffeescript
  • SQlite
  • Stripe API
  • Git and Github
  • Heroku

Audience

  • Ruby on Rails beginners
  • Entrepreneurs
  • Aspiring junior web developers

Time

  • Video content:
    7 hours
  • Average completion time:
    4 weeks
Course Syllabus

In this course, you'll learn how to build a two-sided marketplace for buyers and sellers. Sellers will be able to upload listings with images, manage their inventory through a dashboard, and charge credit cards with the Stripe API. You'll learn how to take a small percentage cut of each transaction and transfer payments to your sellers.

Chapters

Get up and running

In this chapter, you'll learn how to install and set up your computer environment with the proper tools and software to start coding.

  • Course Introduction (3:01)

    View a live demonstration of the final Etsydemo app we'll be building and get an introduction to the topics this course will cover.

  • Installation for Mac Users (5:58)

    Install the latest versions of Ruby on Rails, Xcode, iTerm2, 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:04)

    Install the latest versions of Ruby on Rails and Sublime Text on your computer. Launch your terminal with Git Bash and verify your installation worked correctly.

Create our website

Create a new app in Rails and learn basic functionalities like how to add static pages, link URLs, and generate your first migration to create a product listings database.

  • Create a New App (5:13)

    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:26)

    Generate static pages in Rails by creating an "About" and "Contact" page for your app. Add content to your pages with HTML.

  • Add Links (6:40)

    Add links for the "About" and "Contact" URLs. Organize common code into a single location in the Application Layout file to decrease redundancy.

  • Add Listings (9:49)

    Learn the 3-step process for generating migrations. Create a page with the ability to add new product listings with a name, description, and price field. Set the homepage to be the new Listings Index page.

Add front-end design

Use Bootstrap to add powerful design features to your app. Create a sleek navigation bar on top of your site and clean up the design of your forms, links, and buttons. Along the way, you'll learn how to use partials and embedded Ruby to simplify your code files for readability and organization.

  • Install Bootstrap (6:17)

    Learn how to use gems to add prepackaged features to your site. You'll install the Bootstrap gem and set it up properly for usage.

  • Add a Navigation Bar (8:45)

    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 (5:09)

    It's best practice to simplify code files for readability and debugging. Learn how partials and embedded Ruby work to clean up the header and footer files.

  • Build Beautiful Forms (9:49)

    Use Bootstrap classes to add better spacing and design to the New Listing form and Edit Listing form. Add a variety of Bootstrap buttons on each page.

Update listings with images

Add the ability to upload images to your listings with the Paperclip and ImageMagick gem. Organize your listings into four columns with the Bootstrap grid system and add some CSS to customzie the look of your web app.

  • Install Paperclip and ImageMagick (4:40)

    Install the Paperclip and ImageMagick gem by reading and implementing the documentation for both Mac and Windows computers.

  • Set Up Paperclip (13:49)

    Generate a migration to add images to the listings database. Learn to authorize images so they can be sent in the forms, update the forms to give users the ability to upload an image, and display the image in the Index and Show pages for each listing.

  • Design Pages Layouts (15:36)

    Use the Bootstrap grid system to split the screen into different-sized columns. Organize your listings as thumbnails in four columns on the Index page. Learn how to display numbers as currency.

  • Add Custom CSS (16:27)

    Learn how to use CSS with Bootstrap by creating a custom.css.scss file. Customize your app's background-color, font color, and font-family with CSS. Use a Google Chrome extension to find specific web colors to use. Learn how the nth-child CSS selector can identify specific listings to align.

Save our progress

Learn how to save your code files online with Github by creating a new repository for your app. Then launch your app live on the web by hosting it for free on Heroku.

  • Set Up Github (5:58)

    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.

  • Commit Our Code to Github (7:45)

    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 (8:22)

    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.

Host images online

Use the paperclip-dropbox gem to upload images to Dropbox. Install Dropbox to host your images live on the web and configure two separate settings for Heroku and localhost so that images you upload in development environment don't get sent to Github.

  • Set Up Dropbox (13:22)

    Use Dropbox to host your images online for others to see and use the Paperclip-dropbox gem to upload our files. Install Dropbox on your computer and store your account information in a dropbox.yml file.

  • Protect Our Account Data (11:53)

    Protect your sensitive account information in your code by storing your information in a gem called Figaro.

  • Configure Dropbox Settings (4:46)

    Configure separate settings in Dropbox for Heroku (production environment) and localhost (development environment) so that images you upload on localhost won't get sent to Github.

Add Users

Use the Devise gem to install multiple user accounts and customize the look and feel of the forms. Customize the user accounts by adding conditional links depending on whether users are signed in or signed out; add a custom name field to the 'Sign up' page, and validate that users are submitting data correctly.

  • Install Devise (8:10)

    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 (15:34)

    Learn to use the command 'rake routes' to find which routes to use for creating new URLs. Add a "Sign up", "Sign in", and "Sign out" button 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.

  • Customize Devise Forms and Alerts (19:32)

    Improve the look and feel of the Devise forms for signing in and signing up. Add some custom Ruby code to customize the Devise alert messages when users don't fill in the form properly.

  • Add Names to Users (9:59)

    Allow users to sign up with their first and last name in addition to their email by generating a new migration to add two new fields to the User database.

  • Validate User and Listing Data (14:27)

    Learn how to use validations in the Models files to verify that the user-submitted data satisfies certain criteria such as filling in form fields, uploading images, and inputting prices greater than $0.

Connect users to listings

Learn to work in the Controller file so that the Listing database can track the specific User that created the Listing. Allow Users to only edit the listings they've uploaded and manage all their listings in a seller dashboard. Finally, you'll create a custom banner for the homepage.

  • Associate Listings With Users (19:12)

    Link Listings with Users in the Controller file so that the Listing database can track the User that each Listing belongs to. Learn how Models, Views, Controllers work together in Rails to create an app.

  • Set User Permissions(14:05)

    Add authorizations to control the pages and URLs that each user is allowed to see. Allow users to only edit and delete listings created with their own account once they are signed in.

  • Create a Seller Page (11:42)

    Create individual Seller pages that show only the listings each seller has uploaded. First add a new URL in the config/routes file, then update the Controller about this new action, and finally, create a View page for users to see when they visit the new seller URL.

  • Redesign the Seller Page (12:23)

    Transform the Seller page into a dashboard where Sellers can manage all their listings in one place. Wrap the listings in an HTML table for a structured layout with dropdown buttons.

  • Create a Homepage Banner (9:20)

    Create a homepage banner with Bootstrap's jumbotron class and add a custom image and text in the banner.

Place orders

Give users the ability to place orders by creating a new Order database to track information about each order. Identify and link the relationship between the Order, Listing, and User databases through unique Listing, Buyer, and Seller IDs. Create two new View pages for Users to view their past purchases and past sales.

  • Link Orders, Listings, Users: Part 1 (10:16)

    Create a new migration for an Orders database that tracks the address of the buyer. Identify and link the relationship between the Order, Listing, and User databases through unique Listing, Buyer, and Seller IDs.

  • Link Orders, Listings, Users: Part 2 (16:27)

    Tell Rails how to fill out the information for the columns in the Order database by using the unique IDs of the currently signed in User who is placing the order, the Seller ID, and the Listing ID in the URL.

  • Create Order History Pages (10:33)

    Create two separate pages for Users to view their past purchases and past sales. Showcase the information in a formatted table with image, item name, price, and date.

  • Reorganize Order Links and URLs (7:44)

    Create Dropdown menus in the navigation bar with URLs for "Purchase History" and "Manage Listings". Disable a user's ability to edit their Order histories.

Accept Payments

Accept online payments with the Stripe API and add a credit card information field to your Order form. Use Coffeescript to verify that the credit card data is valid before charging the card and confirming the transaction in your Stripe dashboard.

  • Set Up Stripe (7:25)

    Accept money from users by using the Stripe API to accept online credit card payments. Add your sensitive Stripe keys to the Figaro gem.

  • Add Credit Card Fields (11:38)

    Update the Order form with form fields for users to input their credit card information. Display your form with the Bootstrap grid system.

  • Verify Credit Card Data (9:42)

    Use Coffeescript to check the user's credit card information, let the User know if there were any issues they need to correct, and let the form submit once the credit card data is valid.

  • Charge Credit Cards (13:48)

    Once Stripe returns a valid token, write the code to charge a user's credit card. Verify that the payment went through in your Stripe dashboard.

Transfer payments

Add a section to collect bank account information for each seller on the New Listing form. Initiate a money transfer of 95% of each transaction to the seller while keeping 5% for yourself. Verify that the transaction went through on Stripe with a test order.

  • Collect Bank Account Info (7:02)

    Set up your app so sellers are asked for their bank account details when they first create a new listing. Add bank account information fields to your New Listing form.

  • Verify Bank Account Info (6:29)

    Write Coffeescript code to check whether the bank account information the user submits is valid. Test out errors on localhost with test bank account numbers provided on the Stripe API documentation.

  • Transfer Funds (16:55)

    Create a Stripe recipient in the Listings controller by using the token from Stripe. Transfer 95% of each transaction to the seller and keep 5% for yourself. Place a test order on Heroku and check that it went through on Stripe.

  • Course Summary (1:27)

    Moving forward, apply what you've learned to building out your own Rails app by using this course as a guide.

What you'll be building

Etsydemo1
Etsydemo2
Etsydemo3
Etsydemo4

An online marketplace with product listings, user accounts, online payments, and an inventory management dashboard. Take a small cut from each sale before transferring the funds to your sellers.

Launch demo
Webdesignicons

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

See what projects our students are working on

Fleamarket
Eventsorbet
Gmaps
Tenniscourt
Tweetspeak
Jeolry

Browse more student projects

What are you waiting for?

“I personally and wholeheartedly recommend this for anyone who wants to jump in with both feet and learn as you go by creating an actual application that you can use and or modify for your own use.” - William P.

"I created my own demo website and deployed to Heroku in 2 days. Alex explained eveything you need when you start Ruby on Rails: installing gems, facing problems on Ruby, creating lists, bootstrap designs, uploading images, Git version control, deploying on Heroku. I'm waiting for more lectures/courses from Alex." - Volkan G.

"I just finished your course, and I loved every minute of it. It's amazing how much I've learned in just a couple of days, and I'm excited to continue learning more and applying the skills I gained from watching your videos." - Matthew F.

Enroll today