Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/clintonwoo/hackernews-react-graphql
Hacker News clone rewritten with universal JavaScript, using React and GraphQL.
https://github.com/clintonwoo/hackernews-react-graphql
apollo express graphql hacker-news hn javascript js nextjs node react
Last synced: about 1 month ago
JSON representation
Hacker News clone rewritten with universal JavaScript, using React and GraphQL.
- Host: GitHub
- URL: https://github.com/clintonwoo/hackernews-react-graphql
- Owner: clintonwoo
- License: mit
- Created: 2017-08-28T01:47:14.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T03:48:54.000Z (over 1 year ago)
- Last Synced: 2024-04-14T10:55:02.613Z (5 months ago)
- Topics: apollo, express, graphql, hacker-news, hn, javascript, js, nextjs, node, react
- Language: TypeScript
- Homepage:
- Size: 10.2 MB
- Stars: 4,421
- Watchers: 79
- Forks: 552
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - hackernews-react-graphql
README
Hacker News Clone React/GraphQL
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.
## Overview
### Featuring
- 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)
### Benefits
**Front End**
- Declarative UI - (`react`)
- Static Typing (`typescript`)
- GraphQL Fragment Colocation - (`@apollo/client`)
- Prefetch Page Assets - (`next`)
**Server**
- 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`)
**Dev/Test**
- Hot Module Reloading - (`next`)
- Snapshot Testing - (`jest`)
- GraphQL Playground - (`apollo-server-express`)
- Faster Package Install - (`pnpm`/`yarn`)
- JS/TS Best Practices - (`eslint`)
### 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 ``. 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`
### Setup
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`
### Configuration
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
### Jest
`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.
OR
`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.
## Contributing
Pull requests are welcome. File an issue for ideas, conversation or feedback.
### Community
After you ★Star this project, follow [@ClintonDAnnolfo](https://twitter.com/clintondannolfo) on Twitter.