Giter Club home page Giter Club logo

github-viewer's Introduction

GitHub Viewer

http://www.githubviewer.org/

An example application that connects to the GitHub REST API and displays users from organizations. Users can then be clicked to retrieve their repositories. Finally, a repository can be clicked and recent commits displayed.

Running locally

To run locally you will need to install Node.js and grunt-bbb. Once the dependencies are installed, simply clone the repository and run the server.

# Clone the repository.
git clone git://github.com/tbranyen/github-viewer.git

# Change directory into it.
cd github-viewer

# Run the server.
bbb server

Stack

This is an entirely client-side application, meaning aside from the configured HTTP server and the remote API, there is no server processing. All logic is isolated to JavaScript.

Backbone Boilerplate

backbone-boilerplate

The foundation of the entire application structure and the deployment assets. Along with grunt-bbb the application can be tested locally and built for production with the same tool.

Some custom tweaks needed to be added for this to work:

  • Added in an assets/vendor directory.
  • production-fixes.css file to map the Twitter Bootstrap images correctly.

Backbone LayoutManager

backbone.layoutmanager

Used for the general layout and View arrangement. Is also used to facilitate re-rendering and collection lists. One single layout is created throughout the lifespan of the application and instead the individual regions are updated.

Backbone CollectionCache

backbone.collectioncache.js

This is a work-in-progress Backbone plugin to provide a better caching mechanism for Collections. It's used within this application to provide client-side caching in both sessionStorage (persist refresh) and inside memory for faster lookups.

Twitter Bootstrap

bootstrap

Made the design look significantly better than the original. Responsible for the entire UI layer.

Deployment

This is deployed on a Linode Arch Linux server that runs Nginx. It is served locally and updated via a git pull and bbb release combination.

The configuration looks like:

server {
  listen 80;
  server_name githubviewer.org;

  location / {
    root /github-viewer/;

    try_files $uri /index.html;
  }

  location /app {
    alias /github-viewer/dist/release/;
  }

  location /assets/js/libs {
    alias /github-viewer/dist/release/;
  }

  location /assets/css {
    alias /github-viewer/dist/release/;
  }
}

Credits

@tbranyen

github-viewer's People

Contributors

rmurphey avatar sebdeckers avatar tbranyen avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.