{"_id":"5635b293d209b50d0031dfd5","category":{"_id":"5635b291d209b50d0031dfca","version":"5635b290d209b50d0031dfc4","__v":1,"pages":["5635b293d209b50d0031dfd5"],"project":"550a7754635c660d0052808e","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-05-23T23:03:35.313Z","from_sync":false,"order":5,"slug":"case-studies","title":"Case Studies"},"version":{"_id":"5635b290d209b50d0031dfc4","__v":1,"project":"550a7754635c660d0052808e","createdAt":"2015-11-01T06:34:56.868Z","releaseDate":"2015-11-01T06:34:56.868Z","categories":["5635b291d209b50d0031dfc5","5635b291d209b50d0031dfc6","5635b291d209b50d0031dfc7","5635b291d209b50d0031dfc8","5635b291d209b50d0031dfc9","5635b291d209b50d0031dfca"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"0.25.0","version":"0.25"},"project":"550a7754635c660d0052808e","user":"5469e5dfa3b67a0e00559b06","githubsync":"","__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-05-23T23:03:43.138Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":33,"body":"[CrunchHunt](http://www.crunchhunt.com/) is a mash-up of [TechCrunch](http://www.techcrunch.com/) and [Product Hunt](http://www.producthunt.com/), built with Telescope.\n\nI first got the idea for CrunchHunt while testing out Telescope's **post-by-feed** feature, which lets you parse RSS feeds to automatically generate posts instead of having to manually submit them individually. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/uiduRhIcSiqsjqbMNtNa_crunchhunt.jpg\",\n        \"crunchhunt.jpg\",\n        \"1200\",\n        \"717\",\n        \"#9e492d\",\n        \"\"\n      ],\n      \"caption\": \"CrunchHunt\"\n    }\n  ]\n}\n[/block]\nI needed something to try the feature on, and I randomly grabbed TechCrunch's feed. As I was playing around with the app, I realized that this was actually a pretty cool way of reading TechCrunch.\n\nSo I decided to run with the idea and create a quick side project over the week-end, just to show how easy it can be to create this kind of site with Telescope.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Get The Code\",\n  \"body\": \"Note that the code for CrunchHunt is [available on GitHub](https://github.com/TelescopeJS/CrunchHunt), with all the customizations living in the [`crunchhunt`](https://github.com/TelescopeJS/CrunchHunt/tree/devel/packages/crunchhunt) package.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Easy Tweaks\"\n}\n[/block]\nThe first step was tweaking the colors and adding a logo. I also set the homepage to use the Daily view instead of the default Top view. \n\nAll of this can be done from Telescope's [Settings](doc:basic-configuration)  panel, without touching a line of code. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"UI Customization\"\n}\n[/block]\nI wanted to take things a little further, so I forked Telescope's [sample project](https://github.com/TelescopeJS/sample-project) to give CrunchHunt its own repo, and then [created a custom package](doc:custom-packages) to hold all my customizations. \n\nSome of the tweaks I made include:\n\n- Removing the “Submit Post” button, since posts would be automatically inserted from the RSS feed.\n- Removing the “Upvote” button, since shares would replace votes (more on this later).\n- Removing the post author avatar, since it would always be the same.\n\nYou can view the full code for the `crunchhunt` package [on GitHub](https://github.com/TelescopeJS/CrunchHunt/tree/devel/packages/crunchhunt). \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Getting Shares With KimonoLabs\"\n}\n[/block]\nThe only “big” customization I did was ranking links based on their number of Twitter, Facebook, etc. shares instead of based on votes. \n\nIn order to do this, I first had to somehow obtain that number. I noticed TechCrunch was already doing the work of counting shares on their own site, so I decided to make use of it. \n\nNow TechCrunch doesn't have an API, but thankfully I didn't need one thanks to [KimonoLabs](https://www.kimonolabs.com/). \n\nKimonoLabs is an amazing service that lets you point to any part of a web page, and then create an API for that. Practically speaking, I used their Chrome extension to identify the “shares” count on a random TechCrunch article page, which gave me an API endpoint. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/nVzYWIOvRMCuBuH9E4R7_kimono-tc.jpg\",\n        \"kimono-tc.jpg\",\n        \"1400\",\n        \"815\",\n        \"#c34926\",\n        \"\"\n      ],\n      \"caption\": \"Defining scraping targets (highlighted in yellow) with KimonoLabs\"\n    }\n  ]\n}\n[/block]\nNow all I needed to do was query that endpoint while passing *any* TechCrunch URL as parameter, and KimonoLabs would be smart enough to go fetch the shares count on *that* page. Pretty awesome!\n\nI could now make a function that called that API for each post in the database, and added a new `shares` property to each one of them. And to finish things off, I used the [synced-cron](https://github.com/percolatestudio/meteor-synced-cron) package to call that function every 10 minutes. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/yiNzFYUNSDudm2Cvj1bJ_kimono-api.jpg\",\n        \"kimono-api.jpg\",\n        \"1400\",\n        \"555\",\n        \"#5e8ba9\",\n        \"\"\n      ],\n      \"caption\": \"The KimonoLabs API dashboard\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Rate Limiting\"\n}\n[/block]\nNow I was using KimonoLabs' free service, and asking them to go and fetch a whole TechCrunch page every time I called their API. So it's understandable that they'd put a limit on just how often I could call their service.\n\nSo I did need to do one more thing, which was rate limit the API calls. \n\nI used this [Meteor rate limiting package](https://github.com/dandv/rate-limit) to [space out API calls by four seconds](https://github.com/TelescopeJS/CrunchHunt/blob/devel/packages/crunchhunt/lib/server/shares.js#L33).\n\nOne small gotcha: if you have more than one server running at the same time (i.e. development and production), make sure you don't go over the limit by accident!\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Ranking By Shares\"\n}\n[/block]\nThe final piece of the puzzle was taking this `shares` property and actually ranking posts by it. This was just a matter of overriding the definition for the `singleDay` ranking, which is used by the Daily view.\n\nI also created a simple `custom_post_shares` template to show the shares count on each post. Done!\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Conclusion\"\n}\n[/block]\nAssuming you don't need too much UI customization or custom rankings, Telescope's feed feature makes it possible to get a community up and running for your blog or site in – literally – minutes. \n\nCrunchHunt was a lot of fun to make, and as a bonus I was able to fix a few little bugs and annoyances in the core app, too. So check it out, let me know what you think, and hopefully this will inspire you to use Telescope for your own cool mash-ups!","excerpt":"","slug":"crunchhunt","type":"basic","title":"CrunchHunt"}
[CrunchHunt](http://www.crunchhunt.com/) is a mash-up of [TechCrunch](http://www.techcrunch.com/) and [Product Hunt](http://www.producthunt.com/), built with Telescope. I first got the idea for CrunchHunt while testing out Telescope's **post-by-feed** feature, which lets you parse RSS feeds to automatically generate posts instead of having to manually submit them individually. [block:image] { "images": [ { "image": [ "https://files.readme.io/uiduRhIcSiqsjqbMNtNa_crunchhunt.jpg", "crunchhunt.jpg", "1200", "717", "#9e492d", "" ], "caption": "CrunchHunt" } ] } [/block] I needed something to try the feature on, and I randomly grabbed TechCrunch's feed. As I was playing around with the app, I realized that this was actually a pretty cool way of reading TechCrunch. So I decided to run with the idea and create a quick side project over the week-end, just to show how easy it can be to create this kind of site with Telescope. [block:callout] { "type": "info", "title": "Get The Code", "body": "Note that the code for CrunchHunt is [available on GitHub](https://github.com/TelescopeJS/CrunchHunt), with all the customizations living in the [`crunchhunt`](https://github.com/TelescopeJS/CrunchHunt/tree/devel/packages/crunchhunt) package." } [/block] [block:api-header] { "type": "basic", "title": "Easy Tweaks" } [/block] The first step was tweaking the colors and adding a logo. I also set the homepage to use the Daily view instead of the default Top view. All of this can be done from Telescope's [Settings](doc:basic-configuration) panel, without touching a line of code. [block:api-header] { "type": "basic", "title": "UI Customization" } [/block] I wanted to take things a little further, so I forked Telescope's [sample project](https://github.com/TelescopeJS/sample-project) to give CrunchHunt its own repo, and then [created a custom package](doc:custom-packages) to hold all my customizations. Some of the tweaks I made include: - Removing the “Submit Post” button, since posts would be automatically inserted from the RSS feed. - Removing the “Upvote” button, since shares would replace votes (more on this later). - Removing the post author avatar, since it would always be the same. You can view the full code for the `crunchhunt` package [on GitHub](https://github.com/TelescopeJS/CrunchHunt/tree/devel/packages/crunchhunt). [block:api-header] { "type": "basic", "title": "Getting Shares With KimonoLabs" } [/block] The only “big” customization I did was ranking links based on their number of Twitter, Facebook, etc. shares instead of based on votes. In order to do this, I first had to somehow obtain that number. I noticed TechCrunch was already doing the work of counting shares on their own site, so I decided to make use of it. Now TechCrunch doesn't have an API, but thankfully I didn't need one thanks to [KimonoLabs](https://www.kimonolabs.com/). KimonoLabs is an amazing service that lets you point to any part of a web page, and then create an API for that. Practically speaking, I used their Chrome extension to identify the “shares” count on a random TechCrunch article page, which gave me an API endpoint. [block:image] { "images": [ { "image": [ "https://files.readme.io/nVzYWIOvRMCuBuH9E4R7_kimono-tc.jpg", "kimono-tc.jpg", "1400", "815", "#c34926", "" ], "caption": "Defining scraping targets (highlighted in yellow) with KimonoLabs" } ] } [/block] Now all I needed to do was query that endpoint while passing *any* TechCrunch URL as parameter, and KimonoLabs would be smart enough to go fetch the shares count on *that* page. Pretty awesome! I could now make a function that called that API for each post in the database, and added a new `shares` property to each one of them. And to finish things off, I used the [synced-cron](https://github.com/percolatestudio/meteor-synced-cron) package to call that function every 10 minutes. [block:image] { "images": [ { "image": [ "https://files.readme.io/yiNzFYUNSDudm2Cvj1bJ_kimono-api.jpg", "kimono-api.jpg", "1400", "555", "#5e8ba9", "" ], "caption": "The KimonoLabs API dashboard" } ] } [/block] [block:api-header] { "type": "basic", "title": "Rate Limiting" } [/block] Now I was using KimonoLabs' free service, and asking them to go and fetch a whole TechCrunch page every time I called their API. So it's understandable that they'd put a limit on just how often I could call their service. So I did need to do one more thing, which was rate limit the API calls. I used this [Meteor rate limiting package](https://github.com/dandv/rate-limit) to [space out API calls by four seconds](https://github.com/TelescopeJS/CrunchHunt/blob/devel/packages/crunchhunt/lib/server/shares.js#L33). One small gotcha: if you have more than one server running at the same time (i.e. development and production), make sure you don't go over the limit by accident! [block:api-header] { "type": "basic", "title": "Ranking By Shares" } [/block] The final piece of the puzzle was taking this `shares` property and actually ranking posts by it. This was just a matter of overriding the definition for the `singleDay` ranking, which is used by the Daily view. I also created a simple `custom_post_shares` template to show the shares count on each post. Done! [block:api-header] { "type": "basic", "title": "Conclusion" } [/block] Assuming you don't need too much UI customization or custom rankings, Telescope's feed feature makes it possible to get a community up and running for your blog or site in – literally – minutes. CrunchHunt was a lot of fun to make, and as a bonus I was able to fix a few little bugs and annoyances in the core app, too. So check it out, let me know what you think, and hopefully this will inspire you to use Telescope for your own cool mash-ups!