1. Summary

This mobile first web application was developed for the project 119400A (Prof. Dr. Joachim Charzinski) at the Stuttgart Media University. In 2024, I did a complete overhaul to make it work with the present Angular, Angular Material, and ng2-charts versions.

The goal is providing the human resources a more detailed picture of the coding qualifications GitHub users. The reason for this is that more and more software development job applicants use GitHub to show their coding projects.

For example, which programming languages they most frequently code with, how many people follow them and how often they code in general. This may help them to easier and better evaluate the technical coding qualifications of the applicants.

2. Application

The application is explained in more detailed on the wiki page. The website can ba accessed locally by using the test username (test@gmail.com) and password (password).

3. File Structure

The code for this web application was developed, versioned, and managed using Git. A GitHub repository was used for storing the application code online. This is a quick overview of the files:

• dist: the compiled code/libraries meant for production
• node_modules: libraries and dependencies for packages, used by Node package manager
• src: files to build and develop the project (original source files), before being compiled into fewer files to dist/ directory
  • components: e. g. login and search
  • assets: e.g. logo, avatar picture
  • environments: environment for production
  • models: interfaces for the user, repository, and login-credentials
  • services: for making GitHub REST API calls and exams (hide and show certain elements)
  • pages: includes all of the application HTML pages
  • stylesheets: styling of the application
  • main.ts: bootstraps the application (it loads everything and controls the startup of the application)
  • index.thml: starting point of the application (JavaScript code for inserting reusable components, login functionality, working links due to different routing with Express)
• .gitignore: text file that tells Git which files or folders to ignore in a project
• angular.json: provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI
• package.json: provides metadata of the project as well as handles the dependency management with Node package manager
• proxy.conf.json: used for setting up proxy for API requests
• server.js: main configuration file for the Express application to handle actions such as the HTTP server, proxying API requests, routing, and serving of static files

4. Design Mockup

It was created with Figma based on the Concept. The link to the design can be found here: Figma GitHub User Dashboard

5. Technology Stack

A more detailed explanation can be found on the wiki page.

• Frontend: HTML, SCSS, TypeScript
• Frontend framework: Angular CLI version 9.0.5
• UI component library: Angular Material version 9.2.0
• Version control system: Git
• Git repository hosting: Github
• Data source: GitHub REST API v4
• Data visualization library: ng2-charts
• Deployment: Vercel;

6. Development and deployment instructions

A more detailed explanation can be found on the wiki page

• Development Server: Run ng serve for a local development server accessible at http://localhost:4040/. Changes to source files trigger automatic reloading.
• Build: Run ng build to create production-ready build artifacts stored in the dist/ directory. Use the --prod flag for optimized production builds.
• Production Deployment: After building, run node server.js to start the production server. Deployment can be automated using Vercel's continuous integration features.

7. Endpoints

A more detailed explanation can be found on the wiki page

• "/githubapi/": getting user, repos, and coding languages data from the GitHub API

8. Lessons Learned

A more detailed explanation can be found on the wiki page

• It was very insightful to conduct user interviews
• Designing a high fidel design mockup took to long with Figma (better use Balsamiq and spent more time on the development)
• Services for making HTTP requests to the GitHub API was most interesting to learn
• Angular Material reactive forms
• Angular GET-, PUT-, POST-requests with realtime Firebase
• Email/Password registration and login via Firebase authentication
• Protect routs with authentication guards
• Interceptors for checking authentication automatically for each request
• Deployment with Vercel

9. Potential Improvements

A more detailed explanation can be found on the wiki page

• Implement comparison of one GitHub user with others (e. g. with charts and tables)
• Create more and better visualizations to give even deeper insights using ng2-charts
• Implement search for specific coding language for all users (filters would be great)
• Setup database for registered users and connect it to the application
• Implement testing with e. g. Karma and Jasmine