Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Build Your Own Product Hunt With Telescope And Meteor

Over in startup land, one of the big stories of 2014 was, without a doubt, the success of Product Hunt1. It’s is a community where people post, vote on and comment on new products they’ve discovered or launched. Whether you’re looking for the next big thing to invest in or just want to find a better weather app, Product Hunt has got you covered.

Coincidentally, in addition to being a fan of the website, I also have a pretty personal connection to the company. I’ve been online friends with Product Hunt’s designer Jonno Riekwel2 for years, and I was part of founder Ryan Hoover3’s previous project, Startup Edition4.

01-product-hunt-opt-small5

Product Hunt (View large version6)

All this to explain that Product Hunt has been on my radar for a while now. In fact, what many people don’t know is that Ryan initially considered7 basing Product Hunt on Telescope8, an open-source app that I had just started working on! Sadly, Telescope was still too immature at the time, and Ryan wisely decided to build his own solution.

But I’m here to tell you that things have changed. As we know, Product Hunt has gone on to become Silicon Valley’s latest darling. But Telescope has also kept quietly evolving, and it’s now a full-featured solution for people to build their own communities. So, today, let me show you how you too can set up your own personal Product Hunt-style website.

Introducing Meteor Link

Product Hunt wasn’t the only success story of 2014. Another one was certainly Meteor9, the company behind the open-source JavaScript framework of the same name. Meteor completely changes the way we write apps by getting rid of the age-old client-server divide. Unlike other JavaScript frameworks such as AngularJS and Ember.js, Meteor runs not only in the browser, but also on the server. So, with Meteor, not only is your whole app written in JavaScript, but you can even share the same code and call the same functions in both environments!

02-meteor-homepage-opt-small10

The Meteor JavaScript framework (View large version11)

I decided to pick Meteor to build Telescope, and in fact I liked the framework so much that I ended up writing a book about it12. But that’s a story for another time. Don’t worry: Meteor may be cutting-edge, but it’s also very approachable. Even if you’re not a JavaScript expert, we’ll have you up and running in no time (about 45 minutes, to be exact)!

Installing Meteor Link

If you’re on Mac OS or Linux, installing Meteor is as simple as opening a Terminal window and typing:

curl https://install.meteor.com/ | sh

Though Meteor doesn’t quite support Windows yet, a preview release13 is available, and an official version should be coming very soon.

Installing Telescope Link

Next, you’ll need to clone Telescope’s code base from GitHub14. Just type:

git clone https://github.com/TelescopeJS/Telescope.git

If you don’t have Git, you can download the command-line utility15 or use an app, such as the free GitHub for Mac16.

Running Telescope Link

Almost there! First, drill into the newly created telescope directory with this:

cd Telescope

Then, run your app with this:

meteor

Your app might take a minute or two to initialize the first time. But once it’s done, your brand new Telescope app should be up and running! Head to http://localhost:3000 to check it out.

Your new Telescope app17

Your new Telescope app (View large version18)

If at any point you need to stop your Meteor app (maybe it’s crashed or you want to get the command prompt back), you can do so by opening the Terminal tab where your app is running and hitting Control + C.

Configuring Telescope Link

Let’s personalize the app a bit. The first thing to do is create a user account by clicking the “Sign Up” link in the top navigation menu. Because this will be the first user account you’ve ever created, it will automatically be assigned administrative rights, which will let you access Telescope’s admin area.

Telescope's settings panel19

Telescope’s settings panel (View large version20)

Once your account is created, head to the “Settings” page via the “Admin” menu. There, you can set various options, such as your website’s title, description and color scheme.

For example, try setting the header’s color to #1282A2 (or any other color!), and then click the “Submit” button at the bottom of the form.

Customizing colors21

Customizing colors (View large version22)

Activating “Product Hunt Mode” Link

Telescope was originally based on the popular hacker hangout Hacker News, which is why the default view is just a uninterrupted list of posts. But with the success of Product Hunt, more and more people started asking for an option to use a day-by-day view, which I like to call “Product Hunt mode.”

To enable it, just go to the “Settings” page, scroll down to the “Default View” option, and set it to “Daily.” Save the settings and refresh the home page. You should now see a much nicer layout!

Product Hunt mode23

Product Hunt mode (View large version24)

Deploying Link

Let’s show the world the result of our hard work. Deploying an app is usually a painful process, but not today. It turns out that Meteor provides its own free hosting service for quickly deploying small apps and prototypes.

Open a new Terminal window, browse to your app’s directory, and then type the following:

meteor deploy my-app

Replace my-app with the name of your app.

If this is your first time deploying on Meteor’s service, you’ll be prompted to create a developer account25.

Once the deployment process is finished, your app will be live at http://my-app.meteor.com!

Note that the settings of a Telescope app are stored in its database, which is not transferred as part of the deployment process. So, you’ll need to re-enter any settings that you’ve previously set.

Customizing Your App With Packages Link

So far, we’ve changed the default view and tweaked a few colors. We can take things much further than that. Let’s start by adding a few extra CSS customizations.

To do so, we’ll create our own package. At this point, we could just go ahead and modify Telescope’s code, but that could lead to Git conflicts when we try to update the app down the road.

Instead, we’ll use Meteor’s package system to make sure that any customizations we implement stay independent of the main code base and will not be overwritten even when we pull in future updates.

By the way, the code for this tutorial is also available on GitHub.

Inside your app, locate the /packages directory, and create a new telescope-custom directory inside it (either with the mkdir command or by going to File → New Folder). From now on, we’ll put the files we create inside this directory.

Each Meteor package needs a file named package.js, which contains the package’s manifest, a simple set of instructions that tell Meteor what the package actually contains.

So, create the package.js file inside telescope-custom, and type the following:

Package.describe({
  summary: 'Telescope custom package',
  version: '1.0.0',
  name: 'telescope-custom'
});

Package.onUse(function (api) {  
  api.addFiles('custom.css', 'client');
});

The Package.describe block provides some basic information about the package. But the interesting part is the Package.onUse block, which tells Meteor which files to load in our package. In this case, we’ll say we want to add a custom.css file.

Remember I said Meteor could handle code on both the client and server? This is why we have to specify where we want to add our files — in this case, on the client.

All that’s left is to actually create this custom.css file!

Customizing The CSS Link

Let’s open the custom.css file we just created and add Product Hunt-style yellow hover states to each of our posts:

.post:hover{
  background: #fcf5e2;
}

We’re almost done. We still need to tell Meteor that we want to use this new package. We can do so with the following command:

meteor add telescope-custom

Once you’ve added the package, your browser tab should automatically refresh, and you’ll see that our new yellow hover state is working!

Hover effect26

Hover effect (View large version27)

But wait, we didn’t even tell Meteor where to import that new style sheet from. How can that even work?!

This is one of Meteor’s cool time-saving features. It’s smart enough to notice when you add a new CSS file to your code base. It will automatically concatenate it, minify it and load it in your app.

Customizing Templates Link

A nice touch in Product Hunt’s UI is how it includes banners between days. It’s a great way to link out to other content and break up the monotony of listed links, while maintaining a clean layout and not disrupting the experience. Let’s see how to do the same thing with Telescope.

Telescope already has templates before and after each day, but the default templates are empty. So, our mission will be to override the afterDay template with one that contains actual content.

Add a banner.html file to your package, and add a simple banner:

<template name="banner">
  <div class="custom-banner"><a href="http://twitter.com/telescpe">Follow us on Twitter!</a></div>
</template>

Next, we’ll tell Telescope to override the default afterDay template with this one. To do so, we create a new banner.js JavaScript file at the root of our package:

templates["afterDay"] = "banner";

Before calling the afterDay template, Telescope will check in the templates array to see whether we have provided a replacement. And since we have, it will use the template code from banner.html instead!

We’re not quite done yet, though! Just as before, we need to add our new files to the package’s manifest. And this time, we’ll also need to add package dependencies to it.

We’ll add the templating package, which lets us use templates, as well as the telescope-base package, which exposes the global templates object that we’re calling in custom.js. So, let’s go back to package.js and modify its contents:

Package.describe({
  summary: 'Telescope custom package',
  version: '1.0.0',
  name: 'telescope-custom'
});

Package.onUse(function (api) {

  api.use('telescope-base');
  api.use('templating');

  api.addFiles('custom.css', 'client');
  api.addFiles('banner.html', 'client');
  api.addFiles('banner.js', 'client');
});

Finally, let’s add a little CSS for good measure. Go back to custom.css and add this:

.custom-banner{
  background: #c4e6ef;
  padding: 20px;
  text-align: center;
}
Twitter banner28

Twitter banner (View large version29)

Adding Some Logic Link

Things are looking good, but you’ll notice that our banner is repeated after every single day.

This might get a little repetitive. Let’s see how to show our banner after only the third day.

To do this, we’ll need a bit of JavaScript magic. First, we’ll use Meteor’s templating logic (known as Spacebars) to add an if statement to the template:

<template name="banner">
{{#if isThirdDay}}
  <div class="custom-banner"><a href="http://twitter.com/telescpe">Follow us on Twitter!</a></div>
  {{/if}}
</template>

We haven’t yet defined what isThirdDay is supposed to be. We’ll do that through a template helper.

Template helpers are simply bits of JavaScript code you can assign to variables and use in your templates. Let’s open banner.js and add the following code to the file:

Template.banner.helpers({
  isThirdDay: function () {
    return this.index == 2;
  }
});

Because our afterDay template is called from a loop, we can access the current day’s index using this.index. And because that index is zero-based, the third day will be the one whose index is 2, which in turn gives us the contents of our helper.

Here you go! Now our banner is appearing after only the third day and no other.

Twitter banner, not repeated30

Twitter banner, not repeated (View large version31)

Other Features Link

We’re running out of time, but this is by no means the extent of Telescope’s features. Out of the box, Telescope also makes the following possible:

  • Add a banner to sign people up to your email list.
  • Generate and send a newsletter of the best posts on your website.
  • Add thumbnail previews to each new posted link.
  • Automatically import posts from an RSS feed.
  • Require new posts to be approved by an admin.
  • And much more!

If you want to go further, a good place to start would be Telescope’s documentation32. You can also find a nice introduction to Meteor itself on the official website33.

Conclusion Link

As Product Hunt’s success has shown, there’s a big demand for websites that help us deal with information overload by streamlining and centralizing content. Telescope is a fast, modern platform on which to build your own community, social news app or link-sharing website. And, as you’ve just seen, extending it is very easy. I encourage you to give it a try. And if you end up building the next Product Hunt with Telescope, I hope you’ll remember who first told you about it!

Thanks to Loren Sands-Ramshaw, Phil Pickering, Nigel Anderson, Austin Stoltzfus and others for reviewing a draft of this article.

(vf, il, al)

Footnotes Link

  1. 1 http://www.producthunt.com/
  2. 2 http://www.producthunt.com/Jonnotie
  3. 3 http://www.producthunt.com/rrhoover
  4. 4 https://twitter.com/startupedition
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2015/02/01-product-hunt-opt.jpg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2015/02/01-product-hunt-opt.jpg
  7. 7 http://ryanhoover.me/post/69599262875/the-wisdom-of-the-20-minute-startup
  8. 8 http://telesc.pe
  9. 9 http://meteor.com
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2015/02/02-meteor-homepage-opt.jpg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2015/02/02-meteor-homepage-opt.jpg
  12. 12 http://discovermeteor.com
  13. 13 https://github.com/meteor/meteor/wiki/Preview-of-Meteor-on-Windows
  14. 14 https://github.com/TelescopeJS/Telescope
  15. 15 http://git-scm.com/downloads
  16. 16 https://mac.github.com/
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2015/02/03-telescope-fresh-install-opt.jpg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/02/03-telescope-fresh-install-opt.jpg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2015/02/04-telescope-settings-opt.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2015/02/04-telescope-settings-opt.jpg
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2015/02/05-telescope-color-opt.jpg
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2015/02/05-telescope-color-opt.jpg
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2015/02/06-product-hunt-mode-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2015/02/06-product-hunt-mode-opt.jpg
  25. 25 https://www.meteor.com/services/developer-accounts
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2015/02/07-telescope-hover-opt.jpg
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2015/02/07-telescope-hover-opt.jpg
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2015/02/08-banner-repeated-opt.jpg
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2015/02/08-banner-repeated-opt.jpg
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2015/02/09-banner-not-repeated-opt.jpg
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2015/02/09-banner-not-repeated-opt.jpg
  32. 32 http://telesc.pe/docs
  33. 33 https://www.meteor.com/install
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Sacha Greif is the creator of Sidebar, a site+newsletter that gives you the 5 best design links of the day. He has also published Discover Meteor, a book about the Meteor JavaScript framework. You should follow him on Twitter.

  1. 1

    Thanks! Really comprehensive walkthrough. I can’t wait to play around with this.

    6
  2. 2

    Hey,

    I used Telescope to build http://www.themmatrends.com . Its was great help to understand some of Meteor development concepts. Sacha developed and maintains the app great.

    0
  3. 3

    Great article but,

    “Not only is your whole app written in JavaScript, but you can even share the same code and call the same functions in both environments!”

    Has the world gone mad? Brendan Eich must be wishing he’d had a bit more time.

    Nonetheless, I’m going have a play with it!

    0
  4. 4

    I built http://DataLook.io with Telescope. I can’t say enough positive things about working with Meteor and Telescope. Once you see how quick and easy it is to build an app with Meteor, you’ll never be able to go back. And Telescope is a great project to learn about Meteor app structure and best practices. So what are you waiting for?! Go try it!

    2
  5. 5

    Telescope is awesome, we’ve been using it to run http://ClosingCall.co and the features you get out of the box work like magic – lets you focus on building the community.

    1
  6. 6

    Another happy Telescope user here, http://frontends.org highly recommended, the support is amazing, you won’t get lost on any issue you have.

    Sacha involvement with the users and the small community that is growing around it is very good too.

    1
  7. 7

    Dwayne Charrington

    March 2, 2015 2:43 am

    A really great article. I stumbled upon Telescope a little while ago when I was wanting to build a site similar to Hacker News and while I opted to build my own from scratch, Telescope was too hard to pass up. Really well built, great features and nice default interface.

    The site I started with a good friend of mine is for Javascript and front-end development called JSdev.io, I would be humbled if people would check it out: http://jsdev.io

    0
  8. 8

    I haven’t got a chance or application to use Telescope yet but it is amazing how fast you can build an application in Meteor.

    Does anyone know how you can setup or access your data outside with Meteor so you continue to get real-time by default?

    I’ve tried Asteroid but could not get logging in to the meteor app to work.

    0
  9. 9

    Alex Coleman

    March 11, 2015 4:47 pm

    Great walkthrough. Thanks Sacha! I can see this being very useful in terms of launching a niche community for my audience. At this point, the PH model has been refined to such a point that it’s really nice to see a sort of “plug-and-play” method versus having to reinvent the wheel in order to create a community like this.

    0
  10. 10

    I’m a newbie and need some help.. when it says “Open a new Terminal window, browse to your app’s directory, and then type the following:
    meteor deploy my-app
    Replace my-app with the name of your app.”

    #1 – Where do I name my app?
    #2 – I was never instructed to make a directory with my app so how do I “browse to your app’s directory”

    I’m VERY new at this but I’ve gotten this far so I thought I’d ask!

    2
    • 11

      #1 You actually name your app when you type the command “meteor deploy my-app”

      #2 You have to type “cd Telescope”, and then “meteor deploy my-app”

      0
  11. 12

    Hi Guys,

    I was able to deploy to sparkthis.meteor.com but I can’t seem to push changes to the deployed app? How is this accomplished?

    0
    • 13

      Telescope is awesome. I set mine up over the weekend. It’s very easy to setup.

      Does anyone know how to add a down vote feature?

      0
  12. 14

    Amazing tutorial, got me up and running. I got stuck after I deploy my website to the server on Meteor. I don’t know how to operate the command line for the server side installation of Telescope on Meteor.com. Does anyone have any ideas for using the command line to control my Meteor server when it’s no longer on my localhost? Thanks!!

    0
  13. 15

    Great article! I was wondering how you could change “Categories” in the navbar and the associated slug for something else like “Episodes”, for example.

    0
  14. 16

    Awesome write up! Is the code for this tutorial (package used to override existing template) available anywhere – it looks like the github link is broken =(

    Thanks!

    0
  15. 17

    Thanks!

    I am trying to put the logo in the top left corner, change the height of the header and make a few other changes. Where do I find the names of the id’s or classes so I can style them?

    0
  16. 18

    Typing:

    meteor add telescope-base

    I’m getting:

    While adding package telescope-base:
    error: no such package

    in the terminal.
    And I can not find telescope-base anywhere.
    ( great tutorial so far ). Thanks

    0
    • 19

      As joachim comments.. I get the exact same.. anyone who can help?

      0
      • 20

        try telescope:core

        also, I can’t get the banners to appear despite following all the steps :(

        0
  17. 21

    in:

    Customizing Templates

    We’ll add the templating package, which lets us use templates, as well as the telescope-base package, which exposes the global templates object that we’re calling in custom.js. So, let’s go back to package.js and modify its contents:

    where do I find custom.js

    Thanks.

    0
  18. 22

    I’m another Telescope user here. I’ve successfully used it in http://mobileappgrowth.com . Support is great, and Sacha is very active with this project. You should check out Telescope’s Slack channel.

    0

↑ Back to top