Facebook GitHub repo viewer. The app has a sidebar navigation with repos sorted by stargazers. Clicking on one of them fetches that repo data and populates the main view with its details and a list of project contributors.
- musing-joliot-fef599.netlify.app - Jest/Enzyme tests with coverage + build + export into a static app + deploy on Netlify & AWS Lambda via Netlify Functions.
I tried to use the new GitHub GraphQL API but hit the following issues:
- list-org-repos-ordered-by-stargazers-not-working: falling back to client side sorting for now.
- contributors-of-a-repository: no other choice but to use GitHub REST API to get repo contributors for now.
Hence I'm using GraphQL only to get the sidebar repo list to select only the few fields I need there. Since GitHub GraphQL API imposes a limit of 100 repos with a single query, I'm using a little redux saga to get them all via paging. The API also requires authentication so I'm proxying the API call via a Netlify function to avoid including GitHub API token in the web client build.
- Next.js - React framework for static and server-rendered applications.
- Redux - Predictable state container for JavaScript apps.
- redux-saga - An alternative side effect model for Redux apps.
- redux-api-middleware - Redux middleware for calling an API.
- Tailwind CSS - Utility-First CSS Framework.
- Ant Design of React - React UI library.
- Netlify Functions - AWS Lambda based functions.
Create .env with your GITHUB_GRAPHQL_API_TOKEN and then:
npm install
npm run devThis will start the app at http://localhost:4000/ and serve the lambda at http://localhost:9000/. The dev server uses http-proxy-middleware so the lambda is simply available at /.netlify/functions, same as in prod.
npm test npm run buildExports the project into a static app:
npm run exportMIT