When Product Hunt announced the Makers Festival: API Edition, I had just one goal to make something cool!
I've already done a lot of work with data from the Product Hunt universe having built: 500Makers, 500Hunters and 500Products.
Always intrigued with data visualization I decided to explore some more ideas.
I'm also a big movie fan and Six Degrees of Kevin Bacon was always a fun game to play. As a maker who's made a lot products with lots of different people I started thinking about the Six Degrees of Ryan Hoover, or was there someone else more connected in the Product Hunt Maker Network.
Getting the data
Sites like IMDB made finding out more about movies and the people involved much easier, otherwise you'd have to look for the credits at the end of a movie. Until Product Hunt started building is Maker database, finding out who made products was equally difficult.
Even now, unless (and even if) a product is featured on Product Hunt, knowing who worked them is very hit or miss. You have to visit the website, hope they an about page/blog post that has some information or look for a Humans TXT file in the hope that it lists some people involved. You may find out information as people share their work on social media, but it is all very time consuming, and often yields little information.
The focus of the Makers Festival was to get people to use the new Product Hunt GraphQL API. So I needed to see if I could even get the data I needed to build my Maker network. Once that data was assembled we could think about asking who is the Kevin Bacon of the maker world.
I've read a lot about GraphQL but never used it in a real project before, so this was a great learning project for me.
The API is very extensive and did provide all the information I needed, but it was going to take time to download all the data for every product featured on Product Hunt since they launched in late 2013 along with the information about the makes of those products. I wrote about the rate limits and other considerations when working with APIs.
Visualizing the data
Now that I had the data for the Maker Network I started to think about how to visualize it.
I knew I wouldn't have time to build anything completely custom so I started looking for some tools to help me.
D3 provides a vast collection visualizations for your data.
I decided on a Force-directed graph, combined with a simple listing of the other makers that a specified maker had worked with that would make up the bulk of the maker profile.
Working with the D3 library is difficult but eventually I was able to muddle through looking at the many examples I was able to find online. No one did exactly what I wanted but in combination I got to where I wanted to go.
The graph doesn't go 6 degrees deep, that would be a lot of data to visualize, and kill most peoples computers, but doing 3 levels deeps is still enough to great some very cool visuals.
The profile page for each maker pulls some of the information stored in the Product Hunt profile and displays the information we collected about the maker in the network. This includes the other makers they have made things with including a like to that maker, and the products they worked on together.
I added some basic forms to allow people to lookup makers, and featured some active makers on the homepage.
For the sites design I used the open source Tabler theme and the sites MVP was ready!
I submitted it to the Product Hunt for inclusion in the Makers Festival voting.
Submission didn't mean the end of the work though.
There was a lot of things I wanted to add/fix before the official voting started, and a wider launch. I wrote more about them in Preparing for Launch. Customizing the social media images is an extra step that not all sites needs, but in this case, could be an important in improving engagement.
I also started thinking about the original idea that prompted the project.
I started researching the algorithm behind the Six Degrees of Kevin Bacon game. Six degrees of separation is the idea that all people are six, or fewer, social connections away from each other.
I found an implementation in PHP that was 4 years old on Github. I find it easier to read code to understand the algorithm than reading a paper. I took that code and modified it for my use.
Although I haven't launched it yet, I know have a implementation of the algorithm for Maker Network. I have a page that I can enter 2 Makers and the system will respond with their connection (if any).
Turns out that I'm connected with Jack Dorsey and lots of other makers I haven't even thought off!
Still a little work to do on this feature, but will be available to everyone soon!
We have a winner
I noticed an unexpected spike on traffic on Tuesday. After a little bit of sleuthing I discovered that Product Hunt had announced the winners of the Makers Festival's 7 categories.
I was a little surprised because the results where supposed to be announced on Wednesday, when I had planned to officially launch the site, oh well!
Maker Network was one of two entries in the Data Visualization category and had been voted the winner. Honored to be have been voted the winner, maybe I succeed in my goal to make something cool!
I continued as I had planned and launched the site officially on Wednesday. I didn't really too much other than post the site on Product Hunt. Were I not taking part in the Makers Festival and built the site (which I probably wouldn't have done) I would have added some features (more on that later) before officially launching.
I tweeted about the status for the launch in a thread.
Thanks to everyone for the support for the Maker Network launch so far: https://t.co/byDtuDgpuA— Mubashar Iqbal (@mubashariqbal) June 26, 2019
I'll be posting various stats throughout the day in this thread 👆👇
Although Maker Network started as a project to build something cool for the Makers Festival, I saw that it could become something much more.
When I originally built 500makers, 500hunters and 500products I had considered combining them into one central hub, providing makers and interested users a single place to find information about the maker network. Now Maker Network will be that hub.
I'll be releasing the maker connection lookup feature soon, then I'll be rebuilding the 500 sites and migrating them to the Maker Network.
Overall I'm very happy that I decided to participate in the Makers Festival, it turning into something much larger than I planned.
Checkout Maker Network.