[RFC]: build Developer dashboard for tracking ecosystem build failures

[meddhiaka]

Full name

Med Dhia Kassab

University status

Yes

University name

Carthage University, Tunisia

University program

Licence in Computer Science, Spec: Software Engineering

Expected graduation

2025

Short biography

Hello, this is Dhia, a second year university student from Tunisia studying computer science with a focus on software engineering at Carthage University, a Tunisian public university.

Over the last two years, I have participated in many challenges like hackathons and personal projects. However, this year I switched to focus a little more on open source, so I chose to share my knowledge here...

I personally focus on full-stack JavaScript development using JS/TS technologies for both client-side and server-side.

I use Tailwind as my preferred CSS framework and React.js in every project. You can find the repositories on my GitHub account. I have experimented with various tools and CLI such as create-react-app (CRA), Vite app, Next.js - the React meta-framework, and other CLI tools to develop any application I think of.

This is precisely why I chose this idea!

These resources added to the suggested project technologies would add a layer of creativity to the dashboard: https://ui.shadcn.com/ https://ui.aceternity.com/ https://nextjs.org/blog/next-14

Timezone

I'm located in Tunisia, north Africa, UTC+1

Contact details

email:mohameddhiakb@gmail.com, linkedIn:meddhiaka, github:meddhiaka

Platform

Linux

Editor

VSCode, Codespaces, Gitpod

Programming experience

I created a small full stack application using Next.js(react), firebase and Tailwind an eductinal elearning solution, which won me the Tunimpact hackathon proposed by Google Developer Summer of Code FSB 2023, you can see it in the ressources:

https://www.linkedin.com/posts/meddhiaka_gdsc-gdscfsb-tunimpact-activity-7133936784840765440-RCp7

https://www.facebook.com/story.php?story_fbid=297329339804843&id=100085833383386

https://github.com/meddhiaka/tunimpact-hackathon-notesfsb

And I developed a self role chatbot with TypeScript, React.js, Node.js, Express.js, and some Python because I was interested in TypeScript and its beautiful way of defining things, the project had a great influence on my LinkedIn network, you can see that here:

https://www.linkedin.com/feed/update/urn:li:activity:7167805661009932288/

https://github.com/meddhiaka/fsb-gpt-demo

It was a simple project,I tried to make a similar Chagpt but responding with Tunisian dialect, which was super fun for the teacher, actually it responded by handling regex expressions and I told them all that it is handling small range of questions...

JavaScript experience

Promises, asynchronous programming, and arrow functions ... I like the syntax and how things work in Javascript, It feels like Python but with more creativity!

That's why I was super interested in learning further and exploring Typescript, even though we do not learn JS in my college but I'm self-taught learner always working hard to learn and build awesome stuff.

Node.js experience

Node.js as an environment at first, I thought it was a language but after all, it was a revolutionary tool personally, it opened my eyes to a lot of powerful open source dependencies and packages I used, and I will explore more of them in the future!

THANKS to JavaScript and its creators!

C/Fortran experience

C was a language that i learned from how to interact with the machine and use its memory, I studied it in my first year of university, exploring computer memory and how to manage it.

As well as data structures it was a tough subject, but I learned many things such as how to create and manipulate linked lists, trees, and stacks etc...

Interest in stdlib

Even though i'm willing to do my second pull request with real code contributions not just documentation, stdlib has a nice organized structure.

I feel it is super easy to understand and implement features or new dependencies...

Version control

Yes

Contributions to stdlib

(Editable for future pull requests)

i made my first pull request yesterday and its still open: docs: improve stats/base/dists/lognormal README Examples #2003

Goals

I hope to achieve a very good deliverable product for this organization with a focus on these points:

• Preparing the Layout/Mockup, environment setup (Next.js/TypeScript/PostgreSQL)
• Fast mapping through pages (routes) by using the Next.js feature called App Router
• Server-Side rendering for components that do not use any client compilation(web Browser), like navigation bars, table component that list every repository failure, for example...
• Responsive work by using TailwindCSS/ShadcnUI library, which is built also on Tailwind and is completely customizable with Tailwind.
• Adding CRUD functionalities on the server side and their security concepts (data validation/Error handling)...
• Adding smooth and lightweight synchronization by some server side components interacting with PostgreSQL by giving it queries or even using the Prisma ORM in some cases that do not need advanced database querying! mentors will choose between the two options.
• Implementing some metrics and fully customizable charts with D3 using the Nivo library to view historical charts like the number of repositories and changes in failure over time (per month/year in a beautiful graph).

Why this project?

What excites me is the learning gap that will provide this project, and the personal growth for me, it really motivates me and aligns with intentions 10/10, spending the summer over something beneficial for me, and creating a product that will help every member or contributer of this organization that is really in seeing the dynamic responsive charts, metrics, statistics of every artifact or package!

Qualifications

• My qualifications involve using similar tools in building other projects... They may not be for the same purpose but they give me the ability and motivation to suit this project, i'm self taught learner, but I test my skills, take courses and earn certificates from trusted organizations like these in 2023/2022, so I can prove my qualifications a little: https://www.hackerrank.com/certificates/87954ad3f6bd https://www.hackerrank.com/certificates/351756d7c84a https://www.freecodecamp.org/certification/meddhiaka/responsive-web-design

Prior art

There are a lot of starter templates from Next.js itself showcasing charts and statistics of some e-commerce products, for example: https://vercel.com/templates/next.js But i'm willing to develop it myself, building it with UI libraries like ShadcnUI But do not worry, they are fully customizable and fit the needs of mentors in terms of UI/UX.

Thanks to Tailwind for making this happen!

Commitment

I will finish my academic year next May, so I'll be free in the summer. I won't be pursuing any summer internships or part-time jobs like last summer, I spent all my time learning and improving my skills... I plan to dedicate 3 to 5 hours daily to work on this project, with maybe a day or two per week to rest my mind. In total, I'll be dedicating around 13 to almost 35 hours per week to this project.

Schedule

Assuming a 12 week schedule,

• Community Bonding Period:

• Week 1: Choosing between the Git workflow or Github workflow or any suggested workflow from mentors, getting the environment set up and initializing databases, tables, layouts, and all needs

• Week 2: Creating CRUD handlers in TypeScript, routes, and middleware like error handling, Authentication with OAuth2.0 providers or classic credentials, using Next.js backend or Express.js is also a good thing. (proposed by mentors)

• Week 3: Creating responsive components (Navigation bar/ sidebar(mobile)/footer/table ) and layout using TailwindCSS, shadcn and framer motion animations(option)

• Week 4: Implementing typescipt interfaces, declarations and organizing the project strucutre, merging the branches and starting a new test branch

• Week 5: Testing the UI components with Cypress for better user experience and fixing UX bugs for better responsiveness or performance.

• Week 6: (midterm) Making the server side alive and testing its interactivity in the dashboard

• Week 7: adding the charts/ metrics components to the dashboard and displaying the server data on them

• Week 8: Testing the API with jest and deployment process

• Week 9: Changes proposed by the mentors or incomplete tasks.

• Week 10: Changes proposed by the mentors or incomplete tasks.

• Week 11: Changes proposed by the mentors or incomplete tasks.

• Week 12: Changes proposed by the mentors or incomplete tasks.

• Final Week: delivering the final project 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

4

This one may be edited this week.

Checklist

• [X] I have read and understood the Code of Conduct.
• [X] I have read and understood the application materials found in this repository.
• [X] I understand that plagiarism will not be tolerated, and I have authored this application in my own words.
• [X] I have read and understood the patch requirement which is necessary for my application to be considered for acceptance.
• [X] The issue name begins with [RFC]: and succinctly describes your proposal.
• [X] 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.

[kgryte]

@meddhiaka Thanks for filing this draft proposal. A few comments:

1. Authentication is not necessary. This can be a publicly accessible application. We anticipate, however, that it stdlib devs who will be the primary users.
2. We're not particularly keen on next.js. Perhaps you have other proposed tech stacks?
3. How do you plan to support searching and filtering of repository data to allow for efficient identification of repositories needing attention (e.g., failing builds)?
4. How do you plan to handle the display of many repositories combined with many columns (e.g., version, license, build status, downloads, last release date, etc) and do so reasonably performantly?
5. How do you plan to handle data refresh in the client application?

[steff456]

@meddhiaka Thanks for creating this draft proposal, I have some questions for you:

1. Do you have an estimate of the amount of endpoints that will be required for the dashboard?
2. How do you envision the dashboard itself? (This is just to understand what things you will include in it)
3. If you are proposing server side rendering, how are you going to handle the charts created by d3?

Also, I just wanted to note that there's a big difference between 13 to 35 hours per week. It will be best for us to understand if you are going to have an almost full time availability or just part time.

[meddhiaka]

@kgryte thank you for replying to the issue i posted

@meddhiaka Thanks for filing this draft proposal. A few comments:

1. Authentication is not necessary. This can be a publicly accessible application. We anticipate, however, that it stdlib devs who will be the primary users.

2. We're not particularly keen on next.js. Perhaps you have other proposed tech stacks?

There's a possible way to use React with React-router-dom or Wouter(a lightweight routing library) also Tailwind or sass, D3 Axios will remain the same dependencies of the project.

3. How do you plan to support searching and filtering of repository data to allow for efficient identification of repositories needing attention (e.g., failing builds)?

by using react Query for data retrieval and caching along with API integration for repository details such as build status and last commit time,, React Query hooks enable filtering of repositories based on criteria like build status and last updated date...

4. How do you plan to handle the display of many repositories combined with many columns (e.g., version, license, build status, downloads, last release date, etc) and do so reasonably performantly?

By rendering in a table with pagination components and using the caching feature from React Query; I previously mentioned that React Query handles caching, I will create a table component responsible for dividing all the components into separate tabs on the route /dashboard for example

5. How do you plan to handle data refresh in the client application?

useEffect with dependency variable is the most efficient solution! I will put the data fetched as the dependency variable so whenever any changes happens to the endpoint, it refresh the data automatically and if you mean providing a refresh button it is possible also! you can read this article from the newer react documentation website: https://react.dev/reference/react/useEffect#useeffect