How to Build a Hacker News Clone with Syncano (Part 1: Data Management)

Todd WackerTodd Wacker

Get Started with Syncano Quickly by Building a Hacker News Clone.

What Is Syncano?

First time hearing about Syncano? Let me tell you about it! Syncano is a serverless platform that allows developers to build amazing apps in half the time it used to take.

Serverless architecture is the future of app-building and is changing the game for developers all around the world. Essentially, instead of managing and provisioning servers or writing boilerplate code over and over again to handle backend tasks, developers can use a service like Syncano to quickly and easily set up their backend.

With Syncano's user-friendly Dashboard, any Classes, Scripts, or other Sockets (aka, building blocks) you create can be easily accessed through our API or one of our many SDKs (including JavaScript, Python, and iOS, to name a few).

This allows you to focus on what really matters with your app: the user experience. By running backend code in the cloud (with Scripts) or rendering views server-side (with Templates), developers are able to save valuable client-side resources for other tasks.

Data and user management are also easier with Syncano. A User Class is set up right out of the box with methods to register, log in, and more. Other Classes can be set up quickly in the Dashboard with any schema you need, a variety of data types, and relationships to other Classes.

Hands-On with Syncano

The best way to understand Syncano is to dive in and get hands-on with it. This tutorial will show you how to wire up a Hacker News clone front-end with Syncano. Let's get started.

Our Hacker News clone app is located here. You'll want to keep a tab open with this app as we'll be referring back to it throughout this tutorial. You may notice that it doesn't look very much like Hacker News at this point. Don't worry! We'll be setting it up shortly to work with Syncano.

You'll also need to sign up with a Syncano account.

Step 1: Opening Your Instance

Everything in Syncano lives in an Instance. You can think of each Instance as a project for your application. One Instance can be used for multiple apps, but we suggest using one Instance per app. You can also use one Instance for, let's say, both the desktop and mobile versions of your app.

Please use the images below to locate where you are in the Dashboard, and then open your Instance.

If you just signed up, your first Instance was created for you. You may already have your Instance open, which will look similar to the image below:

open_instance

If, on the other hand, you see the Instance list page as seen below, then open the Instance you want to use for this tutorial:

open_instance2

How the Syncano Dashboard Works
The Dashboard is where you can add different Sockets, or building blocks, to your application. These Sockets can be used as standalone pieces of your app, or they can be combined for even greater functionality.

Everything you create in the Dashboard will be saved as part of your Instance's unique API. From the client-side of your app, you'll be able to interact with your Instance's API through HTTP calls, or through your favorite coding language via Syncano's many libraries.

Step 2: Creating a Connection to Your Syncano Instance's API

You'll want to go ahead and connect your Instance with our Hacker News frontend (the link you kept open from the intro). To do this, we need two things:

  1. An API Key
  2. Your Instance name

Creating an API Key
When making a connection to your Syncano Instance, you'll need an API Key. In this example, we will use an API Key with a special flag that ignores any permissions set on your data. For the purpose of this tutorial, we won't explain how this flag works, but you can read more about permissions here.

First, open your API Key Manager by clicking on "API Keys" in the lower part of the Dashboard sidebar, as highlighted in red below:

connect1

Then, create an API Key that matches the following image:

connect2

Copy the new API Key and save it for later!

Getting Your Instance Name
Your Instance name can be found at the top left corner of your Dashboard. In the screenshot below, it is "nameless-pine-8974".

connect3

Back in the Hacker News clone, select "Link Account" from the top menu. Paste your API Key and Instance name in the spaces provided and hit "Submit". If the link is successful, you should see the "Account successfully linked!" message.

connect4

Next, we'll set up a Data Endpoint and some Data Objects for the News Items that we'll be displaying on this page.

Step 3: Creating a Data Endpoint Socket

Our Hacker News clone wouldn't be complete without allowing users to upload and upvote interesting links they find from around the Internet. We'll call these News Items and we'll need to set up a Data Endpoint for them in our app.

To do this, we'll navigate back to the Syncano Dashboard and create a new Data Endpoint. First, click ADD in the top right corner, or next to the Data Endpoint box as seen below:

data-endpoint1

data-endpoint2

We're going to name our Data Endpoint getnewsitems simply because it's going to do just that! It will get our news items and send it to our app as a nicely formatted JSON when we make a request to it. The great thing about creating a Data Endpoint is that you can create a Class right inside the creation screen. We'll get into what a Class is in a second, but for now fill out Step 1 of the Data Endpoint creation like this:

data-endpoint3

The next screen you're going to see is a Class creation screen. This is where you'll define the template for each individual news item.

You'll want a title field that is of type string so that each Data Object can have the name of the article, a URL field that is also of type string to store the articles URL, and an upvotes field that is of type integer so we can measure the number of upvotes each news item has.

You'll also notice that we checked the "Order" box on the upvotes field. This is so we can get our data sorted by upvotes, sending the news item with the highest number of upvotes to the top.

data-endpoint4

The last step is to configure the specific fields that will be retrieved when making a request. We can choose to see only one field, all of the fields, or anywhere in between. We can also choose how many, the order in which they are sorted, and any other specific query -- in case you want to, for example, see only a specific date range!

Make sure yours matches the image below:

data-endpoint5

That's it! Your Data Endpoint is configured. As long as you entered your API Key and Instance information as mentioned above, you're all set!

Step 4: Creating News Item Data Objects

Now that we have our Class set up through creating our Data Endpoint, we need to add Data Objects. There are a couple of ways to do this.

One way is to add them directly from the Syncano Dashboard by clicking on the blue box in the Data Objects column of the Class you want, then adding Data Objects by selecting the "+" button at the top.

Or, like in our case here, you can use the API to allow users to be able to create news items directly from our Hacker News app. Luckily, our app is already wired up to create news items when the "Add a News Item" form is submitted.

If you connected the app to your Syncano Instance correctly, you should be able to create news items and they will appear on the screen.

data-objects

You can also upvote news items and the order will change based on which news items have the most votes.

This form makes calls to the Syncano API to create new Data Objects when the form is submitted. It also increases each news item's upvotes property when the up arrow is clicked.

Behind the scenes, the app is accessing the Syncano API through the JavaScript library. You can learn more about the JavaScript library here.

This is a basic example of data management with Syncano. Class properties are very customizable, so you can add any fields you deem necessary to your future Classes!

Stay tuned for Part 2 of this tutorial, where we build a Schedule Socket to run custom code periodically!

Build powerful apps in half the time

Use our serverless platform to set up your backend in minutes.

Learn more
Todd Wacker
Author

Todd Wacker

Dev Evangelist, Developer