How to Create Your Own GitHub Contributions UI

Creating a GitHub Contributions UI can be a rewarding project, giving you insights into your commit statistics in a visually appealing way. In this blog, we’ll walk you through the steps necessary to get your GitHub Contributions UI up and running!

Requirements

• Node.js installed on your machine
• A GitHub account
• Basic understanding of JSON and AWS services

Step 1: Creating Your Commit Statistics JSON File

The first step is to create a JSON file that contains statistics about your GitHub contributions. For this, you will need to utilize a separate project which can be found on GitHub. This project allows you to fetch your commit data using an AWS Lambda function. If you prefer, you can also run it locally using SAM CLI.

Step 2: Configuration Changes

Once you have your statistics JSON file ready, configure your project by changing the GITHUB_USER_LOGIN to match the filename of your statistics JSON.

Step 3: Running Locally

To get your local server running, follow these commands:

npm install  # Run this only once
npm run start  # This command starts the local web server on port 3000

Step 4: Deploying Your Application

There are two options to deploy your application:

• Run npm run build:production to compile the release code which will be placed in the dist folder.
• Edit the configuration settings in the root directory to deploy the code directly to AWS S3 using npm run deploy. Note that the project is optimized to run from the same S3 bucket that the Lambda function is connected to.

Code Explanation through Analogy

Think of the process of creating a GitHub Contributions UI as building a library:

• **The JSON File**: This is your library’s catalog, listing all the books (or contributions) that you have. It helps you find what you’ve contributed over time.
• **Configuration**: Adjusting the GITHUB_USER_LOGIN is like authorizing a librarian to access specific sections in your library. It’s targeted and necessary for the next steps.
• **Starting Locally**: Running the local server is akin to setting up a mini-library in your home where you can browse your books at your leisure.
• **Deployment**: Finally, when you deploy your project, it’s like opening your library to the public. By choosing to house it on AWS, you ensure that everyone can access it anytime, just as they would with a community library.

Troubleshooting

If you encounter issues during any of the steps:

• Make sure you have all the required packages installed by running npm install again.
• Check your configuration file for typos or incorrect paths.
• If your local web server doesn’t run, ensure port 3000 is not being used by another application.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

By following the steps laid out in this blog, you should be able to set up your own GitHub Contributions UI that provides you with valuable insights into your coding journey. At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.