Code Monkey home page Code Monkey logo

coffeeshop's Introduction

Mini Coffee Shop for demo RoR

This mini project is created for demo RoR. Click me to have a try

Requirements


Menu of a coffee shop:

Tall Grande Venti
Espresso 1.95 2.05 2.35
Latte 3.4 4.45 4.65
Cappuccino 3.15 3.75 4.15
Green Tea 3.45 4.25 4.45
Hot Tea - 1.95 -

Please code a simple app for this coffeeshop. The coffee shop requirements:

  1. Adding orders
  2. Keep track of all orders (total sales)
  3. Group orders by type of orders (coffee or tea)
  4. Group orders by type of size (tall, grande or venti)

Additional questions:

  1. What if we want a new type of coffee, a new type of tea?
  2. What if we want a new size?
  3. How would you change the model to add hot/cold options?
  4. (optional) How would you change the model to support adding condiments to drinks (perl, grass jelly,...)

You're free to use whatever database you feel like.

  • You are free to choose any server side technologies for the API. Using nodejs is a plus.
  • Using polymer or reactJS as a library for the view components. Feel free to apply any other JS frameworks. Polymer is a big plus as we are using Polymer now.
  • Tests are recommended and bonus points if you can deploy it to Heroku. When you're done, please post your code to GitHub or Bitbucket along with a detailed Readme.
  • Good UI/UX is a another plus.

MockUp Layer Design


MockUp Design

  1. Click dropdown Make a order to make a new order. Order listing below will auto update once order create successfully.
  2. Click dropdown Group by Type to filter all orders with that drink type.
  3. Click dropdown Group by Cup to filter all orders with that Cup size.
  4. Group Group by Type and Group by Cup is combinational support.
  5. Order listing will show most 5 orders per page.
  • If the result count is larger than 5, pagination will show.
  • If no result found, text 'No result found' will show.
  1. Click Refresh icon to refresh the order listing.
  • Here assume server response time is 2 second. 'Debounce' was use here to protect server overload in case of keep pressing 'Refresh'.
  1. Total sales will auto update once the orders listing was updated.

App Layer Design


Font Awesome + ReactJs + React on Rails + React Bootstrap + jQuery + Rails+ Postgresql + Heroku (Host)

HTTP Verb Path Controller#Action
GET /orders orders#index
POST /orders orders#create
GET / orders#index

gem rspec-rails was used to test rails model && controller.

Database Layer Design


coffeeshop UML

Three tables was designed for the mini app:

  1. drinks
  • [name:varchar]: Name of the drink like 'Espresso' 'Hot Tea'
  • [drink_type:varchar]: drink type: 'coffee' or 'tea'
  1. items
  • [drink_id:integer]: foreign key of table drinks, refer the drink.
  • [price:integer]: price of that drink. Use integer here, if need show on front-end, divide by 100.
  • [cup_size:varchar]: Cup size of the drink, i.e. 'tall' 'grande' 'venti'
  1. orders
  • [item_id]: foreign key of table items, refer the item ordered.

Additional questions:


  1. What if we want a new type of coffee, a new type of tea?

If have a new type of coffee or tea like 'Red Tea', firstly create new drink with [name='Red Tea', drink_type='teas'], then create new items base on the cup size like [drink_id: 'id of red tea drink', cup_size: 'tall|grande|venti', price: 6.66]

  1. What if we want a new size?

Current design assume that the cup size not change so frequently. There are two ways for that feature change. One way is create new record in table items, for example, 'Espresso' with cup size 'mini': [drink_id:'espresso drink id', cup_size: 'mini', 'price': 1.22]. Code and test case need change for this feature. The other ways is refactor the database: create a new table to store cup_size which similar as table drinks. We may call it table cups: [name:varchar]. If have a new size like 'mini', create a new record in that table.

 coffeeshop newSize

  1. How would you change the model to add hot/cold options?

Depends on the product logic. If price is same for hot and cold, add a new column to table orders, otherwise add a new column to table items.

  1. (optional) How would you change the model to support adding condiments to drinks (perl, grass jelly,...)

Suppose that each drink item can add many condiments and the price is different for different combinations. We may create new table called condiments with two columns [name:varchar, price:integer], and add two new columns to table orders [c_price:integer, c_list:varchar]. When create new order, sum all the choose condiments price then store it in orders:c_price, and concat the name of condiments then store it in orders:c_list.

coffeeshop condiments


  • In the case images not shown properly, please refer the asset folder.

coffeeshop's People

Contributors

neerajkumar avatar

Watchers

 avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.