Hackernews React Graphql

Hacker News clone rewritten with universal JavaScript, using React and GraphQL.
Alternatives To Hackernews React Graphql
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Gatsby54,7373939292 days ago225July 25, 2023280mitJavaScript
The best React-based framework with performance, scalability and security built in.
Query36,43051,1736 hours ago491January 25, 202343mitTypeScript
🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
React Admin22,9322121542 days ago239July 21, 2023100mitTypeScript
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design
React Starter Kit22,10117a month ago23March 07, 20165mitTypeScript
The web's most popular Jamstack front-end template (boilerplate) for building web applications with React
9 hours ago72agpl-3.0TypeScript
Hey is a decentralized and permissionless social media app built with Lens Protocol 🌿
8 hours ago633bsd-3-clausePython
Saleor Core: the high performance, composable, headless commerce API.
Redwood16,3431813 hours ago3,293September 24, 2022491mitTypeScript
The App Framework for Startups
Refine14,75048a day ago199March 14, 202331mitTypeScript
Build your React-based CRUD applications, without constraints. 🌟 Star to support our work!
Blitz13,060317a day ago482July 20, 2023216mitTypeScript
⚡️ The Missing Fullstack Toolkit for Next.js
Payload12,280583a day ago376July 31, 202389mitTypeScript
The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS.
Alternatives To Hackernews React Graphql
Select To Compare

Alternative Project Comparisons

Hacker News Clone React/GraphQL

GitHub Stars GitHub Followers GitHub Issues GitHub Pull Requests

This project is a clone of hacker news rewritten with universal JavaScript, using React and GraphQL. It is intended to be an example or boilerplate to help you structure your projects using production-ready technologies.

Hacker News Clone Demo

Live Demo



  • React - (UI Framework)

  • GraphQL - (Web Data API)

  • Apollo - (GraphQL Client/Server)

  • Next - (Routing, SSR, Hot Module Reloading, Code Splitting, Build tool uses Webpack)

  • TypeScript - (Static Types)

  • Webpack - (Module Bundler)

  • PostCSS - (CSS Processing)

  • Node.js - (Web Server)

  • Express - (Web App Server)

  • Passport - (Authentication)

  • ESLint - (Coding Best Practices/Code Highlighting)

  • Jest - (Tests)

  • Docker - (Container Deployment)

  • Optional - Yarn or Pnpm Package Manager - (Better Dependencies)


Front End

  • Declarative UI - (react)
  • Static Typing (typescript)
  • GraphQL Fragment Colocation - (@apollo/client)
  • Prefetch Page Assets - (next)


  • Universal JS - (node & express)
  • Declarative GraphQL Schema - (apollo-server)
  • GraphQL Query Batching - (apollo-server-express)
  • GraphQL Stored Queries - (apollo-server-express)
  • Easy GraphiQL Include - (apollo-server-express)
  • Local Authentication Strategy - (passport)
  • Server Side Rendering - (next)
  • Code Splitting - (next)
  • Build to Static Website - (next)
  • Container Based Runtime - (docker)


  • Hot Module Reloading - (next)
  • Snapshot Testing - (jest)
  • GraphQL Playground - (apollo-server-express)
  • Faster Package Install - (pnpm/yarn)
  • JS/TS Best Practices - (eslint)

Architecture Overview

Hacker News Clone Architecture Overview

server.ts is the entry point. It uses Express and passes requests to Next. Next SSR renders the pages using getServerSideProps() hook from Apollo helper. Therefore the app makes GraphQL requests on the client or server.

When the client loads the page it preloads next pages code from any <Link href="/">. When the client navigates to the next page it only needs to make one GraphQL query to render. Great!

See more: Next.js, Apollo GraphQL Client

GraphQL: GraphQL-Tools by Apollo or GraphQL docs

Directory Structure

Each web page has a React component in pages. Server code is in server. Shared code that runs on client or server is in src. Do not import from server or pages in src to avoid running code in the wrong environment.

The project root contains config files such as TypeScript, Babel, ESLint, Docker, Flow, NPM, Yarn, Git.

How To Start

One Click Download & Run

You can download and run the repo with one command to rule them all:

git clone https://github.com/clintonwoo/hackernews-react-graphql.git && cd hackernews-react-graphql && npm install && npm start


Running the app in dev mode is fully featured including hot module reloading:

npm install

npm start

To run in production mode:

npm run build:prod && npm run start:prod


The project runs out of the box with default settings (/src/config.ts). You can include a .env file in your project root to configure settings (this is the 'dotenv' npm package). The .env file is included in .gitignore.

How To Test


npm test

This project uses Jest and can do snapshot testing of React components. Whenever a component is changed, please update the snapshots using npm test -- -u or npx jest --updateSnapshot.

How To Build For Deployment

npm run build:prod: NextJS app with entry point server.ts that uses Node.js/Express. Uses TypeScript compiler to transpile project src to build.


npm run build-docker Docker Container: Builds a docker container using Dockerfile.

Static Website (Optional)

NextJS lets us make a powerful static website but you need to consider if you need server side rendering.

npm run build-static-website: Builds static website to /build/static. Use a static web server eg. NGINX/Github Pages.


Pull requests are welcome. File an issue for ideas, conversation or feedback.


After you ★Star this project, follow @ClintonDAnnolfo on Twitter.

Popular Graphql Projects
Popular Reactjs Projects
Popular Application Programming Interfaces Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Hacker News
Universal Javascript