[RFC]: Build a developer dashboard for tracking repository build status

[nishant1194]

Full name

Nishant

University status

Yes

University name

Indian Institute Of Technology, Ropar

University program

Electrical Engineering

Expected graduation

2026

Short biography

My name is Nishant and I am currently pursuing my B.Tech at Indian Institute of Technology, Ropar. I am currently in my 3rd year. I was the Web Development Head in Advitiya’25, Technical fest of IIT Ropar.
I have a strong passion for web application development. I have a good command of JS and web development, particularly in the MERN stack. I use TailwindCSS for styling purpose
Since in this project we have to use a PostgreSQL database and fastify, I have been learning these technologies for the past 3 weeks (late Feb).
I also develope mobile apps using React-Native. I have also learnt C and Java programming languages in my first year of college.
I have made some projects on these tech stacks. You can check my then on my Github. Further details about projects are explained in the Qualification section.

Timezone

India Standard Time(GMT+5:30)

Contact details

nishantrpr1194@gmail.com

Platform

Mac

Editor

VS Code because it is lightweight and does not have high hardware requirements. Also it provides a variety of extensions which makes a good development environment.

Programming experience

Some major projects I have made using MERN stack and React-Native.

Completed Projects:

1. BlogApp Link Personal Project Github

• Technologies Used: MERN stack.
• I have created a full-stack blog application using the MERN stack with a responsive React.js frontend, a Node.js/ Express.js backend and MongoBD as a database.
• Made a dashboard for admin to post, manage the blogs and engagement (comments).
• Made functionality to get blogs by category.
• Implemented JWT-based authentication, allowing secure user access.
• SourceCode LiveLink

2. URL Shortener & QR Generator/Scanner (Web+Mobile)

• Technologies Used: MERN stack, React-Native, html5-qrcode, qr-image, nanoid, Vercel
• Engineered and deployed a cross-platform URL shortener with QR generator/scanner (web, mobile app) using MERN stack, React-Native seamless cross-platform access.
• Integrated QR code generation and scanning, enabling instant redirection and data extraction and dark mode option to improve user experience.
• SourceCode LiveLink

3. RSF-EE WEBSITE (For RSF-EE society of IIT Ropar)

• Technologies Used: ReactJS, bootstrap
• Build a simple React web app to display and organise content for RSF-EE society of IIT Ropar.
• SourceCode LiveLink

4. Real-Time Chat Application with AI Integration (Web+Mobile) (ongoing)

• Technologies Used: MERN stack, MERN, Socket.Io, React-Native, Gemini API, Zusband
• I have developed a full-stack real-time chat application using MERN stack and React Native for cross-platform mobile support, with Socket.IO.
• Integrated Gemini API to implement AI-driven features (e.g., smart conversational interactions and image generation)
• Secured cookie based authentication with JWT and bcrypt, ensuring data privacy and secure login.
• SourceCode

5. AI Integrated Full-Stack LeetCode Clone (hackathon project)

• Technologies Used: MERN stack, Gemini API, API integration.
• Developed a full-stack coding platform with user authentication, problem-solving interface, and real-time code execution using Node.js, Express, React, and MongoDB.
• I have integrated AI for suggestions and code conversion to other languages.
• SourceCode

JavaScript experience

I have been working on JavaScript since 1st year of college. I love this language because it can be used for multiple purposes. From developing frontend, backend, desktop apps (ElectronJS) to mobile apps (React-Native), it is used to build anything.

My favorite feature in javaScript is Destructuring objects since it makes code more readable.
// a sample React component

function Example({ name, age }) { 
// the default argument of props to a functional component was destructed and name was retrieved
 }

The problem with JS is that it is loosely typed.

Node.js experience

I have good knowledge of NodeJS. I have been developed backend APIs using Node.js and Express.js. I have mentioned some of my major projects built in NodeJS in the Programming experience section.

C/Fortran experience

I have learnt C and C++ in my first year. I have done Data Structures and Algorithms using C/C++. I don't have any experience with fortran.

Interest in stdlib

Stdlib is Standard Library for JavaScript and Node.js for data visualisation, Numerical and Statistical Computing. It provides focused and small packages on the basis of use case instead of a single big and massive package. The most exciting thing is it makes it possible to do tasks, like NumPy do, in a web browser.

Version control

Yes

Contributions to stdlib

Fix JavaScript lint errors #5814 PR
I have experience with github. I have collaborated with my team on github to make the website of Technical fest of our college. I was the head of the web development team
All prs

stdlib showcase

I have created a heatmap that visualizes daily repository download counts using a calendar-style heatmap. It is built entirely on the frontend using React and @stdlib modules.

Link to Github Repo: https://github.com/nishant1194/stdlib-showcase
For Set-up: https://github.com/nishant1194/stdlib-showcase/blob/main/README.md

Features

• Heatmap representing daily download counts.
• Random downloads generated for each day.
• Statistical summary using @stdlib/stats:
  • Mean (average downloads)
  • Maximum downloads
• Dynamic color mapping based on download intensity.
• Built with React(vite) + Tailwind CSS.

stdlib Modules Used

• @stdlib/stats/base/mean – Compute average downloads
• @stdlib/stats/base/max – Get the maximum download count
• @stdlib/array/float64 – Efficient array for calculations

Goals

Aim

The stdlib project encompasses over 4300+ repositories which are orchestrated via a centralized repository. While orchestration largely works as intended, build failures do happen, and quickly detecting and resolving build failures in standalone repositories is critical to prevent downstream breakages and ensure ecosystem integrity.

This project aims to develop a real-time developer dashboard for monitoring standalone repository build failures. The backend database, which collects build results in real-time, is already in place. However, there is currently no frontend interface to visualize and analyze this data efficiently.

Minimal set of deliverables

• In this project, we have to make a node.js backend for querying a PostgreSQL database.
• Then we will make a frontend dashboard with an interactive and responsive UI which interfaces with the backend.
• Users can navigate to listed repository resources and build artifacts.
• Implement filtering options based on repo name, build status, priority (high/low), tags, and other metadata.
• Add sorting functionality for repositories based on download count, npm version,, stars count, last commit etc.
• Make a detailed page for a repo to see historical overviews and drill-down metrics for better analysis.

Some More Proposed Features (if time and mentor allows):

• Notification via email if build there is build failure.
• Make a page to analyse the trends of repositories (like the top repos downloaded most in last month, last year or trend in most build failures or top repos get starred most in last month, last year).

Tech Stack :

Most of the code of stdlib is written in javaScript, so we will use javascript. But if the mentor permits I am open to use Typescript.

Backend :

• Fastify:- because it is already used in the codebase that are shared in idea #issue4 and its fast and provide a lot of plugins which makes development easier.
  pg:- a lightweight client for PostgreSQL.
• Postman:- to test the API endpoints.

Frontend Dashboard :

• React+Vite:- React is popular for building single page websites. React-router-dom is there for routing. Vite (React) is known for its efficient build process and performance.
• TailwindCSS:- Pre Built CSS classes which make styling easier.
• @tanstack/react-table: a library that we will use to make tables in reactJS.
• Chart.JS:- a library that we will use to make charts in reactJS.

Detailed Plan:

I will provide documentation with every PR made.
I am working UI designs as of now.

Landing Page

The first page user (i.e. stdlib devs) see. It contains the list of repositories and their details which is hosted by stdlib on Github. There will be:

• Refresh Button: There will be a refresh button to reload and refresh repo data.
• Select Bar: This button will open a dialog box in which the user can select the columns he wants to display.
• Table column: The potential columns in the dashboard will be repository name, build status, Latest commit, Code Coverage, version, node_version req., license, publish time, total download count, last week download counts, Latest GitHub event etc will be fetched from PostgreSQL database.
• Column header: On clicking the icon in column header the table will sort on the basis of that column (like on clicking on download count the repos will sort on the basis of decreasing download count again clicking on it the repos will sort on the basis of increasing download count ).
• The Build Status column shows the current build status of the repo. It will be a green tick if the build was successful, that means all the workflow jobs had a conclusion of status:pass. The red cross indicates that the build is currently failing.
• Navigation to github repo: We will make an icon in the repository name column and add its respective url through which the user can navigate to its github repo and see where the build fails.
• Navigation to Detailed page: On clicking on the name of repo, build artifact, its detailed analysis, trends page will appear.

UI design for landing page:-

Pagination

stdlib hosts more than 4200+ repositories as of now. Fetching this amount of repo data at once from the backend API will not be ideal. Thus, the index page will utilize cursor-based infinite scroll. This should give a smooth experience while keeping things efficient behind the scenes.

Detailed page for individual Repo

Url for this page looks like: baseurl/<repo_name>
This page will contain the detailed analysis and trends of individual repo.

• About the repo: This section contains the repo’s basic information like its name , build status, description, version, license, tags associated with it.
• Workflow: I have two approaches for this. Either we get the workflow by github actions or we redirect the page to github to see all the workflow in github itself. I prefer to redirect the page to github (open for mentor suggestion).
• Download trend chart: There will be a line chat or heat map which shows numbers of downloads over the time period.
• Events: shows the events like started, forked etc.
• Build Trends Chart: it shows the build status over time.

Detailed trend reports across repos

Url for this page looks like: baseurl/trends or baseurl/analysis
The page will contains

• List of top “x” repos on the basis of total downloads till date.
• List of top “x” repos on the basis of total downloads in the last week.
• List of top “x” repos on the basis of total downloads for a specific time period.
• List of top “x” repos on the basis of build failure till date.
• List of top “x” repos on the basis of build failure for a specific time period.
  Other than that we can extend this on the basis of events, starts and other parameters(suggested by mentors and community).

Implementation of Rest API

We will implement RestAPI with fastify. Since the data is already being stored in real-time, we have to make GET apis to fetch the data. The goal is to make APIs optimized. The list of RestAPI I thought to make as of now is as follows (suggestion needed by mentor)

• Api to get the repos in paginated manner. We can set the limit (default 10) how much repo we want to load at once.
• Example controller for this API will be

// Dynamic Query with Limit & Offset 
fastify.get("/repos", async (request, reply) => {
 try { 
let { page, limit } = request.query; page = parseInt(page) || 1; 
// Default to page 1 if not provided
 limit = parseInt(limit) || 10; 
// Default limit of 10 
const offset = (page - 1) * limit; 
// Calculate offset dynamically 
// Fetch repositories dynamically with pagination
 const repos = await pool.query( 
"SELECT r.* 
FROM stdlib_github.repository r 
ORDER BY r.name 
LIMIT $1 OFFSET $2",
 [limit, offset] 
); 
// Count total records for pagination 

const total = await pool.query(
"SELECT COUNT(*) 
FROM stdlib_github.repository");
 return {
 data: repos.rows,
 total: parseInt(total.rows[0].count),
 Page,
 Limit,
 hasMore: offset + limit < total.rows[0].count, // Check if more data exists 
}; 
} 
catch (error) { 
fastify.log.error(error); 
return reply.status(500).send({
 error: "Server error" 
}); 
} });

• Api to get the repos in paginated manner in sort order respective of column header(like alphabetical order, build status, and other columns)
• Api to get repo with name on search bar.
• Example SQL Query for searching “std

select r.* 
from stdlib_github.repository r 
where r.name like '%std%'

• Api to get the info about individual repo like its url, download count over time, workflow, Error Logs, Commit History and other details.
• Apis to get trending repos on the basis of download count across calendar, stars, most forked repos, build time etc.

Communication of backend and frontend

Since there is already a backend database which collects build results in real-time, we just have to fetch the data. For this we can use the Fetch method which is natively supported by web browsers.
But if the mentor wants we can use third party libraries like axios.

Extended Features(if mentor and time permits)

Email notification or Alert on build failure

• This feature can be implemented using nodemailer and Websockets for real time updates.

Advanced filtering feature

• We can make advanced filtering features like getting the repo which are published after 01/01/2023 , having a specific node version and build status is pass or fail. (discussion and suggestion required from mentor for which type of advanced filtering feature is really required).
• Api will be made after suggestion from mentor.

AI Integration For Failure Analysis

• We can use LLMs like gemini or openAI api to analyze error logs and get the potential suggestions to fix it.

Why this project?

This project allows me to use my frontend and backend skills. I have developed some full stack projects using MERN. Also with this project I have the opportunity to learn new things. I have been learning fastify for the last 2 weeks for this project.

With this dashboard it will be easy for core stdlib developers to maintain the repos and display and monitor the build status of all repos in one place. Stdlib has 3500+ repo. I can imagine how difficult it is for stdlib developers to have to check on each and every repo. This dashboard makes their life easier. They can see all the repo in one place, navigate to respective github repo, get the trends in repo and get each and every info about a particular repo.

Qualifications

The skills required for this project are aligned with my skills. I have made and deployed many full stack web development projects (as mentioned in the programming experience section). Also I have worked on a dashboard before. For my blog application, I have made a dashboard for admins to manage their blog content. Also users can fetch blogs on the basis of categories and latest blogs.

Prior art

The similar project was implemented before by NPM. They have made a dashboard which shows the npm packages and shows build status, download count, license etc.

Link: https://npm.github.io/statusboard/
Repo: https://github.com/npm/statusboard/

Commitment

My end sem exams will be over on May 4 i.e five days before the community bonding period. I do not have any other Summer internship or Job. So I will be devoting my full time to this project. I will devote approx. 35-40 hours per week to this project. If mentor allows, I would like to extend the project with my extended ideas. Then I am ready to devote 45-50 hours per week.

I will be reporting my work over daily mails on the mailing list. I would strive to be regular, and sincere. I understand that selection in this project will require a serious commitment and 100% devotion from my side.

Schedule

Assuming a 12 week schedule,

Community Bonding Period:

• Deep dive into the already implemented PostgreSQL schema.
• Make the UI wireframe and finalize it with mentors, discuss the website theme.
• Discuss and document the API routes.
• Set the development environment and Initialize the starting code for frontend and backend.

Week 1, 2:

• Make the core frontend components for the landing page as mentioned in the detailed plan.
• Get mentor approval and make changes if needed.
• Write documentation and make PR.

Week 3, 4:

• Discuss the API routes with mentors.
• Implement all the APIs at once that are mentioned in the detailed plan.
• Write documentation and make PR.

Week 5:

• Integrate the backend and frontend and implement the pagination with cursor-based infinite scroll.
• Implement the core functionalities. Integrate the APIs to get repos in sorted order when we click on the icon in the header of the column.
• Implement search by name, refresh and other functionalities as mentioned in the detailed plan.
• Get mentor approval and make changes if needed.
• Write documentation and make PR

Week 6, 7 (Mid term Evaluation):

• Mid term evaluation by mentor.
• Develop frontend for respective repo to show historical overviews and other drill down metrics.
• Make components to show the basic info for repo. Implement chats show its build status over time, downloads over time, workflow, events for the particular repo.
• Write documentation and make PR after getting approval by mentors.

Week 8, 9:

• Develop frontend for trend analysis like top repo with most downloads and other trends as mentioned in the detailed plan.
• Integrate it with backend APIs and make it fully functional.
• Write documentation and make PR after getting approval by mentors.

Week 10:

• Testing the website. And make changes if required.
• Optimise the PostgreSQL queries.
• If mentor allows, Implement advanced filter functionality as mentioned in extended features section in Detailed plan.

Week 11:

• Buffer week. Do pending tasks if any.
• If mentor and time permits, Implement Alert via Email in extended features section in Detailed plan.

Week 12 (Final Week):

• Conduct a final review with mentors to ensure the project delivers expected outcomes.
• Document the remaining part and make final PR.
• Deploy webapp (if applicable).

NOTE:

If mentors approve my extended ideas, I will try to make the work a little faster so that extended features will also be implemented.

Notes:

• The community bonding period is a 3 week period built into GSoC to help you get to know the project community and participate in project discussion. This is an opportunity for you to setup your local development environment, learn how the project's source control works, refine your project plan, read any necessary documentation, and otherwise prepare to execute on your project project proposal.
• Usually, even week 1 deliverables include some code.
• By week 6, you need enough done at this point for your mentor to evaluate your progress and pass you. Usually, you want to be a bit more than halfway done.
• By week 11, you may want to "code freeze" and focus on completing any tests and/or documentation.
• During the final week, you'll be submitting your project.

Related issues

Issue #4

Checklist

• I have read and understood the Code of Conduct.
• I have read and understood the application materials found in this repository.
• I understand that plagiarism will not be tolerated, and I have authored this application in my own words.
• I have read and understood the patch requirement which is necessary for my application to be considered for acceptance.
• I have read and understood the stdlib showcase requirement which is necessary for my application to be considered for acceptance.
• The issue name begins with [RFC]: and succinctly describes your proposal.
• I understand that, in order to apply to be a GSoC contributor, I must submit my final application to https://summerofcode.withgoogle.com/ before the submission deadline.

[Planeshifter]

Thanks for your proposal! I see you have a bunch of experience building various web app, which is great. However, having just learned Fastify and PostgreSQL, do you foresee any challenges you might run into during this project? What are the biggest challenges and risks in your view?

You mention pagination with infinite scroll; were you planning to implement pagination as shown in the mock-ups or loading the content continuously as the user scrolls down the page, or some blend between the two? Would be great if you could please elaborate!

[nishant1194]

Thanks for the feedback!
I started working with Fastify and PostgreSQL from late February (3 weeks are counted from mid march) . I have developed a good grasp through hands-on practice. I feel confident in using both for this project. I’ll be mindful of areas like query optimization and API design as potential challenges.

Regarding pagination— I think to implement a cursor-based infinite scroll, which combines the benefits of both UX patterns. The UI will follow the mock-up structure, while the data will load dynamically as users scroll. This approach should ensure performance and smooth user experience.