Building a HackerNews Clone in VueJS

Originally published by Elliot Forbes on July 14th 2018 499 reads

@elliot_fElliot Forbes

In this project series we are going to be building a simplistic version of HackerNews in VueJS from scratch. This will hopefully cover some of the key topics you will need to become familiar with if you wish to develop your own applications using the framework.

After playing a lot with VueJS over the past few months and I’m a huge fan of the framework. Thus, I thought it would be the perfect candidate to base the first ever project series for TutorialEdge on. I hope you enjoy this and find it worthwhile!

Throughout this project we will be integrating with the HackerNews API so that we can focus on the frontend JavaScript code and not have to worry about implementing the backend.

Video Tutorial

The goal of this project is to show you everything it takes to build a complete, fully functioning frontend application using the VueJS framework. We’ll walk through everything from setting up your project, to hitting a few APIs in order to retrieve any articles and rendering these nicely on our site!

We’ll cover the following topics:

Setting up a VueJS project using the vue-cli
Creating your first component
An introduction to routing in your Single Page Application
Hitting API endpoints in your components
Dynamic routing in a Single Page Application

If you wish for me to extend this or feel I should expand upon anything then please let me know by tweeting me: @Elliot_F

Github Source Code!

The full source code for this project can be found here: elliotforbes/hackernews-vuejs

Feel free to steal this and use this for your own personal gain, but if you do end up making a million off it, I expect at least a beer if you ever stumble across me in the wild!