{"id":13545752,"url":"https://github.com/clintonwoo/hackernews-react-graphql","last_synced_at":"2025-10-04T20:13:02.624Z","repository":{"id":24565189,"uuid":"101593337","full_name":"clintonwoo/hackernews-react-graphql","owner":"clintonwoo","description":"Hacker News clone rewritten with universal JavaScript, using React and GraphQL.","archived":false,"fork":false,"pushed_at":"2023-03-04T03:48:54.000Z","size":10716,"stargazers_count":4431,"open_issues_count":27,"forks_count":557,"subscribers_count":76,"default_branch":"master","last_synced_at":"2025-05-21T21:05:33.110Z","etag":null,"topics":["apollo","express","graphql","hacker-news","hn","javascript","js","nextjs","node","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clintonwoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-08-28T01:47:14.000Z","updated_at":"2025-05-16T13:44:01.000Z","dependencies_parsed_at":"2023-02-18T13:46:17.636Z","dependency_job_id":null,"html_url":"https://github.com/clintonwoo/hackernews-react-graphql","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/clintonwoo/hackernews-react-graphql","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clintonwoo%2Fhackernews-react-graphql","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clintonwoo%2Fhackernews-react-graphql/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clintonwoo%2Fhackernews-react-graphql/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clintonwoo%2Fhackernews-react-graphql/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clintonwoo","download_url":"https://codeload.github.com/clintonwoo/hackernews-react-graphql/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clintonwoo%2Fhackernews-react-graphql/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278366672,"owners_count":25975097,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo","express","graphql","hacker-news","hn","javascript","js","nextjs","node","react"],"created_at":"2024-08-01T11:01:14.181Z","updated_at":"2025-10-04T20:13:02.596Z","avatar_url":"https://github.com/clintonwoo.png","language":"TypeScript","readme":"\u003ch2 align=\"center\"\u003eHacker News Clone React/GraphQL\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/clintonwoo/hackernews-react-graphql/stargazers\"\u003e\u003cimg alt=\"GitHub Stars\" src=\"https://img.shields.io/github/stars/clintonwoo/hackernews-react-graphql.svg?style=social\u0026label=Star\"\u003e\u003c/a\u003e \n\u003ca href=\"https://github.com/clintonwoo/\"\u003e\u003cimg alt=\"GitHub Followers\" src=\"https://img.shields.io/github/followers/clintonwoo.svg?style=social\u0026label=Follow\"\u003e\u003c/a\u003e \n\u003ca href=\"https://github.com/clintonwoo/hackernews-react-graphql/issues\"\u003e\u003cimg alt=\"GitHub Issues\" src=\"https://img.shields.io/github/issues/clintonwoo/hackernews-react-graphql.svg\"\u003e\u003c/a\u003e \n\u003ca href=\"https://github.com/clintonwoo/hackernews-react-graphql/pulls\"\u003e\u003cimg alt=\"GitHub Pull Requests\" src=\"https://img.shields.io/github/issues-pr-raw/clintonwoo/hackernews-react-graphql.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nThis 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.\n\n\u003cp align=\"center\" margin-bottom=\"0\"\u003e\n  \u003ca href=\"http://www.hnclone.win\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Hacker News Clone Demo\" width=\"auto\" height=\"auto\" src=\"docs/HN-Demo.jpg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://www.hnclone.win\"\u003eLive Demo\u003c/a\u003e\n\u003c/p\u003e\n\n## Overview\n\n### Featuring\n\n- React - (UI Framework)\n- GraphQL - (Web Data API)\n- Apollo - (GraphQL Client/Server)\n- Next - (Routing, SSR, Hot Module Reloading, Code Splitting, Build tool uses Webpack)\n- TypeScript - (Static Types)\n- Webpack - (Module Bundler)\n- PostCSS - (CSS Processing)\n- Node.js - (Web Server)\n- Express - (Web App Server)\n- Passport - (Authentication)\n- ESLint - (Coding Best Practices/Code Highlighting)\n- Jest - (Tests)\n- Docker - (Container Deployment)\n\n- Optional - Yarn or Pnpm Package Manager - (Better Dependencies)\n\n### Benefits\n\n**Front End**\n\n- Declarative UI - (`react`)\n- Static Typing (`typescript`)\n- GraphQL Fragment Colocation - (`@apollo/client`)\n- Prefetch Page Assets - (`next`)\n\n**Server**\n\n- Universal JS - (`node` \u0026 `express`)\n- Declarative GraphQL Schema - (`apollo-server`)\n- GraphQL Query Batching - (`apollo-server-express`)\n- GraphQL Stored Queries - (`apollo-server-express`)\n- Easy GraphiQL Include - (`apollo-server-express`)\n- Local Authentication Strategy - (`passport`)\n- Server Side Rendering - (`next`)\n- Code Splitting - (`next`)\n- Build to Static Website - (`next`)\n- Container Based Runtime - (`docker`)\n\n**Dev/Test**\n\n- Hot Module Reloading - (`next`)\n- Snapshot Testing - (`jest`)\n- GraphQL Playground - (`apollo-server-express`)\n- Faster Package Install - (`pnpm`/`yarn`)\n- JS/TS Best Practices - (`eslint`)\n\n### Architecture Overview\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Hacker News Clone Architecture Overview\" width=\"auto\" height=\"400px\" src=\"docs/HN-Clone-Architecture-overview.png\"\u003e\n\u003c/p\u003e\n\n`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.\n\nWhen the client loads the page it preloads next pages code from any `\u003cLink href=\"/\"\u003e`. When the client navigates to the next page it only needs to make one GraphQL query to render. _Great!_\n\nSee more: \u003ca href=\"https://github.com/zeit/next.js/\"\u003eNext.js\u003c/a\u003e,\n\u003ca href=\"http://dev.apollodata.com/react/\"\u003eApollo GraphQL Client\u003c/a\u003e\n\nGraphQL: \u003ca href=\"http://dev.apollodata.com/tools/graphql-tools/index.html\"\u003eGraphQL-Tools by Apollo\u003c/a\u003e\nor\n\u003ca href=\"http://graphql.org/graphql-js/\"\u003eGraphQL docs\u003c/a\u003e\n\n### Directory Structure\n\nEach 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.\n\nThe project root contains config files such as TypeScript, Babel, ESLint, Docker, Flow, NPM, Yarn, Git.\n\n## How To Start\n\n### One Click Download \u0026 Run\n\nYou can download and run the repo with one command to rule them all:\n\n`git clone https://github.com/clintonwoo/hackernews-react-graphql.git \u0026\u0026 cd hackernews-react-graphql \u0026\u0026 npm install \u0026\u0026 npm start`\n\n### Setup\n\nRunning the app in dev mode is fully featured including _hot module reloading_:\n\n`npm install`\n\n`npm start`\n\nTo run in production mode:\n\n`npm run build:prod \u0026\u0026 npm run start:prod`\n\n### Configuration\n\nThe 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_.\n\n## How To Test\n\n### Jest\n\n`npm test`\n\nThis 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`.\n\n## How To Build For Deployment\n\n`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.\n\nOR\n\n`npm run build-docker`\nDocker Container: Builds a docker container using Dockerfile.\n\n#### Static Website (Optional)\n\nNextJS lets us make a powerful static website but you need to consider if you need server side rendering.\n\n`npm run build-static-website`: Builds static website to `/build/static`. Use a static web server _eg._ NGINX/Github Pages.\n\n## Contributing\n\nPull requests are welcome. File an issue for ideas, conversation or feedback.\n\n### Community\n\nAfter you ★Star this project, follow [@ClintonDAnnolfo](https://twitter.com/clintondannolfo) on Twitter.\n","funding_links":[],"categories":["TypeScript","JavaScript","Uncategorized","Demo React Apps [🔝](#readme)"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclintonwoo%2Fhackernews-react-graphql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclintonwoo%2Fhackernews-react-graphql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclintonwoo%2Fhackernews-react-graphql/lists"}