github repo search, build in Angular 1 + Node
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
app.js
congruent_outline.png
index.html
octocat.jpg
package.json
pie-chart.min.js
style.css

README.md

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!