Pick & Mix, a cool app in AngularJS

Image from glitterview.com

This week I am starting up a new AngularJS project which has been on my mind for a couple of weeks now. It will be a fun app to build and will also be fun to introduce Angular to one of my former colleagues from back in the days.

The idea

Pick & Mix is a general concept when it comes to acquiring a product containing several parts or choices that defines the product itself. Imagine buying a bag of candy where each piece of candy has a different price and affects the candy bag differently. A bag of chocolates from Marabou is indeed a candy bag, but may also be defined as a Marabou bag, or a bag of assorted chocolates. One part of this application's idea is that the distinction of the product is defined by the included components, as general as needed and as specific as needed.

A pick & mix bag of candy is usually priced by it's weight. Because of how practical that is in a physical store, that is a well suited system. On the web we don't need to worry about pricing practicality though, each item in the bag may be priced differently without adding complexity to the purchase. When it comes to a bag of candy, this may seem trivial but for other purchases it may not. How about the ingredients of a Pizza, or hardware in a computer system - individual pricing for each component is sometimes imperative.

As a purchase - or assembly - is being made, the Pick & Mix app will aim to handle the definition, pricing and visual representation of the product and make for a pleasant and fully customized purchase. The app will be a thin front-end layer, leaving the shopping integration and products API open.

Process

The application core is very straight forward and quite small, will especially be a breeze to implement with Angular, so we'll focus on a tidy process with good test coverage. We'll be on Github, you're welcome to contribute anytime.

What about the actual app?

We'll end up with an app where you define a product by picking and mixing all components as you please. Our example will be a pizza ordering service. Here's the flow.

  • Select type (which dough)
  • Select components (toppings)
  • Select attributes (crispy/soft)
  • Select accessories (sauce/drinks)

The app will, depending on your selections create a unique name for your product, show you the price and a visual. With the pizza example, showing a visual for each possible combination of a pizza may be trixy but we'll do our best.

With different data, this app can be used to any product where the concept of Pick & Mix applies.

Techs

> Pick & Mix will be distributed on Github, starting out with the following techs. Feel free to checkout the progress as we go along!