Building a HackerNews Clone in VueJS Image Building a HackerNews Clone in VueJS

Project Outline

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!

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.

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!

Course Lessons

Sunset in the mountains

Project Name

Part 1 - Setting Up Our VueJS Project

In this tutorial, we are going to be setting up our basic project that will form the base of our HackerNews clone

Sunset in the mountains

Project Name

Part 2 - Creating a Few Components

In this tutorial, we are going to be creating a few components to our HackerNews clone and fleshing out our project.

Sunset in the mountains

Project Name

Part 3 - Adding a Few Routes To Our App

In this tutorial, we are going to setting up our application to use the vue router and add a few simple routes to our application.

Sunset in the mountains

Project Name

Part 4 - Hitting The HackerNews API

In this tutorial, we are going to start hitting some APIs and showing some of the top stories on our HackerNews clone.

Sunset in the mountains

Project Name

Part 5 - Viewing Individual News Articles

In this tutorial, we are going to add some more routes and components to our application to view individual news items and the comments

Sunset in the mountains

Project Name

Part 6 - Advanced Components

In this tutorial, we are going to split out our application into more components and use some of the more advanced features such as props and transitions.

Sunset in the mountains

Project Name

Part 7 - Managing State with Vuex in your VueJS Applications

In this tutorial, we are going to look at how you can manage state within your VueJS applications using vuex

Sunset in the mountains

Project Name

Part 8 - Deploying Our HackerNews Client To AWS

In this tutorial, we are going to be looking at how you can deploy your HackerNews clone up to AWS using their S3 service