Voucherify Developer Challenge - task 1 - referral program visualization

The first edition of the Voucherify Developer Challenge. Read the task below and start cracking! You have 3 weeks to submit your solution.

Meet Mary. She’s an open source contributor and the founder of Yet Another JS Framework™. Mary and her team signed up for a free Voucherify account for open source projects and has recently run a referral campaign to promote their SWAG shop - an alternative to the Donate button. Mary has given away unique referral codes.

How does Mary’s program work? Imagine you’re one of the referrers. You get a unique code which you can paste all over the Internet. If a new shopper buys something with your code, they get 10% off. The referral program has multiple tiers, so your reward depends on how many customers you’ve attracted:

1. If you attract 1 person, you get $5 off discount
2. When the number exceeds 5, you get $10 off discount
3. When the number exceeds 10, you get $25 gift card

A couple of weeks after the referral campaign roll-out, she wants to check out how referrers are doing and which promo channels work better in the field. Mary asks you to analyze her Voucherify data and visualize the results.

Task:
Given the history of referrals, Visualize Mary’s campaign performance.

Hints on what Mary might be interested in:

• Who attracted the biggest number of shoppers per week and in total (aka leaderboard)
• Who generated the biggest amount of money
• Which marketing channel works best
• How has the referral graph developed since the beginning?
• etc.

Other requirements:

• The report should be in the form of a dynamic website, meaning it should display the up-to-date information from Voucherify
• No tech stack limits, can be a static page with JS, can be server-side rendered. You can use React, Angular, Ember, jQuery, d3, or even GWT.

How to start:

• Get familiar with the redemption object in Voucherify API reference. This is how the coupon “usages” are stored.
• Locate 2 important fields for you:
  • voucher.code - an actual code used by a customer
  • order.amount - money he spent
• Redemptions can be retrieved with list redemptions endpoint (API keys below). You should load only the ones from referral campaign
• Mary also provides a CSV export from Customers database. It includes the following columns:
  • referral code (can be linked to voucher.code in the redemption object)
  • name
  • link to photo
  • channel the customer has been acquired with
• Go through our SDKs, choose one and start doing!

An example of how to link a redemption object to a customer record. In the scenario below, a customer cust_yDdoU0Hhx3VmUNDdmy9Y0Ztl (named blessing meijer) redeemed yajsf-o4pX6u8g which is the referral code he received from gökhan pektemek. And he bought something for $50.

Redemption object:

{
   "id":"r_f393fFIFDWxO1koOGPR6lcQY",
   "object":"redemption",
   "date":"2016-12-20T19:00:00.000Z",
   "customer_id":"cust_yDdoU0Hhx3VmUNDdmy9Y0Ztl",
   "tracking_id":null,
   "order": {
     "object":"order",
     "source_id":null,
     "amount":5000, 
     "status":"PAID", 
     "metadata":null 
    },
   "metadata":null,
   "result":"SUCCESS",
   "customer":{
      "object":"customer",
      "id":"cust_yDdoU0Hhx3VmUNDdmy9Y0Ztl",
      "name":"blessing meijer",
      "source_id":null
   },
   "related_object_type":"voucher",
   "voucher":{
      "object":"voucher",
      "code":"yajsf-o4pX6u8g",
      "campaign":"referral"
   }
}

Customers CSV export file format:

yajsf-o4pX6u8g,gökhan pektemek,https://randomuser.me/api/portraits/thumb/men/72.jpg,hackernews

‍
Deadline: 11.02.2018 23:59 UTC / Feb 11, 2018 11:59 p.m. UTC
How to submit: Send a live demo link and the source code (you remain the owner of the code) to mike (at) voucherify.io, bonus points for explaining the solution on your blog or in a readme.md file.
Where to host the demo for free: Heroku, OpenShift, Glitch (Node.js only), Netlify (static websites only)
Prizes:
1st place - a hackable (read Kenneth’s config) Samsung Chromebook 3 11.6”

Community award (we’re gonna let you vote for the best contribution in a dev.to thread!) - a stylish dev.to T-shirt (big thanks to dev.to team!), Voucherify T-shirt, and a snapback

Resources:

• You don't have to create a Voucherify account, here are the keys to the API (read-only):
  • application key: dfe8716e-d5c4-4c6d-a215-609add103fcf
  • security token: d2d16589-79ec-46f7-b921-fba09a9a9baa
• List redemptions - reference
• CSV export from Customers database
• Discussion forum
• Terms