Join Makerpad today

Makerpad is home to over 9,000 folks. Access members-only content, build real projects & get expert support
Tutorials
/
⬆️ Hacker News clone with Bubble
Categories
Tools USEd

⬆️ Hacker News clone with Bubble

Link to Demo

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

You must be a member to view the full lesson

Join Makerpad today

Makerpad is home to over 9,000 folks. Access members-only content, build real projects & get expert support

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..


If you'd like this template, message @bentossell on Slack with your email for the account to send this template.

Ready to get started?

Join the community and start turning your ideas into solutions