Skip to content
Tools to understand and welcome people into a contributor community
JavaScript HTML
Branch: main
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.

Community Toolbox

A platform dedicated to community growth and getting insights on organization-wide activities.

Code of Conduct first-timers-only-friendly Join the chat at visit here GitHub license GitHub stars Newcomers welcome

Table of Contents

  1. Project Overview
  2. Getting Started
  3. How to Use

Project Overview

The project structure of community toolbox is majorly divided into two groups,

  • /examples contains code responsible for front-end styles and related scripts,
  • /src contains the actual code for fetching data and showing it to the user.

As shown in the flowchart, /src inherits MVC like architecture. Here,

Fragment Contains
/models database related operations (Database layer)
/scripts main source file (community-toolbox.js)
/utils utility functions (Controller layer)
/UI user interface functions (View layer)


models/ corresponds to the Database Layer. It is responsible for all the operations that happen on the database i.e., create, read and delete operations. The structure of models/ ensures the segregation of code chunks based on their responsibilities.

There are 3 major categories to this:

  • Setting up/initializing the database (initialize.js),
  • Defining operations for the database (crud.js), and
  • Providing a layer to communicate with the outside code (utils.js)


scripts/ contains the main entry point community-toolbox.js which is responsible for plugging every single functionality to the website. This file provides an interface to communicate with every feature that is present or is to be added later on. This file then gets bundled up with the help of grunt and that bundled-up version of the file is injected into the website as a script with the help of the landing page html file (index.html).


utils/ acts as a Controller Layer, it contains code for various different features, majority of the code for any feature is present in this folder. This is to follow our approach of keeping main logic separate from the interface file (community-toolbox.js). This helps in making the code more readable and maintainable.


UI/ acts as a View Layer, it is responsible for displaying data on the landing page. Data is given to UI functions and its their job to display that data on to the screen. These functions are broken up into different units according to the data they display.

  • Data for repository contributors is displayed on the screen with the help of contributorsUI.js,
  • Similarly, recentContributorsUI.js shows recent contributors' data on to the page, and likewise other functions show data accordingly.

Up next

You can’t perform that action at this time.