Build Hacker News clone using Vue.js

Vue.js has a sample project of building Hacker News clone using Vue.js, this blog breaks it down to seven steps and demonstrate how to build the Hacker news clone from start to finish.

Step 1: Basic Project set up

We will need to set up the basic project directory and npm package manager. It has the following steps:

src/main.js is going to be the entry Javascript file of the entire project. src/ directory contains application code. static/ directory contains static assets such as images.

Now we need to initiate npm by running npm init within the package, after the command we should see package.json existed in the directory. Inside package.json, we manages external Javascript package dependencies.

We will install webpack by running

npm install webpack -g

Then we use webpack to point main.js to webpack.config.js

webpack ./src/main.js webpack.config.js

This is the end of step 1, you can see the commit here

Step 2: create index.html and App.vue

Modify index.html to be the following:

Notice that “<div id=“app”></div>” is the main identifier of the Vue app. To build the app, we will use both Vue and Vue-router. We load the dependency and initiate the Vue router within main.js like the following:

First, we will create an App component that contains other components. It has the following steps:

After the steps above, we will compile the project by running webpack, it should compile successfully and we should see the following screen:

vue_step_2

This is the end of step 2, you can see the commit here

Step 3: connect HackerNews API

We need to use Hacker News API to fetch real data, and we need to use the following APIs:

Sample URL Data
/v0/topstories.json returns a list of item IDs
/v0/item/12430298.json returns a specific item with ID, an item can be a comment, an ask, a poll in Hacker News
/v0/user/jl.json returns information for a specific user

We will also later handle pagination by combining the results of three APIs we are using. To build the API client, we isolate the calls within store directory and file store/index.js. We have the following steps:

This is the end of step 3, you can see the commit here

Step 4: register Vue filter

We will build the feature to show when an item is posted on Hacker News, and the domain in which the source comes from. Vue custom filter is a great tool for that. It has the following steps:

This is the end of step 4, you can see the commit here

Step 5: create components for news board and each news

Now we’re ready to create the main page of Hacker News! On the main page, we will have the a big frame that includes each piece of news. We will separate them into “News” component and “Item” component. It has the following steps:

After finish the steps above, run webpack and it should compile successfully and we should the following screen:

vue_step_5

This is the end of step 5, you can see the commit here

Step 6: create component for users

On each item of the HackerNews page, we should be able to click into a user and see her detailed information. So we can add another component for UserView. The component should also have its own route as well. It has the following steps:

Compile using “webpack”, it should compile successfully, when you click into a user, then you should see something like this:

vue_step_6

This is the end of step 6, you can see the commit here

Step 7: create component for comments and polls

The last piece is the comment section. When we click on comments link we should see a detailed page of comment exchange. Filters and User information should also apply in the comment, so we can reuse some of the components we already built. It has the following steps:

Compile using “webpack”, it should compile successfully, when you click into comments into a story, then you should see something like this:

vue_step_7

This is the end of step 7, you can see the commit here

Conclusion

That’s it! We build the HackerNews clone using 7 steps. The blogpost is based on Vue.js HackerNews Clone and I also pushed the guide repo for the tutorial. You can find each step organized in separate commits here.

When I started learning Vue.js I wanted to follow a step-by-step guide to build a Vue.js app, and this blogpost is a tutorial I wish had existed. Please leave your comment on how I can improve this tutorial so people can find it helpful for them! Thanks for reading!

rss facebook twitter github youtube mail spotify instagram linkedin google pinterest medium vimeo