Author here! The idea was to collect the top posts from r/aww and show them in an extremely simple to use responsive interface. Even though the site may seem very simple, being a backend architect, I think I over engineered it. Here is the technology breakdown:-
* Laravel 5.0
* A Digital Ocean micro server (512MB Ram)
* Laravel Forge setup
* Blackfire integration
* New Relic integration
* Papertrailapp integration for streaming error logs
* Beanstalkd for queued jobs.
* Zapier integration
* Pure CSS framework
* Cloudinary CDN and image manipulation
* MySQL
* Redis server
* Import.io to create a crawler API
* Bitbucket private repo
* Import.io for the Reddit and Imgur crawler
I started out with having an idea that I should always show a random image when clicking on the "Show me another one!" button. However, I quickly ran into problems when people would see repeated posts as the MySQL RAND() function might return repeating post ids. Creating a more complicated algorithm to save all the posts in a cache that had already been viewed and also saved in a cookie created some unnecessary complexity. In the end, I ended up just showing the last posted image and the button basically takes you to the previous post every time you click it (or tap if using a touch device).
I used Import.io to write a crawler API to fetch the top posts. Then I wrote some cron jobs to automate calling the API to fetch the latest posts every three hours. The actual job runs via a beanstalkd queue as a Laravel artisan command.
I didn't want to hotlink the images directly from Imgur as I didn't want to leech on their bandwidth, so I used Cloudinary to display the pictures instead. One advantage was that with the Cloudinary API, I could resize the images and/or convert gifs to an MP4 on the fly (MP4 files take a lot less bandwidth to deliver). However, since I am not making any money from the site and wanted to stay on the free plan, I decided to mostly ignore gif files as they take a lot of bandwidth and disk space on Cloudinary. The Laravel queued command also takes care of uploading the images to Cloudinary.
For a responsive design, I used Yahoo's Pure.css framework. It was fairly easy to work with and basically its just two Laravel blade view files that display the site's content (a master template and a view template).
I also added a Twitter account, which can be found at http://www.twitter.com/topcuteanimals as well as a Facebook page. I used a neat service called Zapier to post pictures from my site over to the Facebook and Twitter pages on an hourly basis. However, I didn't want to run out of the free plan for Zapier so now it is limited to just one update a day.
All the scheduled cron jobs are handled via Laravel Forge which has honestly been a joy to work with. I have been using Git flow via Source tree and host my code in a private Git repository on Bitbucket. This helps with the fact that whenever I plan to make a release or a hotfix, each push to the master branch makes an automated deployment to the live site thanks to Laravel Forge's helpful integration. I also use Redis to cache the posts so as not to hammer my tiny server's MySQL database too much. Overall most of the site was done within a day with incremental updates that I have been adding in my free time over the past couple of weeks.
From a design perspective, I'd like it if the image wasn't flush with the header, and I'd like it if I didn't have to scroll to see the whole image.
From a usability perspective, it'd be nice if the button to load the next picture was in a static and predictable position, that way I didn't have to move my mouse to continue through the chain.
Thank you for the input! I'll see if I can implement those changes as soon as I get a chance. Laravel is great and it sort of brought me back to PHP web development from Python and with Laracasts, building projects with Laravel has been great.
7 comments
[ 9.2 ms ] story [ 52.1 ms ] thread* Laravel 5.0 * A Digital Ocean micro server (512MB Ram) * Laravel Forge setup * Blackfire integration * New Relic integration * Papertrailapp integration for streaming error logs * Beanstalkd for queued jobs. * Zapier integration * Pure CSS framework * Cloudinary CDN and image manipulation * MySQL * Redis server * Import.io to create a crawler API * Bitbucket private repo * Import.io for the Reddit and Imgur crawler
So what does HN think about my work?
I used Import.io to write a crawler API to fetch the top posts. Then I wrote some cron jobs to automate calling the API to fetch the latest posts every three hours. The actual job runs via a beanstalkd queue as a Laravel artisan command.
I didn't want to hotlink the images directly from Imgur as I didn't want to leech on their bandwidth, so I used Cloudinary to display the pictures instead. One advantage was that with the Cloudinary API, I could resize the images and/or convert gifs to an MP4 on the fly (MP4 files take a lot less bandwidth to deliver). However, since I am not making any money from the site and wanted to stay on the free plan, I decided to mostly ignore gif files as they take a lot of bandwidth and disk space on Cloudinary. The Laravel queued command also takes care of uploading the images to Cloudinary.
From a design perspective, I'd like it if the image wasn't flush with the header, and I'd like it if I didn't have to scroll to see the whole image.
From a usability perspective, it'd be nice if the button to load the next picture was in a static and predictable position, that way I didn't have to move my mouse to continue through the chain.
Overall nice app. :)