Git Product home page Git Product logo

emc-stash-widget's Introduction

EMC STASH WIDGET

[ REMINDER: Fork this repo before you begin to work on it! ]

Alt text

TRACKS

Badass - Do the front end AND the backend!

Frontend Web Developer - Front-end only steps ( server-side is already done )

Backend Plumber - Back-end only steps ( client-side is already done )

Badass Steps Example

1. BASIC HTML / CSS / JAVASCRIPT

  1. create an index.html file, have it display 'hello world' and run it ( double click )
  2. add angularjs script into the header of the index.html file ( see bower_components folder )
  3. create a javascript file in the js folder ( js/app.js ) and add that also into your header
  4. create an angular app and controller in js/app.js
  5. display a simple "hello world" from an angularjs scope
  6. add a css/main.css file and add it to your index.html header
  7. for fun, change the background color of the displayed page

2. BASIC NODEJS

  1. create a server.js file in the root of the project and run it with 'node server.js'
  2. log a message to the terminal
  3. add express and start a server
  4. add an api endpoint that responds with "hello world"
  5. add express static file middleware
  6. call "hello world" api in express, and call it from angularjs and display on screen

3. DISPLAY USER GIT ACTIVITY DATA

Option 1 - Use Mongo For Realz

  1. npm install git+https://github.com/EMC-UI/tally
  2. require it in server.js
  3. look at it's api
  4. create a REST endpoint for '/userStats' that return data from tally's userStats api
  5. call those apis in angularjs and display the data.

Option 2 - Just use mock data

  1. Look at the mock directory
  2. require those 2 mock files in your server.js
  3. create a REST endpoint for '/userStats' that return the userStats.json mock data.
  4. call those REST apis in angularjs and display the mock data.

Step 3 Continued - Display the data from Option 1 or 2

  1. Start to build out a nice display of the userStats data in html / css / angularjs
  2. loop over the data from the REST apis with ng-repeat
  3. display the user name
  4. display the number of projects and list of projects the user has contributed to.
  5. BONUS: see if you can display the percentage of all commits this user has contributed.

4. DISPLAY PROJECT GIT ACTIVITY DATA

  1. Add a project stats display, similar to user stats from step 3.
  2. build out the html / css / javascript to display project stats
  3. add some way for the user to switch the views between user stats and project stats
  4. bonus: cycle using angularjs's $interval between the 2 views automatically.

BONUS IDEAS

  • Display the repo stats.
  • Graph the data in some way.

emc-stash-widget's People

Contributors

dehru avatar zherring 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.