Building an Ecommerce Site

Today we will start a series of articles that shows you how to build an eCommerce site from scratch using Rails 5.0. This series will be for pro members only, so if you haven't already signed up, make sure to do so now so you don't miss out! Below is a link to all of the articles released so far in this series.

In this article we will go over a bit of the sites design and some gems used. Let's get started.

Test Driven Development

When building this site, we will use the test driven development methodology. To do this, we will use RSpec, FactoryGirl, and Database Cleaner for TDD. These gems are typically considered the gold standard for writing tests on the Ruby on Rails platform, so our reasons for doing so is obvious. If you haven't already used RSpec or any of the gems listed above, you can take a look at the articles we have that cover testing our AJAX example: Writing Feature Tests, Writing Model Tests, and Writing Controller Tests. However, if you do not wish to read those at this time, don't worry, it should still be easy to follow along.

Other Gems Used

Some other gems we will use are Slim, to save work with the HTML, Bootstrap-sass, to give us a responsive UI design, ActiveShipping for calculating shipping rates. ActiveMerchant for credit card transactions, FriendlyId for user friendly URLs, PaperClip for image management, Ransack for search, and will_paginate for pagination.

Site Overview

This won't be a comprehensive overview, but it will give you an idea of the pages that we are building for this product. Note that mockups are subject to change (and will change) during the course of the series. Some mockups have been intentionally left out as well.

The Home Page

home page

The home page is the root page for the application. The home page will list categories on the left that the user can click. It will have a navigation bar at the top with various options. On the right we will show popular products (generated via order items) and recently browsed products.

Category Page

category page

When the user clicks a category they will be taken to the category page. The category page will display a paginated list all of the products for that category.

The Search Page

search page

When the user performs a search, he will be taken to the search page. The search page has a paginated list of the search results.

Shopping Cart Page


The shopping cart page lists the items in their cart. They can modify their cart here or proceed to checkout.

New Billing Address Page

billing address page

If the user does not have a billing address on file, they will land on this page when they start checkout. (Hint: This page will change during the series).

New Shipping Address Page

shipping address page

If the user does not have a shipping address saved, this page will pop up after creating a new billing address.

The Checkout Page

checkout page

This page is the final checkout page. The user can review their order, enter payment details, and select a shipping option.


In the next article we will build the basic application and start on the home page. This series is also open ended, so if you have any feedback, feel free to leave comments in the comments section below. Thanks for reading!