Github Search

---

Overview

This is my submission for a coding challenge, which required re-implementing a portion of GitHub's Search feature.

Requirements included:

• User is able to search for and see a paginated list of results
• User can navigate through next and previous pages in paginated results
• User can see total count of results returned
• User can see notable information, including description, star/follower count, profile pictures, etc.
• User can select a search result and be taken to the applicable page on GitHub

---

Table of Contents

• Features
• Technologies
• Challenges
• Installation
• Issues
• Ideas for improvements
• Credits

---

Features

• Responsive UI
• Search by username or developer name
• Pagination with reusable usePagination hook
• Tooltips with reusable useHover hook
• Accessible color scheme

---

Technologies used

• React
• GraphQL

New tools and concepts explored

• GraphQL
• Pagination
• Attempting accessible color scheming

---

Challenges

• Learning to properly structure a GraphQL query took some time, but I'm glad I did it. I originally fetched from the regular REST endpoints, but what I was finding took separate queries to return bulk users and then their specific info. Although I was convinced there had to be a better way using REST, the GraphQL API made it a lot simpler.
• Manually implementing pagination took some time, but I felt, as it was my first time paginating search results, I would understand better if I went through the process without using a library. In the future, I may use a library to speed things up.
• Deploying took a particularly long time. I have deployed apps before on AWS and on Netlify, and the latter worked immediately when I'd done it. This time, I missed in the logs that CI=true, and therefore, warnings were being treated as errors causing the build to fail. The fix was quick as can be, but it took a while for me to diagnose.

---

Running the app

Visit on Netlify

The app is currently hosted on Netlify and can be found here.

Local Installation

1. Clone the repository with $ git clone https://github.com/carrollsa/github-search
2. cd into new folder and install dependencies with npm install
3. Obtain a GitHub API access token
4. Add the API key as an environment variable with the key GQL_API_KEY to have full access to the API and avoid rate-limiting
5. Run project with npm run start
6. Visit locally at http://localhost:3000/

---

Known Issues

• Double render of Pagination component
  • I wanted to display the pagination component both above and below the results but did not want to perform the operations within it twice. I experimented with trying to memoize it but could not find a way to not duplicate the rendering operation. I have not used Redux, but I believe it or some other sort of state-management tool could be used to aid in this.
• There is a point between the fetch and the rendering of <Posts /> where the users prop passed in is undefined. I only knew of it from PropTypes, but I did not have time to figure out when <Posts /> was trying to render without the appropriate props. This error did not cause any issues with the current application, but I would like to address it in the future.
• It's small, but the color on the book icon in the rendering does not show up as intended. This appeared when I added flex-shrink: 0 to solve an issue with the book icon always shrinking. I'm not sure why this made it so there could be no coloring, but I preferred the black icon to the tiny book.
• Styling for mobile needs work -- particularly search bar.

---

Ideas for Improvements

• Add a posts per page selection
• Add a dark theme
  • This one is fairly simple, and I've implemented it before, but I was hesitant to try to do so here, as I would want to make sure the dark color scheme retained the same contrast required to meet accessibility standards. Admittedly, I am new to this, and I am not certain I met them exactly.
• Add simple animations for hovering over pages, cards, etc.
• Explore further levels of accessibility including greater consideration for screen readers
• Explore fetching further pages from the GraphQL query
  • The current query returns the maximum 100 results allowed by Github. I did look into this a bit and structured the query so that it returns page info. This would allow storing of the hasNextPage and endCursor values, the latter of which which can be used within a further query to fetch the next 100 results. I think I could get this working without too much trouble, but I felt it was outside the scope of this project.
• Implement thorough automated testing
  • I had wanted to explore this, but time got the better of me. I have a project written in Java that includes thorough unit testing with JUnit, but I have not yet done frontend testing. I would really like to explore this idea soon.

---

Credits

• Tyler McGinnis from UI.dev for teaching me React and providing some framework for a few of these components.
• FreeCodeCamp and Traversy Media for aiding me in understanding implementing paginated frontend results.