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

[Ayansaxena24]

Full name

Ayan Saxena

University status

Yes

University name

Institute of Engineering and Technology, Devi Ahilya Vishwavidyalaya, Indore

University program

B.E. in Information Technology

Expected graduation

May 2024

Short biography

I am Ayan, a Full Stack Developer from Institute of Engineering and Technology, DAVV, Indore. I am a final year student doing my bachelors in Information Technology domain.
I am proficient in ReactJS, Redux, Context, TailwindCSS, Javascript, Typescript, NodeJs, ExpressJs, MongoDB, and SQL. I like to constantly improve and connect with people, and thus keep participating in a lot of hackathons and have also participated in a few open source challenges.

My recent achievement leading my team to the finals of Smart India Hackathon 2023, where we reached the finals after beating 250+ teams in our problem statement domain. I am primarily interested in Frontend Development, and have completed two internships which were focused on ReactJs and TailwindCSS. I also possess some experience in Open Source contributions since I have been participating in Open Source challenges since a while.

Timezone

India Standard Time (+5:30 GMT)

Contact details

email : [email protected]

Platform

Windows

Editor

The platform which I prefer to use is VSCode. The primary reason for the same is its user friendliness along with support of wich ecosystems of extensions. It also allows built in GIT Integration. Also, visual appearance of the editor appreciable. I have been using VSCode since I was a fresher in my college, and thus I am familiar with it very well.

Programming experience

I have been programming since the first year of college, so it has been four years since I have entered the field of programming. Since I am a frontend developer primarily, there are multiple projects that I have created. Most of my projects are built on MERN Stack along with Redux for global state management, and tailwind CSS for styling.

I have also participated in a number of hackathons, including Smart India Hackathon 2023, where I led a team of 6 and we reached the finals after beating around 250+ teams. We built our own custom algorithm to efficiently schedule court cases on the basis of a few parameters, and the algorithm was backed by Artificial Intelligence. This project alone took 3 months of deep research and coding to reach its development stage.
Video Link --> https://youtu.be/9IQJfE-mXGA?si=5i7RZD1EQHoY-cZE
Idea Submission PPT --> https://docs.google.com/presentation/d/1UQ2hJhFxzxXVx2XSRHDDEjW5dlar1dI6nqFcd7uxu18/edit?usp=sharing
The Detailed Idea PPT for the same is --> https://docs.google.com/presentation/d/1jKgEwabF9AL7Fv7SihiGsEazS3YFFtGN59KtUBtND_8/edit?usp=sharing
Github Repository --> https://github.com/Ayansaxena24/Nyaya-Sanchalak

Another Full Stack MERN Based project that I worked on in a recent hackathon named HACKHIVE was a web application based on Promoting mental health and improving mental well being of individuals.
Video Link --> https://www.youtube.com/watch?v=udlNKKRr1uo

JavaScript experience

Experience with JavaScript: I have been working with JavaScript since my freshman year in college, and have since gained significant experience with the language. From basic scripts to complex web applications, I tackled a variety of projects, honing my skills and enhancing my understanding of the power of JavaScript.

Learning React, Express, and Node.js: In addition to basic JavaScript, I learnt popular frameworks and libraries like React, Express, and Node.js. I have made a number of projects during the learning phase, and after I was confident in these frameworks I have made projects on MERN Stack. Learning these technologies allowed me to create sophisticated and effective web applications, expanding my skills beyond just the basics of language. I am also proficient in Redux, thus handling the concept of Global State Management very well, along with playing with REST APIs.

Projects in Core JavaScript: While frameworks and libraries are powerful tools, I also worked on projects using core JavaScript only. One notable project I’ve created is an extension that keeps track of the currently open URLs, and allows users to write notes too on the same. This project not only demonstrates my proficiency in JavaScript but also my ability to use the language to innovate and solve real world problems.

Favorite Feature: Flexibility: One of my favorite aspects of JavaScript is its incredible flexibility. Whether it’s front-end development with React, building APIs with Express, or server-side scripting with Node.js, JavaScript can do everything. This flexibility not only simplifies development but also allows for seamless integration across different parts of the tech stack, thus being a single language on the top of which a complete application can be built.

Least favorite feature: Type coercion and loose typing: Despite its many strengths, JavaScript type constraints and loose typing can sometimes be a double-edged sword even though they allow for shorter coding, faster development and can lead to unexpected behavior and complex debugging errors if not handled

In summary, my journey with JavaScript has been one of constant learning and evolution, from my early days in college to my recent efforts in building complex applications. I appreciate Javascript with its flexibility and versatility. Overall, JavaScript is an extremely important part of my tech stack, allowing me to bring my ideas to life on the web.

Node.js experience

My experience with Node.JS spans many projects. I've used Node.Js to build a variety of Full Stack applications, from simple APIs to complicated servers. One of the major areas where I even have implemented Node.Js is in constructing scalable and efficient server-aspect programs. In the Final Project of the Smart India Hackathon 2023, we made out complete Algorithm in NodeJs to efficiently schedule the Court Cases. We used a tool named as node scheduler for the same, but the core coding of the algorithm was done NodeJS only.

I've constructed excessive-performance applications which could handle huge numbers of concurrent connections without sacrificing responsiveness. I've also used Node.Js in conjunction with frameworks like Express.Js to streamline the improvement of RESTful APIs and web services. The pace and efficiency of Node.Js blended with its light-weight and minimal framework has allowed me to implement strong backend answers for numerous initiatives. Additionally, I explored the good sized surroundings of npm (Node Package Manager) to seamlessly combine third-celebration libraries and modules into my applications, similarly improving their functionality and decreasing development time. Overall, my experience with Node.Js has been instrumental in my adventure as a developer, permitting me to construct rapid, scalable, and function-rich applications across a huge range of domains.

C/Fortran experience

⁤While I have no direct experience with Fortran, I do have solid experience with C and have worked extensively in learning and working in C projects and projects. ⁤⁤During my studies, I dealt with tasks and projects related to implementing algorithms and data structures C. This experience gave me a deeper understanding of language syntax, semantics, and best practices related to the C programming Language.

Interest in stdlib

I'm in particular fascinated with the aid of stdlib because of its significant series of general libraries and modules for diverse programming languages. The concept of getting a centralized repository of tremendous, reusable code that covers a huge variety of functionalities is highly attractive to me as a developer.

One of my favourite capabilities of stdlib is its complete documentation and examples. The documentation makes it clean for developers to brief recognize how to use every module and its associated abilties. Additionally, the presence of clear and concise examples facilitates illustrate the intended usage of each function, making it much less complex for developers to comprise stdlib into their tasks.

Another appreciable feature of the Stdlib library is that Stdlib's math capabilities cover a wide range of topics, including basic arithmetic functions, trigonometry, statistics, and more. These skills are commonly used to produce exact results within and across various systems, making them reliable instruments for solution processing, data evaluation, and simulation requirements fulfillment. One of the reasons why stdlib's graphical interfaces stand out is their ease of access and use. The tools are well-documented, with straightforward uses and explanations, thus making it simple for developers to integrate them into their programs. Stdlib's focus to integration enables smooth integration of computing capabilities into numerous programming languages and environments.

Since I have also contributed in Open Source Programs earlier, I have a decent experience of the requirements of such Open Source Programs. I am also a fast learner, thus new challenges won't be much of a hinderance for me while working on the project allocated to me. Additionally, the Tech Stack required for this task exactly aligns with the skillset that I possess. Thus, it would be a great opportunity to contribute to STDLIB as a contributor.

Version control

Yes

Contributions to stdlib

This PR solves the issue --> Insufficient TypeScript declaration tests for @stdlib/utils/circular-buffer #474
PR Link --> stdlib-js/stdlib#2105

PR Title: Extended TypeScript Declaration Testing for @stdlib/utils/circular-buffer.
Objective --> The objective of this pull request is to widen the test coverage of the @stdlib/utils/circular-buffer package with TypeScript declaration testing. The tests replicate a wide variety of conditions, including starting with zero or negative potential, pushing items, pushing beyond capacity, popping out of an empty buffer, and emptying the buffer. Each test case has type assertion comments (// $ExpectType, // $ExpectError) that demonstrate the expected types and error circumstances. These tests ensure that TypeScript definitions appropriately reflect the behavior of the CircularBuffer class and identify issues during compilation.

Goals

The number one goal of this project is to develop a developer dashboard for tracking environment build failures within the stdlib project. This dashboard will offer stdlib builders with real-time visibility into standalone repository build statuses, enabling brief detection and backbone of build failures to maintain ecosystem integrity.

Project Abstract:
The stdlib venture contains over 3500 repositories, orchestrated through a centralized repository. While the orchestration largely works in the desired manner, occasional build disasters arise. Detecting and resolving these failures promptly is essential to save downstream breakages and to ensure the integrity of the ecosystem. The proposed developer dashboard aims to cope with this want by presenting a centralized platform for monitoring build statuses across all repositories.

Detailed Description:
The mission will encompass two major additives: a Node.Js backend for querying a PostgreSQL database that collects build results in real-time, and a frontend dashboard for visualizing and analyzing this records. The backend will facilitate efficient retrieval of construct reputation records, even as the frontend will offer an intuitive interface for builders to view and have interaction with the statistics. The frontend will be constructed using ReactJS and Tailwind CSS for styling. Upon discussion with the assigned mentor, the UI aspects of the dashboard can further be modified as per the requirements.

The dashboard will incorporate features such as filtering primarily based on the build status, short navigation to repository resources, and extension to encompass historical overviews. The choice of frontend technologies is open, bearing in mind experimentation with contemporary tools such as Tailwind to ensure a smooth and engaging User Experience.

Expected Outcomes:
Upon final touch, stdlib builders will have access to a web application in which they can view the the build status for all repositories right away in a single click. This centralized dashboard will streamline the tracking and control of construct build failures, enhancing the general performance and reliability of the stdlib environment.

By attaining those goals, the project will contribute to improving the development practices as well as environment within the stdlib project, fostering collaboration and productiveness amongst contributors.

Why this project?

One of the primary reasons I chose this project over the other accessible projects in GSOC 2024 was my familiarity with the sort of project. I've previously created similar dashboards, therefore dealing with this problem statement will not be an unexpected chore for me. Secondly, after going through the repository, I also became familiar with the organization's code base as I have invested a lot of time in understanding the code base and code practices of the organization.

Most importantly, I am most excited about this project's tech stack. I have extensive experience with ReactJS, ExpressJS, MongoDB, NodeJS, Redux, PostgreSQL, and TailwindCSS. The technical requirements of the project revolve around the same tech stack that I am familiar with and have used for a number of personal projects. I've previously interned as a frontend developer for two different firms, so the UI and UX aspects of the project attracted my interest.

I also have some experience with open source development, having contributed to a few projects in the past. I also have experience with version control tools like GIT, thus this is one of the projects in which I am extremely confident.

Qualifications

I am well-equipped to execute on this proposal based on my extensive experience with the project's tech stack. My experience in front-end and back-end development is significant, and I am proficient in ReactJs, ExpressJs, MongoDB, NodeJs, Redux, PostgreSQL, and Tailwind CSS. I have used these technologies in the development of multiple personal projects, establishing familiarity and proficiency with their use. They also closely match the technical requirements of this project.

I have hands-on expertise with UI and UX design from my prior frontend development internships, which makes me qualified to easily handle the frontend phase of the project. Considering the backend environment using NodeJs and PostgreSQL, I am having decent experience in using these. I have made various full stack projects using the exact tech stack in hackathons, and I'm excited to put my passion for designing clear, user-friendly interfaces to use by developing a dashboard that satisfies the requirements of stdlib developers.

Prior art

Yes, a similar project has been implemented before too. It is a great reference to visualize as well as logical requirements of this task. The website where a similar dashboard is already available is --> https://npm.github.io/statusboard/
There is a complete repository which has the code for the same and the readme file of the project on the repository depicts the technical information related to the project.
REPO LINK --> https://github.com/npm/statusboard

Commitment

I am completely committed to the GSOC 2024 program. As of now I haven't planned of taking any vacation during the GSOC duration and will be available for the whole duration till project submission. After the GSOC program, I can still contribute to the organization if I find any issue or if there are any tasks that align with my tech stack.

Schedule

Assuming a 12 week schedule,

• Community Bonding Period:

  1. Set up a development environment on my local system.
  2. Install all the necessary tools and dependencies for frontend and backend development to initiate the beginning stage of the task.
  3. Familiarize myself with the stdlib project structure and source code present on the official repository of the organization.
  4. Connect with mentors and community admins to know more about the organization and expectations of the mentors.

• Week 1:

  1. To get familiar with the current code base of the organization.
  2. Start planning and designing how the solution will be exactly implemented.
  3. Discuss project goals and expectations with mentors.
  4. Refine the project plan and roadmap in response to mentor comments.

• Week 2:

  1. Study the UI and logic of the dashboard given in the issue which resembles this task.
  2. Start working on the backend portion of the application.
  3. Set up Node.js environment in order to fetch data from the PostgreSQL database.

• Week 3:

  1. Ensure proper working of the backend environment and start working on fetching the build status from backend.
  2. Create, Implement and Test API endpoints for retrieving the build status data using PostMan.
  3. Receive feedback from the mentors.

• Week 4:

  1. Work on the feedback provided by the mentors.
  2. Setup ReactJS Environment to start working on the frontend phase of the web application.
  3. Build the logic in react to handle data received from the backend.

• Week 5:

  1. Develop UI for the application using TailwindCSS.
  2. Refine the UI on the basis of the feedback received from the mentor.
  3. Enhance dashboard UI/UX for improved usability and interactivity.

• Week 6: (midterm)

  1. Review progress with mentors and receive feedback.
  2. Address any necessary adjustments or refinements to the implemented features.
  3. Ensure that the project is on track for completion within the scheduled timeline.

• Week 7:

  1. Work on the feedback provided by the mentors to improve the application.
  2. Add support for filtering the dashboard based on build status.
  3. Ensure seamless integration of frontend and backend.

• Week 8:

  1. Receive feedback from the mentors regarding the current progress.
  2. Improve the User Interface of the application as per the desired requirements and suggestion by the mentors.
  3. Implement quick navigation to repository resources and build artifacts.

• Week 9:

  1. Implement additional features (as suggested by the mentors) to enhance user experience and functionality.
  2. Optimize performance and responsiveness of the frontend dashboard.
  3. Prepare for the Final stages of development and documentation.

• Week 10:

  1. Perform initial testing and debugging of frontend and backend components.
  2. Finalize implementation of all planned features and functionalities.
  3. Review project requirements and objectives related to historical overviews and drill-down metrics.

• Week 11:

  1. Modify the backend API to support historical data retrieval.
  2. Design and implement UI components to visualize historical build data.
  3. Begin drafting final project report and documentation.

• Week 12:

  1. Conduct comprehensive testing to ensure that all components are working as expected.
  2. Perform final review of the entire project to ensure completeness and correctness.
  3. Receiving guidance from mentor after giving complete demo of the developed application.
  4. Acting on the suggestions received from the mentor.

• Final Week:

  1. Wrap up any remaining tasks and ensure all project deliverables are submitted on time.
  2. Submit the final version of the Developer Dashboard and Project Report.
  3. Ensure the codebase is well documented the follows best practices.

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

Yes. The complete task is present in the form of an issue on the official stdlib repository.
ISSUE TITLE --> [Idea]: developer dashboard for tracking ecosystem build failures #4
ISSUE LINK --> #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.
• 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.