This repository contains some things that show off the GitHub user search API and attempts to highlight the process I take when working on a project of any size. The live version of the main branch can be seen here.
To help reviewers get an understanding of the approach I've taken towards implementing this GitHub Search, I'll create GitHub issues to represent the various states the project will be as it is progresses towards completion. I'll also work out of a feature branch per issue, with it's own pull request to main. These issues will be grouped into milestones, with each milestone having it's own publicly facing temporary preview site.
- setup: create empty repository and document approach
- setup: create github issues to represent a 'real-world' approach to this exercise
- setup: scaffold a VueJS 3 app, set up tooling
- setup: https://vitest.dev/ with a passing test
- setup: request deployments via Netlify with passing builds only
- implement: search for users and see a paginated list of results
- implement: navigate through the next and previous pages of the paginated results
- implement: see the total count of search results
- implement: see notable information for each search result, such as the description, star/follower count, profile pictures, etc.
- implement: select a search result and be taken to the applicable page on github.com API
- implement: tailwindcss and make the pretties, components, composables
- stretch: TanStack Table for tabular pretties and making our lives easier for table-related things
- stretch: implement crypress for simple e2e testing
- stretch: implement Histoire for simple states of any ui elements
- stretch: implement Cloudflare Workers or Netlify Function to act as a simple proxy between front-end and GitHub API
- stretch: swap out vue for something else.. I've never worked with Svelte, so maybe let's try that
| Date | Time | Task | Description of Work |
|---|---|---|---|
| 08/01/2022 | 15m | N/A | Create repository and identify tasks in readme |
| 08/02/2022 | 1h | N/A | Create GitHub issues and milestones |
| 08/02/2022 | 1h | issue #1 - project/dx setup | Complete |
| 08/03/2022 | 1h | issue #2 - add vitest | Complete |
| 08/04/2022 | 30m | issue #3 - auto deploy pull requests to netlify | Completed auto deploying main and pull requests from Netlify via file configuration. May need to switch to GitHub Actions to prevent deployments when tests fail. |
| 08/04/2022 | 30m | issue #3 - auto deploy pull requests to netlify | Setup GitHub Action to run build and test - no luck on closer integration with Netlify to prevent failing test builds from deploying to demo previews. |
| 08/05/2022 | 5h | [issues 4 - 8] - GitHub Search API implementation | Not sure why I broke these out into 5 seperate issues; wound up closing them all with one pull request. |
| 08/06/2022 | 5h | issues 9 - Implement: Tailwind, Composables, Components | This was fun |
| 14h 15m |
| Milestone | Link | Description | Issues |
|---|---|---|---|
| First Milestone | Netlify Preview | This first deployment of our Vue project... this milestone does not incorporate GitHub Search functionality... it's just a simple way for us to prove out our initial setup is complete along with having a pull request build & release pipeline integrated with Netlify |
|
| Second Milestone | Netlify Preview | The second deployment has integration with the GitHub Search API - though it does not look very appealing. |
|
| Third Milestone | Netlify Preview | The third deployment looks pretty sweet actually, not too shabby. |
-
For issue #3 - I would have liked to integrate GitHub Actions with Netlify via webhooks and only trigger a deployment when the pull request's build, linting and tests pass. I wasn't able to find a way to do this with Netlify Preview Deployments while browsing their documentation. :( So for now, we're just running the GitHub Action to build and test (linting later?) and letting Netlify automated pull request deployments do their thing. Not ideal, but for a take home project it's good enough - and illustrates my desire to do the right thing.
-
For [issues 4 - 8] - I left a good amount of comments in the pull request but the main thing I wanted to call out here was the instructions requested showing follower/follows/star counts for each user retrieved - however the GitHub REST API response for this did not have these values. To get them I would have needed to n+3 called out to GitHub for this data (or allow the user to infer them via an explicit link-click in the UI to make a request to get the data). Had I used the GraphQL API I probably could have included this in the one and only query request, but was already down the path of REST API and didn't want to switch over.
- Not responsive
- There isn't any error handling around the requests to the GitHup API - sometimes things will break and a refresh of the page is required. =/
- If there are more than 10 requests in a minute, GitHub will return a
403"API rate limit exceeded for [your ip address]." - If you attempt to paginate beyond 1,000 records in the UI, GitHub will return a
422"Only the first 1000 search results are available"
- If there are more than 10 requests in a minute, GitHub will return a
- There's probably some pagination math bugs and some other unknowns - There is not a lot of unit tests nor did I have a lot of time to really try to break the UI