https://github.com/patrick-emmanuel/github-browser

An app that retrieves a GitHub's user/organization repositories and their branches.
https://github.com/patrick-emmanuel/github-browser

Last synced: about 1 year ago
JSON representation

An app that retrieves a GitHub's user/organization repositories and their branches.

• Host: GitHub
• URL: https://github.com/patrick-emmanuel/github-browser
• Owner: patrick-emmanuel
• Created: 2019-04-27T11:01:56.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2021-07-28T04:54:06.000Z (almost 5 years ago)
• Last Synced: 2025-02-23T17:30:19.640Z (over 1 year ago)
• Language: JavaScript
• Homepage: http://patrick-ghusers.herokuapp.com
• Size: 4.2 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 27
• Metadata Files:
  • Readme: README.html

Awesome Lists containing this project

README

          

    

    

        

        GitHub Browser

        

        

        

        

        

.task-list-item { list-style-type: none; } .task-list-item-checkbox { margin-left: -20px; vertical-align: middle; }

        

            body {

                font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', 'Ubuntu', 'Droid Sans', sans-serif;

                font-size: 14px;

                line-height: 1.6;

            }

        

        

        

    

    

        
#GitHub Browser

Getting started

    $ git clone https://github.com/the-bionic/github-browser.git

    $ cd github-browser

    $ npm install

    $ npm start



Design Decisions

No Router

I did not use a router to build the app because all the magic happens on a single page. It is in the form of an accordion,

such that, the user does not need to be taken to a different page to see the results of her actions. This decisions was

made intentionally to remove the overhead UX problem of navigating to an extra page when it could be display with a better

visual hierachy on the same page.

Responsiveness

Responsiveness is mobile-first. The styles are implemented mobile-first and subsequent media queries are used to

tailor it to a larger screen. That way, the breakpoints 300px - 1920px are well-covered.

No submit button

API requests are debounced while the user is typing their keywords. That way, an extra click is not required by the user to perforn a search action.

Deployment

The app was deployed to heroku: here and can interacted with there.

End to End tests.

End-to-end tests was implemented with puppeteer.

Extra Thoughts

The tests produce warnings when ran. It is a known issue in React: hereissues/14769 and a fix is in alpha and has not been released yet. It is due to the tests interaction/updating the dom.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.


Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.


You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.


See the section about running tests for more information.