Closed the-r3aper7 closed 5 months ago
Hi @the-r3aper7 suggestions that you may incorporate in your proposal
Javascript Experience
sectionHow about linking a prototype wireframe to this? This will make things more clear. This is good. Thanks for your interest, looking forward to your contribution.
Hi @the-r3aper7 suggestions that you may incorporate in your proposal
- Please link websites created by you in
Javascript Experience
section- In version control please state which version control you have worked with
- How are planning to fetch data and render on dashboard you create?
How about linking a prototype wireframe to this? This will make things more clear. This is good. Thanks for your interest, looking forward to your contribution.
Thanks @Pranavchiku will implement those suggestions.
A few comments:
1) So What I was thinking was to store a object in context provider like this {key: 'name(default)', orderBy: 'ascending'}
.
whenever user clicks on header cell this change the key
in context and we will use memoize
to sort the data accordingly or create a api route
if performance degrades, and now we can render the data which we have fetched initially which has been sorted. That's why I have chosen pagination
over infinite scroll
. Problem with infinite scroll will be reordering the elements when the fetched data becomes huge and this will degrade the performance of the website.
2) No, I have not think in such a way It will be really nice implementation for search let me think of query
design for this.
3) explained above
4) With the help of developer dashboard we quickly view which package is having problem in building such that we can quickly address the problem for that specific package easily and without the dashboard you will have to go to every single package repository to check there build statuses and all by using this we have a easy time navigating and working more efficiently.
5) It was not purely intentional as I have seen in react.dev says "Class components are still supported by React, but we don’t recommend using them in new code.". Although I have just shared how data fetching will work. If we are opting in for Class Based Components
it's fine. I will update the code if you want but with functional based components
we will can leverage more code reuse-ability, read-ability and can have more concise and maintainable code and React Team
also RECOMMENDED it. I means it purely independent of what we choose, however we will achieve same the results in website.
A few follow-up comments:
Also, do you have mock-ups for displaying drill down metrics on a per-package basis?
Hi @the-r3aper7, thanks for opening this draft proposal. I just have one additional question:
Hi @the-r3aper7, thanks for opening this draft proposal. I just have one additional question:
- Status graphs views are going to be created only for the selected package?
Yes as of now I thought graphs views are for the selected package.
TABLE OF CONTENTS
Introduction
Full name
Sai Srikar Dumpeti
University status
Yes
University name
Birla Institute of Technology, Mesra
University program
Bachelor of Technology in Computer Science
Expected graduation
2026
Short biography
I am a 2nd year B.Tech. Student in the department of Computer Science and Technology at Birla Institute of Technology, Mesra. I started my programming journey from 2019 in High School i.e 12th Standard. I am a self learnt programmer who likes to learn new things by creating new projects. Here are some programming languages and frameworks which I have learn:
In College I have completed many courses like
Problem Solving with Programming in C
,Object Oriented Programming
,Data Structure and Algorithms
and many more. Currently attending courses ofDatabase Management Systems
,Design Analysis of Algorithms
,Operating System
. My Interests lie inWeb Development
and creating new things.Timezone
Asia/Kolkata UTC +0530
Contact details
Platform
Linux (Fedora)
Editor
For development I use Fedora as Operating System and my editor is VSCode because it is simple to use, learning curve is less and comes with lots build int features like emmet features and extensions. However, I have learned basics of vim for working on servers.
Programming experience
I have significant knowledge of programming, when I first started to learn programming in high school where I started my first language with
Python
I was fascinated by it. Afterwards I started to explore various fields butWeb Development
caught my interest. I have created some projects usingDjango
Framework. Then, I started to learnJavaScript
so that I can learnReact
for the front-end. Then I started contributing toOpen Source
to learn new things and it was great for exploration. I have learned a lot fromOpen Source
and met a lot of amazing people.JavaScript experience
I've been having a great time learning JavaScript and working with it on front-end projects in open source environments. The best part about
JavaScript
is that you can literally build anything with it, from mobile apps with frameworks like React Native to web apps, games, and much more. Recently, I even came across a project where they built a whole operating system in the browser called OS.jsProblems with JavaScript is that it has loose typing which can lead to problems if you don't use tools like
TypeScript
to add type safety. WhileJSDoc
can help with documentation, it doesn't enforce types.However, there is a RFC going on where we can Static Types inJavaScript
in Future. Another challenge is callback hell where nested callbacks can make code difficult to read and hard to maintain.Here are some of my works with
JavaScript
:Svelte
link to Repo.Next.js
.Node.js experience
I haven't directly worked with
Node.js
yet, but I did leverage the API features ofNext.js v12
to create a file server interface for a local network. This project allowed for basic upload, download, and streaming functionalities. Check it out on GitHub here: Nextjs File ServerI'm definitely interested in getting more hands-on experience with
Node.js
in the future.C/Fortran experience
While I haven't had the chance to create a full project in C yet, I did take a course in
Programming for Problem Solving in C
during college. This course involved implementing basic algorithms in C, which provided a strong foundation in the language's core concepts.Interest in stdlib
While I am still developing my knowledge of statistics and machine learning algorithms, I have been impressed by the
stdlib-js/stdlib
library. It offers a collection of smaller, focused packages instead of a single, massive library that could bloat your bundle size. What particularly excites me is the ability to perform NumPy-like operations directly in the browser. The plotting API seems like a fantastic example of this functionality. I've also found the stdlib community to be very welcoming and approachable.Version control
Yes, Currently I am using Git as primary VCS.
Contributions to stdlib
Here, are the statuses of some PR's which i have authored.
Status Merged
All PRs which are merged
utils/every-in-by
math/base/special/acscd
math/base/special/asecd
math/base/special/secd
math/base/special/cscd
math/base/special/acotd
math/base/special/atand
math/base/special/acosd
math/base/special/asind
math/base/special/cotd
math/base/special/tand
math/base/special/cosd
Status Opened
All Prs which are opened
Issues Opened
All issues which are currently opened
Goals
Abstract
Stdlib is a Open Source Project written in
JavaScript
, Stdlib provides 3000+ high performance packages which can be used for numerical and scientific computation, statistics. Since, it is written inJavaScript
we can used it any where some mobile viareact-native
,Node.js
andBrowsers
. My proposal is to create a developer dashboard for tracking build status of those 3000+ repository. We may want to achieve this usingReactjs
andFastify
for backend which will serve static files and API responses.Description for Project
For my completing my project I am going to divide it into 2 parts:
Here are some libraries and tools which will be useful in this project.
code-splitting
,optimized builds
andfaster workflows
.JSON
format which we can be easily used for formatting and sending it tofrontend
for rendering.Roadmap to Status Dashboard
Here are some designs which I am thinking of for the Status Dashboard.
Index Page
Index Page Explanation
Index Page when filter button is clicked
Explanation
Index Page when data is fetching
Explanation
Index Page when error occur in data fetching
Explanation
Links for the above designs:
This may be the project structure for our frontend part of the website.
Components: from the above design we may use these components initially.
Context: Since, we are making it leaner and simple we may want to use Reactjs Context API to avoid prop drilling. We may store recently fetched data, search query and as project requirements while developing.
Constants: we will store all constants like API urls that may be removed as per suggestion.
Communication with APIs
Since, we are seeking the project to be as simple as possible so we will use the Fetch API which is used by browsers natively for communication. We can create a Component for rendering table data.
Checkout the example component which fetched the data from an API.
Now, we easily render table data with changing urls and store the api response to a context as it would be easy to modify the data when a user clicks on
Sort Icon
as this would be deeply nested in the component tree.Implementation of REST API
/ (GET): for serving the
index.html
file./assets (GET): for serving static files like css, js, svgs etc.
/search (GET): this route serves JSON data for a given query. Here are some search query parameters which it will take.
q (required) (type: string) for querying by the package-name.
page (required) (type: integer) which will be useful for pagination.
size (required) (type: integer) size of table rows which will render on client side.
filters (required) (type: string delimetered by ",") we can use these serve only the data required by the client.
Response Skeleton
Response Skeleton
Roadmap to Historical overviews and other drill down metrics.
Here are some designs which I am thinking of for the metrics page.
Overview Page when Downloads is selected.
Overview Page Explained.
Here are some Ideas for Other Metric like
Build Failures
.Only failures
Only success
Fusion of Both
Links for the above designs:
Extending Frontend
Extending API
downloads
,code coverage
,build failures
and many more .Response Skeleton
Project Documentation
To ensure the codebase remains well-documented, I plan to document it with each pull request (PR) I submit. This way, the documentation burden stays manageable, especially as deadlines approach. Specifically, I will focus on documenting the changes I introduce in each PR, keeping the overall documentation up-to-date without requiring a separate, time-consuming documentation task.
Why this project?
I am particularly interested in this project because it allows me to use my skills to create a tool that will positively affect the community. Best part of this, I can apply the frontend development skills I have learned through contributions to various open-source projects, along with my experience creating and working with APIs. This project presents a fantastic opportunity to use my knowledge and experience to work on something.
With the help of the developer dashboard, we can quickly view which packages have problems in their build status. This allows us to address issues for specific packages easily. Without the dashboard, you would have to go to every single package repository to check their build statuses. By using the dashboard, we can navigate and work more efficiently.
Qualifications
I've made significant contributions to several well-respected frameworks. Here are some highlights:
Resumability
to frontend world.In addition to my open-source experience, I'm currently enrolled in a
Database Management System (DBMS)
course at college. This course is equipping me with the skills to execute queries efficiently and apply optimization techniques, which I'm eager to leverage in this project.Prior art
Yes, there is similar project like this from npm where they are also tracking the build status, total downloads and many more things. From what I have understand from their Github Repo
They have created a folder named
workspaces
which contains 2 projectswww
from here they are serving simple HTML, CSS, JS and using jquery for DOM manipulation.data
from here they are serving their content from REST service or GraphQL as needed.All these things are automated by using GitHub Actions.
Commitment
I plan on devoting my entire summer to this. I won't have any other kind of job, so I will be able to work a standard 40 hour week for the coding period. Also, my classes will end well before the coding period begins and will not start up again until well after the pencils down date, so I will be totally free for the whole period.
Schedule
Weeks 1: Community Bonding & Planning
Weeks 2-4: Frontend Development & Core Functionality (Roadmap to Status Dashboard)
Weeks 5-7: Midterm and Per Package metrics (Roadmap to Historical overviews and per package metrics)
Week 8: Performance Optimization
Weeks 9-11: Testing & Refinement
Tape
.Week 12: Finalization & Review
Notes:
Checklist
[RFC]:
and succinctly describes your proposal.