In this tutorial, Dave walks through how to build a Hacker News clone using Bubble

First take a screenshot to get to colors we need:

And lets create a simple logo in Sketch

You can add the colors as a base inside of Bubble so you can easily use the colors inside the widgets

Btw (not needed for this app but a general tip) if you set this settings to 8 you images will be looking much more clear (general settings)

Lets setup the /index page

Set up your main group and give it the right colors In responsive add this rule

Add a header with your logo and links init should look something like this

Let the destination blank for now we’ll link them later

Add the links in one group and the logo so it will also look good on mobile

Add comments and news to the data News is going to be the main content

Now add a repeating group and design it like hacker news with the data ‘news’ and for now the source just search for all news

Create a blank page called /login

And add these workflow to the upvote icon in your main repeating group

Add this hiding rule to the icon

Add this plugin

Add the element inside the cell

Add this text to the cell. We’re later going to edit this to link to the comments etc

Should look something like this

Go to your login page and add the reusable login / sign up pop up and modify it so it also has a username field

You can add some rules for the username if you want them to be unique

On your login page create a workflow when page is loading to show the pop up. Make sure you tick the box that users can’t close using ESC

Make sure to change the login & sign up workflows that you add the username. Also add this in the sign up & login workflow

Create a new page: /submit and clone it from the /index page Create input fields that look this this:

Add these rules to the different fields

Create a new ‘news’ on submit

And add it to the current user

Change the status if title contains ‘show mn’

You can do the same with ask and other things if you want to easily categorise them

Create a new page cloning it from /index called /single-news (we’ll build this later)

Final step in the ’submit’ workflow:

Create this workflow to /single-news

Now we can build the single-post app and make it look like the /item on hacker news

Create a normal group with all the info from the /single-news ‘current news’ and bellow a repeating group with the comments from that single news.

When current user isn’t logged in when the comment button gets click create a custom workflow called login and send the user to the page /login if logged in then go on with the workflow and create the comment for that news

And add the comment to the ‘news’

Rules for the top line for the repeating group comments:

Now that we kind of build the single-news page go to the index page and change the second line of text into:

[url=website home URLsingle-news?n=currentcell’s News’s unique id] this will send the current news to the /single-news page

You can now create different copies from the /index page and change the ‘data source’ e.g. status = Show mn

And fill in the links in the menu

Create a page called profile and clone it from one of the previous pages so you have the same styles

For the about you can use auto-binding to update automatically and for the

[update] button you can use this workflow to update the email:

Add these rules to all repeating groups containing news - that will remove the () when there is no URL

When you click on a news item that has an URL open an external link like this:

You could add ‘web’ to the news items by adding this text:

It will automatically search on google with the title

Add a new page called ‘comments’ and clone it from single-page

Remove the top part and change the data source of the repeating comments group :

Also delete the workflows that fire if the ‘single news’ is empty

Change the top line to:

So it will show for which news item the comment was and will take you to the single news item

BONUS!

If you want to automatically add content to your Hacker news clone you can download the RSS plugin

Create an API workflow:

Create data inside your ‘news’ that’s called ‘rss item HN’ form the type ‘get feed rss channel item….’

Then take the info you need from the random rss item and fill the news item

Go to your index page and add this workflow to add a new news item every time someone loads the page

Change the text in your repeating groups to:

So it looks like it’s posted by the newsbot..