Like most people, I was planning on having a relaxing New Year’s eve, highlighted by watching the ball drop in Time Square. Welcoming in 2017 and waving goodbye to 2016.
That changed after Seth Louey tweeted…
I didn’t jump on bandwagon right away, but it got my maker senses tingling. It took a few hours, but then I was in…
A small problem, my wife had just finished making dinner, so I couldn’t jump in right away, I dropped offline to eat dinner and then I could start hacking.
Deciding what to build is always fun, but when you’ve only about 6 hours to finish making it, that can really limit what you can build and you have to get creative.
I loved seeing the Best of 9 posts on Instagram, most built with 2016BestofNine, which got me thinking about the best designs of 2016. Dribbble is a popular design sharing community, perhaps we could use a similar scheme and source Dribbble to see what was popular in design for 2016.
Dribbble has an API, so I started digging in to see what was possible. We could do it!
Before I started coding we quickly brainstormed a name so that Seth could start designing the branding and website.
Dribbble has a strong basketball theme, so we landed on the name TopShots. Not only was it a good name for Dribbble, but was flexible enough to work with other websites (even Instagram) if we decided to build on the project later. The .com was taken (isn’t every one by now) so we decided on the .co, although we did consider .club too.
I decided to keep the website as simple as possible. Instead of downloading the player history and building up a database, I used the responses from the Dribbble API and cached them to make the site very quick once a users TopShots had been generated the first time, but also required very little in terms of server power (no database needed!).
This also meant the build was pretty quick, just working with some JSON we got back from the API. No database schema to define and build. Doing as little as possible during a hackathon is highly recommended.
I used the LaravelPHP framework, and the site is deployed on a DigitalOcean server.
Seth carried the basketball theme into the branding and design, and we able to build the website in just a few hours. We ended up finishing closer to midnight EST than the PST we had been targeting.
After we got finished building the site, well before really, we started reaching out to some Dribbble users to get some help testing the site. This helped identify some edge cases: what if a user hadn’t posted a shot in 2016?!? We also noticed that API also returned different responses based on the size of the image the user uploaded, so we made the necessary adjustments to handle these cases. Then we really were done, as close to done as we could get for (as it turned out) a 4h hackathon.
TopShots.co
_Check out the top shots for any Dribbble user for 2016_topshots.co
We wanted our project to be the first product posted to ProductHunt for 2017, and Eric Willis offered to hunt it for us right at midnight PST.
There you have how I spent my New Year’s eve. Thanks to Seth for getting me to do something productive with my time. I’ll be posting a followup later this week with the results from our launch.
I hope you had a great New Year’s eve, no matter how you spent it.
