Skip to content

Latest commit

 

History

History
51 lines (44 loc) · 3.31 KB

README.md

File metadata and controls

51 lines (44 loc) · 3.31 KB
Raw

Github-exploRepo

Built in Angular1 and Node. Front-end app consuming Github API. Check it out at http://gabrielle-ong.com/github-exploRepo/

Plan:

Build a repo tracker by keywords/author. Would have been useful in my role as a coding bootcamp teaching assistant, to track students and all their repos OR keep track of homework by a given repo name.

Assumption:

Return repo watchers instead of 'followers' as given in the task. Users have followers whereas repos have watchers/subscribers.

Commit History + Behind the scenes thought process

  1. Setup Github
  2. Basic skeleton + styling
  • I like to make my apps look somewhat decent at the start since I'm going to look at it for the next X hours anyway. Sketched out wireframes and based it off there.
  1. Instant search working
    • on input change, send an ajax call to github search API
    • output result repo names in the view.
  2. 2nd ajax call to get repo details (except languages, have to make a 3rd call)
  3. Removed instant search -because each letter typed would send an ajax call which is not optimal (also Github doesn't allow that many calls)
    • added form so that I can search on enter keypress
  4. Refactored Ajax
    • realized I could get all the repo details (except language) in the 1st call so refactored to 2 ajax calls.
  5. Language graph, click to expand details
    • Error Handling: If no search term entered, no repos found etc
    • Graph to show languages. Tried a few chart libraries but most display the data only on hover (not mobile-friendly). Settled on n3-piechart.
    • got ng-click ng-show actions to work but they applied to all ng-repeat elements (eg on click, all details expand and all have the same language chart)
  6. MVP!!
    • resolved: ng-cick & ng-show apply only on the element clicked by passing $index in the function and $scope.results[index].something
    • error handling for language
    • Added search by author functionality + error handling
  7. Added this readme + prevent resizing on mobile

Post MVP Bugs to fix (feedback from testers aka friends)

[x] previous results show if new search term doesn't yield results
[X] limit languages to 4, else text will overrun the doughnut chart
[X] github links should open in new tab
[X] prevent users from scaling in mobile
[X] cue ('Top X results') when results appear. Else it's not intuitive to scroll down.

Limitations

  • github API returns 30 results. If more results wanted, have to do traversing with pagination https://developer.github.com/guides/traversing-with-pagination/
  • currently its the same 4 colors for the language chart, would be better if each language had a specific color for people to recognize (but will have to hardcode matching languages to a color)

Future Extensions:

  • Order by (date, no of watchers)
  • Filter (language)

Things I want improve at:

  • Testing. I've tried Capybera for Ruby but I'm not familiar with testing for Node front end. So I decided to shelve it to my 'things to learn' list after I complete this assignment. Will explore Selenium/Zombie/PhantomJS/CasperJS
  • CSS libraries for Angular - Usually I use materialize/bootstrap but I realized that angular materialize is slightly different from materialize. Didnt have time figure out the differences so I decided to do my own CSS :P Quite enjoyed it after using libraries for my past projects!