hackerNews

HackerNews application SSR Implemented

HackerNews Application A React App with using a Express on Google Compute Engine

A minimal example of using a Server Side Rendering (server for API, proxy, & routing) with a [React frontend] This application uses https://hn.algolia.com/api api to load posts from Hacker News

This project is deployed live at https://bit.ly/2ZEQKpY

Homepage

Graph for upvotes & Vote count Page

Showing & Hiding Upvotes

Design Points

A combo of two npm projects, the backend server and the frontend UI. So there are two package.json configs and thereforce two places to run npm commands:

1. Node server: ./package.json
   • deployed automatically via heroku/nodejs buildpack
2. React UI: react-ui/package.json
   • generated by create-react-app
   • deployed via build script in the Node server's ./package.json
   • module cache configured by cacheDirectories

Includes a minimal Node Cluster implementation to parallelize the single-threaded Node process across the available CPU cores.

Demo

Demo deployment: example API call from the React UI is fetched with a relative URL that is served by an Express handler in the Node server.

Deploy to Server

git clone https://github.com/AnkitVashist11/hackerNewsApp.git
cd hackerNews/
npm install
npm run start

This deployment will automatically:

• detect Node buildpack
• build the app with
  • npm install for the Node server
  • npm run start for Building using Webpack & Deploying using babel node
  • customize by adding API, proxy, or route handlers/redirectors 👓 More about deploying to Heroku.

Features In Current Version:

1. Upvote ui is implemented and real time updating realTime Upvote.

2. Hide functionality is correctly implemented.

3. Pagination is working.

4. Ensure Page 2 functionality does not break while refreshing it.

5. App state is maintained using Redux.

6. Component is divided properly and try using Atomic Design principle.

7. Incorporated ESlint check

8. App is deployed on Cloud platform (Google App Engine)

9. Incorporated build pipeline.

10. Once u hide news and refresh it, the hidden news should not appear again.

11. The UI should shrink when you minimize the window

12. Single Page Application with extensive caching, so application loads very fast post the first load.

########## Future Implementation in more time:

1. Following best coding practices.
2. Implement upvote functionality (add more upvotes don’t restrict on just one; The timeline chart should update real time as and when the upvote is clicked).
3. Writing Snapshot & Unit Tests for all components using Jest & Enzyme with >80% functional coverage.
4. Working on enhancing the performance.
5. Also, setting up CI using Jenkins and Deployment Using Docker.