Github + Stack + Twitter Profile Analyzer with Angular + Spring

A simple profile analyzer for developers. You can follow a thorough walkthrough through this application by visiting my series of blogposts starting from this.

Note - This README consists of only the implementation details for GitHub profile search. However, this project was chosen as my Semester V Project and hence, I've extended it to StackOverflow and Twitter profile searches to give a better scope. For implementation details and help on the extended components, please refer to the wiki page.

High Level Architecture

Screenshot GIF

Application when ran through my Github profile.

Prerequesits

• Angular-CLI installed. ( You can install it by running sudo npm install -g @angular/cli ).
• JDK (Java Development Kit)
• Node.js (npm)

Usage

1. Clone the repository using git clone (Or any other method i.e. using an IDE) and open the project folder, import the maven dependencies.

2. Enable Auto-import if you are in IntelliJ and if you are in Visual Studio Code, there is a handy plugin which I will state here. It will automatically build the application and import the maven dependencies.

3. Install front end dependencies for Angular by running npm install in the /client folder.

4. Register an application in Github, Stackexchange, and Twitter and obtain your credentials.

5. Start the front end server by running ng serve . Make sure you're in /client folder.

6. Create a package called config in com/springgithub/springgithub directory.

7. Create a Configuration class and fill out these data using the credentials you've obtained by registering your application in step 4.

package com.springgithub.springgithub.config;

public class Configuration {
   
   // Github
    public static final String GITHUB_CLIENT_ID = "";
    public static final String GITHUB_CLIENT_SECRET = "";
    public static final String GITHUB_TOKEN = "";
    
    //    Stack Overflow
    public static final String STACK_KEY = "";
    public static String SITE = "stackoverflow";
    
    //    Twitter
    public static final String TWITTER_CONSUMER_KEY = "";
    public static final String TWITTER_CONSUMER_SECRET = "";
    public static final String TWITTER_ACCESS_TOKEN = "";
    public static final String TWITTER_ACCESS_TOKEN_SECRET = "";
}

You must get a personal access token from github.

Note: This must be improved to fetch configurations from a cloud configuration store at runtime. Storing configurations within the codebase is a severe vulnerability.

8. Create a CacheConfig class and add this this bean configuration for server side caching.

package com.springgithub.springgithub.config;

import org.springframework.cache.CacheManager;
import org.springframework.cache.concurrent.ConcurrentMapCacheManager;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class CacheConfig {

    @Bean
    public CacheManager cacheManager() {
        return new ConcurrentMapCacheManager("" +
                "commits", "user");
    }

}

9. Change spring.data.mongodb.uri to a registered database URI in mLabs.

10. Run the backend Tomcat server from IntelliJ (Press Run, or mvn spring-boot:run in the console; to do this you must have maven downloaded and configured in your PATH. Otherwise, run SpringGithubApplication.java which is the main method of the application.)

11. Open the served front end at port 4200 (Default Angular port).

NOTE: An external MongoDB database is used for caching purposes in GitHub commits.

Acknowledgements

• Eclipse Software Foundation for their EGit adapter.
• Yusuke Yamamoto for his twitter-4j adapter.
• Sanjiv Singh for his stackoverflow-java-sdk library.
• Valor Software Foundation for their ng2-charts wrapper for Chart.js.
• InfoMediaLtd for their angular2-materialize wrapper for MaterializeCSS.
• In28Minutes for their Unit Testing (Based on JUnit and Mockito) blogpost.
• Oshervoe's book for a great deal of knowledge on Unit Testing.
• Lukasz Goslawski for his ng-4-twitter-timeline NPM module.