BurgerShop

Wonderful & cheap virtual burgers

100% mobile friendly

Task and Scope

BurgerShop was built with the intention of practicing more advanced Rails MVC flows. BurgerShop simulates an online shop for a burger delivery app. The user accesses his/her account, and shops for their desired items from the menu. All the burgers are fully customizable and you can pick which ingredients and how much of each you want. There are also beverage options. Then, the user can register addresses for the delivery, place the order and track the progress of the order real-time.

Also, BurgerShop is 100% mobile-friendly!

Go to website!

User experience

First, the user accesses the website and logs into his or her account. The authentication process is held by Devise with customized views.

Menu

Then, the user arrives at the meals menu. Here, he/she is able to see all items which are available, in two categories: burgers and drinks. The user can also see a summary of the order total, click to expand to see his orders details and remove items from the order.

Customizable burgers

All burgers are 100% customizable. There are some basic burgers you can start from, but when you pick a burger, you are redirected to a page to customize it. All the basic ingredients of the burger are free for the normal quantity, can be taken off for free or ordered extra for a cost. Ingredients which aren't initially on the burger can also be added. The user receives live feedback on the ingredients selected and new price of the customized burger.

Ordering beverages

The drinks are more straightforward. Just pick a beverage between the options, and click on the card to add. A pop-up will appear so you can select the desired quantity, while seeing a live feedback on the total cost. If the user places two orders for the same beverage, the system will automatically group them.

Pick an address and checkout

When you finish picking your items, you can proceed to checkout. You must select an address for delivery between your registered address. If you haven't registered an address yet, you will create one. One last screen shows your order summary, price and address so you can give a final confirmation.

Track order progress

Finally, you can track the progress and delivery estimates for your orders, and also see your order history. To see the details of orders, click on the order headers to expand the content.

Creating an Online Shop on Rails

Rails Models and DB Schema

The first step on the project is designing the models and their relations. The solution uses three levels of models to create an order:

• The first level are the models for items offered by the shop (the menu). These include the basic burgers (burger), beverages (drink) and ingredients (ingredient). The ingredients model is necessary to make the burgers customizable.
• The second level are the models for order items. Order items can be burgers (burger_order) and beverage orders (drink_order). Since burgers are customizable, the burger_order is also related to all the ingredients and their quantities selected during burger customization (ingredient_order).
• The third and last level is the entire order level (order). Long story short, the order (level 3) is linked to the items the user added to the order with its customizations and quantities (level 2), which can be picked between the items offered by the shop (level 1).
• There are also models for the users and addresses. The user model is handled by Devise for authentication and also helps hold information about the user, such as order history and addressess. The address model is useful so the user can order again for addresses he already ordered in the past.

Rails Controllers

There are items the shop offers (level 3). The user picks the items he wants to build an order item (level 2). All the order items are compiled into one order (level 1), that then the user checkouts and pays. The full order and all items are then displayed to the restaurant staff so it can be prepared and shipped for delivery. The staff can update the order status to give feedback to the user.

The orders have different status. Whenever the user arrives at the menu screen, the app creates an order with "shopping" status. All order items placed will be saved on this order, which will be available until the user checks out. When the user pays, the order changes to "Cooking", then to "Out for delivery", and finally "Completed". All these changes can be tracked on the "My orders" tab.

For burgers, the user selects a base burger and goes to the customization screen. It contains a Rails form which has one input for each ingredient available in the shop. The value of each input is the quantity the user picked for that ingredient. A Javascript logic handles the user interface, highlighting the selected ingredients, updating the order value and changing the values of the inputs on the Rails form. When the user clicks "Place order", Rails will create an instance of burger_order and many instances of ingredient_order, one for each ingredient present in the burger, also holding the quantity selected. All ingredient_order are then linked to the parent burger_order, which is linked to the parent order.

For drinks, the process is easier. When the user opens the pop-up to select the beverage quantity, there is a Rails form. A Javascript handles the user interaction of picking more or less of that item, updates the quantity and price for the order and also the value in the Rails form. When the user hits the "Add" button, Rails creates one instance of drink_order with the specified quantity. If there are two orders for the same beverage, Rails will destroy both and create one order with quantity equal to the sum of the two destroyed orders quantities.

Rails Views

Whenever a view has to show informations about the orders, such as in the order summary in the menu or on checkout, the same logic is applied.

To show all the burgers on the order, the view iterates through all burger_order on order related to the current user. It builds a header with the burger_order burger name, price and delete button if needed. To show all the ingredients and quantities on the burger, the views iterates through all ingredient_order linked to the burger_order, showing ingredient name and quantity.

To show all the drinks on the order, the view iterates through all drink_order on order. It builds a header with the drink_order burger name, quantity, price and delete button.

Code snippets

Warning: even though the website is in English, some model names and attributes on the codes are written in Portuguese. The comments will help you understand what it is all about

Menu page (.html.erb)

Task: Render the menu page. This page shows all the burgers available with name, picture, price and ingredients, drinks available with name, picture and price. Also, you can see your order summary with total price, and click to expand additional information, which shows all the items on your current order, as shown in the section User experience > Menu.

Burger customization (.js)

Task: Handle the user interactions while customizing the burger by picking how much of each available ingredient he wants on his burger, as shown in the User Experience > Customizable burgers Section.