{"id":13718449,"url":"https://github.com/topheman/nextjs-github-browser","last_synced_at":"2025-05-12T23:31:25.466Z","repository":{"id":43813029,"uuid":"364663872","full_name":"topheman/nextjs-github-browser","owner":"topheman","description":"Browse github through a website made in NextJS","archived":false,"fork":false,"pushed_at":"2022-08-02T21:45:38.000Z","size":4054,"stargazers_count":20,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-14T07:38:26.925Z","etag":null,"topics":["apollo","graphql","nextjs","react","typescript"],"latest_commit_sha":null,"homepage":"https://nextjs-github-browser.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/topheman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-05T18:00:05.000Z","updated_at":"2024-08-06T21:04:25.000Z","dependencies_parsed_at":"2022-08-23T11:20:45.548Z","dependency_job_id":null,"html_url":"https://github.com/topheman/nextjs-github-browser","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/topheman%2Fnextjs-github-browser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/topheman%2Fnextjs-github-browser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/topheman%2Fnextjs-github-browser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/topheman%2Fnextjs-github-browser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/topheman","download_url":"https://codeload.github.com/topheman/nextjs-github-browser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225158632,"owners_count":17430031,"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","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","graphql","nextjs","react","typescript"],"created_at":"2024-08-03T01:00:27.717Z","updated_at":"2024-11-18T10:24:39.561Z","avatar_url":"https://github.com/topheman.png","language":"TypeScript","funding_links":[],"categories":["**Awesome Codebases** [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)"],"sub_categories":[],"readme":"# nextjs-github-browser\n\n[![ci](https://github.com/topheman/nextjs-github-browser/actions/workflows/ci.yml/badge.svg)](https://github.com/topheman/nextjs-github-browser/actions/workflows/ci.yml)\n[![e2e](https://github.com/topheman/nextjs-github-browser/actions/workflows/e2e.yml/badge.svg)](https://github.com/topheman/nextjs-github-browser/actions/workflows/e2e.yml)\n[![nextjs-github-browser](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/6ihjj6\u0026style=flat\u0026logo=cypress)](https://dashboard.cypress.io/projects/6ihjj6/runs)\n[![Storybook](https://img.shields.io/badge/storybook-online-ff4785.svg)](https://nextjs-github-browser.vercel.app/explore/storybook/index.html)\n[![Demo](https://img.shields.io/badge/demo-online-blue.svg)](http://nextjs-github-browser.vercel.app/)\n\nThis project is a reimplementation of the main features of the [github.com](https://github.com) website in **NextJS**.\n\n- Checkout the **demo** on **[nextjs-github-browser.vercel.app](https://nextjs-github-browser.vercel.app)**\n- Browse the [online storybook](https://nextjs-github-browser.vercel.app/explore/storybook/index.html)\n- Browse the [Cypress Dashboard](https://dashboard.cypress.io/projects/6ihjj6) (with the reports of the e2e tests run on CI)\n\n## Prerequisites\n\n- Nodejs \u003e=14\n- npm \u003e=6\n\n## Install\n\n```sh\ngit clone https://github.com/topheman/nextjs-github-browser.git\ncd nextjs-github-browser\nnpm install\n```\n\n## Setup\n\nThis project uses the [Github GraphQL Apis](https://docs.github.com/en/graphql). You will need to [generate a personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token).\n\n- Create a `.env.local` file\n- Add `GRAPHQL_API_TOKEN=***` to the file with your own token\n\n\u003ca href=\"./public/create-a-github-token.png\" title=\"Create a token\"\u003e\u003cimg src=\"./public/create-a-github-token.png\" alt=\"Create a token\" width=\"200\"\u003e\u003c/a\u003e\n\n## Development\n\n```shell\nnpm run dev\n```\n\nThis will start a development server on [http://localhost:3000](http://localhost:3000).\n\n### Mocking\n\nThis project is shipped with built-in mocking for the graphql layer. It works for both client-side and server-side rendering.\n\n- `MOCKS_MODE=record npm run dev` : will record any graphql request into `.tmp/mocks`\n- `MOCKS_MODE=replay npm run dev` : will replay the mocks if available (if not, will let the request through)\n\nYou can use `MOCKS_MODE` with `record` / `replay` also on `npm start`.\n\nYou can override the target of the folder where the mocks are recorded by using `MOCKS_TARGET=./tmp/my/specific/folder` for example.\n\n## Storybook\n\n```sh\nnpm run storybook\n```\n\nThis will start the storybook server on [http://localhost:6006](http://localhost:6006).\n\n## Build\n\n```sh\nnpm run build\n```\n\nThis will build the a production version of the website in the `.next` folder.\n\nFor production, we want to expose the storybook, to do that:\n\n```sh\nnpm run build:all\n```\n\n## Production\n\nFirst, you need to build your project running `npm run build:all`, then:\n\n```shell\nnpm start\n```\n\nThis will launch a production server on [http://localhost:3000](http://localhost:3000).\n\nYou can change the port passing a `PORT` env var like: `PORT=8080 npm start`.\n\n## Test\n\n### Unit\n\nThe project contains unit tests run with jest (the react part is relying on [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/))\n\n```sh\nnpm run test\n```\n\n### Cypress\n\nTo run the cypress end-to-end test, launch a server in a terminal (in [dev mode](#development) or [production mode](#production)).\n\nThen start the cypress test either:\n\n- In gui mode: `npm run cy:open`\n- In headless mode: `npm run cy:run`\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://raw.githubusercontent.com/topheman/nextjs-github-browser/master/public/cypress-video-user.repositories.mp4\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/topheman/nextjs-github-browser/master/public/cypress-thumbnail-user.repositories.png\" width=\"300\" /\u003e\u003c/a\u003e\u003c/p\u003e\n\n## Linter\n\nPlease checkout [eslintrc.js](./.eslintrc.js) for the linting configuration:\n\n- TypeScript\n- Prettier\n- Next\n- React\n- Tailwind\n- Cypress\n- ...\n\n## Continuous Integration\n\nEach `git push` / `PR` triggers a test suite on [github/actions](https://github.com/topheman/nextjs-github-browser/actions). The following will be ran:\n\n- linting\n- type checking\n- unit tests\n- end to end test with cypress\n\nThe end to end test sessions are recorded, you can check them [here](https://dashboard.cypress.io/projects/6ihjj6/runs).\n\n## FAQ\n\n### GraphQL Schema in TypeScript\n\nThanks to [@octokit/graphql-schema](https://github.com/octokit/graphql-schema) and [@graphql-codegen/cli](https://www.graphql-code-generator.com), we can generate type definitions for the GraphQL queries we use.\n\nThe queries used in this project are in [src/graphql](./src/graphql).\n\nThe generated types and utils are in [src/generated/graphql.ts](./src/generated/graphql.ts).\n\nWhen you modify/add a query/fragment, run `npm run graphql-codegen` to generate the types and utils.\n\n- See [this commit for the setup](https://github.com/topheman/nextjs-github-browser/commit/4921b6b026fc34b7daeecce77858c035d619ec52)\n- Thanks for the following resources:\n  - https://benlimmer.com/2020/05/16/adding-typescript-types-github-graphql-api/\n  - https://blog.logrocket.com/build-a-graphql-react-app-with-typescript/\n\n### Http Caching\n\nThe `/api/github/graphql` handler is available by `POST` requests to both client and server (because it's needed for both SSR and some use cases where we call directly graphql from the client).\n\nYou have the following use cases:\n\n1. full page render: browser -\u003e nextjs(server) -\u003e getServerSideProps -\u003e `/api/github/graphql` -\u003e github graphql api\n   - GET request issued by browser\n2. partial page render: browser(onRouteChange) -\u003e nextjs(getServerSideProps) -\u003e `/api/github/graphql` -\u003e github graphql api\n   - GET request issued by nextjs router\n3. direct call to graphql from client: browser(apollo) -\u003e `/api/github/graphql` -\u003e github graphql api\n   - POST request, cache is manage client side by Apollo\n\nI fixed the problematic of caching for the 2nd case by adding http header `Cache-Control: private, max-age=120, must-revalidate`.\n\nYou can activate it in local by using `npm run start:cache`.\n\nA better way would be to use some database like redis and store the payloads indexed by serialized graphql variables - this is a personal project 😉.\n\n## Resources\n\n- Setup apollo-client in NextJS: [src/libs/apollo-client.ts](./src/libs/apollo-client.ts) (links to resources in source code)\n  - [Doc Apollo](https://www.apollographql.com/docs/react/performance/server-side-rendering/)\n- [Github advanced search](https://github.com/search/advanced)\n- [useHooks(🐠)](https://usehooks.com)\n- [cypress-io/github-action](https://github.com/cypress-io/github-action)\n- github actions - [Building and testing Node.js](https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs)\n\nThis project is based on previous work:\n\n- ⚛️ [topheman/nextjs-movie-browser](https://github.com/topheman/nextjs-movie-browser)\n- ⚛️ [topheman/npm-registry-browser](https://github.com/topheman/npm-registry-browser)\n- ️⚛️ [topheman/react-fiber-experiments](https://github.com/topheman/react-fiber-experiments)\n- 📝 [Cypress.io advanced setup](http://dev.topheman.com/cypress-io-advanced-setup/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftopheman%2Fnextjs-github-browser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftopheman%2Fnextjs-github-browser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftopheman%2Fnextjs-github-browser/lists"}