HackerNews Clone

HackerNews Clone is a clone of the YCombinator HackerNews website created using React.js.

• Visit Website
• Source Code

• Web Development

What I Did

I created a clone of the YCombinator HackerNews website using their official REST API endpoints using the React.js framework. Because this was a learning experience, I also decided to setup the project without the help of the create-react-app CLI tool. This way, I get to practice using Webpack more.

The Technology Stack

• HTML5
• CSS3
• JavaScript
• React.js
• Webpack 4

Challenges

I learned some basic React.js recently, and to apply my newfound knowledge, I decided to create this HackerNews clone website. In other words, this was my first time creating a website using React.js. With that in mind, everything was new to me and introduced some small challenges along the way. Coming from a Vue.js background, this helped speed things up significantly.

• How to include separate stylesheets
• How to import images and get them to successfully display
• How to use the react-router library to handle page links
• How to deploy a React.js app to Heroku

What I Would Do Differently

If I were to redo this project using React.js again, what I would do is make a generic page component which will handle all the page views under a single file. Then, I would have a single component for each "post" item layout since not all the items displayed on each page are formatted the same. By doing it this way, it should shrink the site down in size. Another thing I would do differently would probably tackle the issue of waiting for the items to load. What I would do is when the user visits the site for the very first time, it would do things normally. Next, instead of calling the API routes again whenever the user returns to that page, I would have the webapp store that data on the user's browser (ex: localStorage). That way, it will improve the overall user experience. I would then have the webapp do a new API call per new browser session or every X interval of time to tackle the scenario of new content showing up.