Skip to content

Latest commit

 

History

History
108 lines (80 loc) · 6.09 KB

README.md

File metadata and controls

108 lines (80 loc) · 6.09 KB
Raw

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

  • 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.