EMC STASH WIDGET

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

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.