Creating a HackerNews Clone in React + Redux + GoogleCharts + WebSockets + 100% Google LHAS

5 min readDec 13, 2020

Key Features : ReactJS-Redux ,100% Google Lighthouse Score , Webpack optimised build for Prod & Dev , SSR , HMR ( Hot Module Reloading ) ,WDS ( Hot Code Patching Reload ) , Lazy Loading , Neat Architecture , WebSockets for Performance , Minified bundling & packing , elinting configuration , Jenkins Integration , Optimized Images.

Project Submitted at : https://github.com/Deepak003/hnclone-proj-reactjs

Project Deployed URL : https://deepak-hnclone-sapient-proj.netlify.app/

I replicated and used API of : https://hn.algolia.com/.

In this article , I will tell you how you can build your HackerNews Clone using React + Redux.

Folder Structure for the Project

In this tutorial, we are going to build a production-quality Hacker News clone. We will walk through the steps of initialising the application, adding Redux to manage state, building the UI in React, and deploying the solution to GitHub pages. We will style the application using styled-components and call the public Hacker News API using the axios library.

Development and Build Process

To start the development server, run npm i && npm start and have at the src/. To build the project use npm run build. Files are served from /build.

Initialize the Project

We will use create-react-app to start the project. This allows us to build React applications without worrying about the configuration. First, make sure you have create-react-app installed.

npm i -g create-react-app

Initialize your project by running the command below. create-react-app installs all the essential packages to build a React application and it has default scripts to manage development and building for production.

create-react-app hn-clone-proj-reactjs-master
# Wait for everything to finish...
cd hn-clone-proj-reactjs-master

Now let’s install the core packages that we will need. I’m using yarn but if you have npm just replace the yarn add with npm install.

yarn add redux styled-components react-redux redux-logger redux-thunk axios

create-react-app uses the NODE_PATH environment variable to create absolute paths. We can declare environment variables in the .env file and create-react-app will recognize it and apply it using the dotenv library.

# Create a .env file using the touch command
touch .env# Inside the .env file add:
# NODE_PATH=src

If you are unfamiliar with this pattern, it will make more sense when we start building the application. What it allows you to do is directly import files without needing trace your folder paths. Something like this ../../components/List becomes components/List — much more convenient.

actions: This folder will hold all of our React action components.
assets: Stores all the static assets of our application.
store: The store holds all of our logic for Redux and managing state.
components: Inside the styles folder, we declare variables, templates, and reusable style patterns that can be shared in components.
utilities: Helper functions that can be reused throughout the application.
reducers : This folder will hold all of our reducer files.

There is 1 aspect about this folder structure worth noting:

Our application only has 1 route which is the root /. If we had multiple routes, I would also use react-router and create a pages folder for page-level components.

Adding Redux to Your React App

Inside our src/ folder, create actions, reducers & store folder.

From my experience, in production Redux is more manageable if you group by feature as opposed to functionality, similar to the Ducks approach. In the “grouping by functionality” approach where all actions, reducers, etc live in a separate folder, it can be increasingly difficult to navigate between files when the number grows in production. When you group by feature, you always have the files you need in a single, compact location.

Reducers

Create an index.js inside reducers like below:-

Now as part of HackerNews , we have to show news and give a search functionality.

Create news.js

Create search.js

After this create a store folder and create devStore.js & prodStore.js for dev and prod purposes.

Inside the devStore.js we’ll create a createStore function which is how we will initialize Redux in the application.

We use createStore from Redux which builds the initial store. We import rootReducerfrom our reducer file, and we import the middleware from our middleware configuration file.

Actions

Next step is to create action files. We will create 3 files . index.js , search.js and network.js.

Create index.js

Create search.js

Create network.js

In this file , we make call to algolia api for displaying all stories & search functionality.

Charts

Now next step is to show charts for upVotes .We will be using react-google-charts.

Displaying Items on Page

Create an Item component for your HackerNews Page.This contains a single news on Page with upVote button.

Create index.jsx for Item component.

Next step is to create Results page which shows list of items.

Create index.jsx for Results component.

App.js

Now we have to structure our page and group the components.We will be using LineCharts and in componentDidMount lifecycle method , we will fetch all stories and in componentDidUpdate lifecycle method , we will be fetching all stories basis search props.

Finally , connecting our App to Store in main.js

And that should be all you need to get Redux integrated with the app! Now run npm start and Return to http://localhost:3000, and you should see the app of HackerNews.

Rest other parts of application code are uploaded in git and only main parts of code have been explained.

Concluding on Architecture of App

I am Deepak Tiwari and working as Director — Software Engineering at one of MNCs in Hyderabad. I love coding in Javascript and learn new things. I am a Full Stack Application Architect and have architected over 100+ applications in Prod.