Crowdsourcing a Price Index

Wikiprice (2014)


Wikiprice was my major project during my last semester at Sydney Uni. The idea was to make an interactive currency comparison tool powered by people around the world, instead of some specific organisation. This price comparison index is based on the theory of purchasing-power parity (PPP). Purchasing power parity is a component of some economic theories and is a technique used to determine the relative value of different currencies.

Learning by Doing

To be honest, my main purpose was more on improving my web skills than solving the problems of the price indexes. I think the best way of learning something is doing or making something with it. Wikiprice was the perfect subject for learning front-end development and a little bit of database. During the process, Treehouse was my teacher, and Stackoverflow was my shelter. It would be impossible to learn front-end development and database in such a short time, had it not been for my explicit goal.

Aim High, but Start Small

The final goal was extremely high when I considered my web development ability at the time I started this project. I was comfortable coding HTML and CSS, but JS wasn't my profession, and I didn't have any back-end development experience. However, I set a goal for a fully functioning web app with MySQL database despite my level of programming. I wanted to push my boundaries by doing this project.

However, an ambitious goal doesn't mean that I need to start out equally ambitiously. I believe that the MVP should be as small as possible; it only needs to represent the core of the idea. In my case, the MySQL-based graph was the most important part, so, at the beginning of the project, I focused on learning PHP and MySQL to connect the graph with the database. After I had made the graph work, the rest of the project was mostly straightforward, although it took time to complete.

Sass, Flexbox, and RWD

CSS exists basically to style HTML elements even if the structure of CSS isn't always a good fit with the structure of HTML. Sass is a solution to many of the problems displayed by CSS. Sass helps structure CSS and is much more efficient to code. Moreover, Sass is perfectly efficient for coding with Flexbox and creating responsive layouts.

@mixin flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

section {
  @include flexbox();
}

As the code above shows, writing vendor prefixes could be much simpler in Sass. All I need to do is make a Mixin that contains all the browser prefix codes and include that Mixin when I need it. The media query no longer had to be entirely separated from the original code; it could be nested in the right position, so it's much easier to structure the responsive layout when I'm using Sass.

Using Highcharts with PHP & MySQL

Highcharts, as a jQuery chart, was the best option to show some simple numeric data. I made three different php files to connect and manipulate the charts with the database.

$table = $_GET['selected_table'];

$result = mysql_query("SELECT * FROM $table ORDER BY current_price DESC")
          or die ("Error");

while($row = mysql_fetch_array($result)) {
  echo $row['country'] . "/" . $row['current_price']. "/" ;
}

The code above read the data from the database and printed out in a format that Highcharts can import.

// Calculate the average price
$sum = 0;
$i = 0;

while($row = mysql_fetch_array($result)) {
  $sum = $sum + $row['current_price'];

  // Find out the highest and lowest price country
  if ($i == 0) {
    $highest_price = $row['country'];
  } else {
    $lowest_price = $row['country'];
  }
  $i++;
}

$average_price = round($sum / $num_rows, 2);

// Encode JSON
$arr = array($num_rows, $average_price, $highest_price, $lowest_price);
echo json_encode($arr);

The code above read the numbers from the database and calculated the average price, found out which country has the most expensive and cheapest price, and exported the data.

// Get the values
$table = $_POST['product'];
$new_price = $_POST['new_price'];
$id = 61;

// Perform database query
$query  = "UPDATE $table SET ";
$query .= "current_price = $new_price, ";
$query .= "update_time = now() ";
$query .= "WHERE country_code = $id ";
$query .= "LIMIT 1";

$result = mysqli_query($con, $query);

The code above updates the price data of the database with the number submitted from the input field.

Understanding what I'm designing

It was my first experience to create a fully functional website by myself, including its database. To design a small part properly, the designer needs to understand the whole system first. The Wikiprice project is an excellent reminder of this thought, and I am going to improve this website continuously as a side project and learning ground.