LFX third iteration of UI improvement: Shadcn, Typescript and Responsive

[frouioui]

What is arewefastyet

Arewefastyet is the automated and continuous benchmarking platform for Vitess (https://github.com/vitessio/vitess). It automatically performs different types of benchmarks on each new commit on main and release branches, on new tags and releases, and on selected Pull Request in https://github.com/vitessio/vitess. It can run hundreds of benchmark a day, allowing maintainers and adopters to know if a certain version of Vitess is slower or faster than another.

To dive deeper into the internals of arewefastyet you can refer to the following talks. Although they are a little bit old and the internal of how we benchmark changed, these talks will give you a good overview of what arewefastyet is doing.

• https://videos.perconalive.com/watch/bPeJAqQ5FomWsJvnehKYoH
• https://www.youtube.com/watch?v=h1bd1yxA4ec
• https://www.youtube.com/watch?v=fLullHPddvg

Previous LFX terms

• Iteration 1 (Jun-Aug 2023): Migrate the UI from Golang to React and rework the UI #328
• Iteration 2 (Sept-Nov 2023): Continue the migration to React and enhance existing frontend UI #415

Current LFX term (Jun-Aug 2024)

Expected Work

The mentee and I will begin this term by working on Figma for a little bit to think about the future design of the website, there is about 10 pages to design. We will build a Figma using Shadcn components. The mentee will then use this Figma board to revamp the website page by page. The new design is expected to be responsive. While revamping the website, it is expected to finish migrating to TypeScript and type as much components as possible (as we see fit).

Purely informative examples of things we want to change:

• The status page is not responsive at all today. We can also improve the top-part of the page with more information using a dashboard like view. The table in the bottom-part could be modified to use a more sober design as in https://ui.shadcn.com/docs/components/table. In the same table, for benchmark in progress, we could have a small animation. The three big orange statistics numbers are not selectable, we would like them to be selectable.
• On all pages the loader animation could be changed to something else.
• Add more statistics to the home page, move some of the ones we have in /status there too. Have a style similar to https://ui.shadcn.com/examples/dashboard.
• The comparison page has some rendering issues for some of the tables, and is also not responsive and contains a lot of information per table.
• The compare and macro page should be merged together.
• Have a new page that list all the available benchmarks, different from status which list all the previous execution.
• Be consistent on the how we render things throughout the whole website, for example, we display the short version of commit SHA with 6 and 8 chars, it should always be 7.

If the revamp of the website is completed before the end of the internship, the mentee and mentor will work on adding more features to the website: filtering of the tables in the status page, add password-protected pages for our admin API endpoints, add Slack notifications about benchmark runs.

The success of the internship will be defined by the completion of the revamp. The mentee is expected to present their work and learnings in front of our maintainers and community during our recurring monthly meeting by the end of the internship (in August 2024).

Skills required

• React/Vite/TypeScript
• Having experience with Docker/Docker-Compose
• Having experience on Figma, Golang and with Rest API is a bonus.

Timezones

I am based in GMT-6 and since mentee and I will be spending some time together to draft the Figma board and also to do code reviews and other collaborations, it is recommended that you can work at least 2-3 hours a day during GMT-6's business hours.

Contact and application

For more information you can contact us on the #lfx channel of our Slack.

Regarding the applications I will be looking at previous experiences with React and TypeScript, you are welcome to send me your personal projects, previous contributions to OSS projects, and resume. Contributions to the arewefastyet are also welcome if you see something that you would like to fix, although most of the frontend needs to be able to able to run in development mode.

Mentor

• @frouioui (Vitess Slack: @Florent Poinsard)
• @notfelineit (Vitess Slack: @Frances Thai)

[AkhilJ321]

@frouioui , Hy I am interested in this particular project. I was attempting to join the slack for joining discussions but the link seems to be expired

[frouioui]

Hi @AkhilJ321, apologies it was expired. You can now use https://join.slack.com/t/vitess/shared_invite/zt-2he4t8glg-hyLiiW~f_0YM2YD9oYYuuA. I have updated the issue's description to use this new link.

[AkhilJ321]

Hi @AkhilJ321, apologies it was expired. You can now use https://join.slack.com/t/vitess/shared_invite/zt-2he4t8glg-hyLiiW~f_0YM2YD9oYYuuA. I have updated the issue's description to use this new link.

Thanks

[kirtanchandak]

Hey @frouioui,

I am Kirtan a Full Stack Developer from India. Previously have done two internships, also contributed to arewefastyet and open source projects. I have a preety good experience of building production grade applications.

Would love to work on this project in this term!!

Thank You :)

[kirtanchandak]

Hey @frouioui,

I am Kirtan a Full Stack Developer from India. Previously have done two internships, also contributed to arewefastyet and open source projects. I have a preety good experience of building production grade applications.

Would love to work on this project in this term!!

Thank You :)

Added my open source contributions, personal projects and resume in your slack.

[ShravaniAK]

Hello!
I am Shravani Kaware, A Frontend Developer in React js , I have experience with Shadcn along with making the UI responsive, and I would like to contribute to this issue,
Thank you

[ShivamJha2436]

Hi @frouioui,
Shivam Jha here, fullstack dev with React/TS/Shadcn UI and Go experience. Keen to contribute to this project (especially interested in issue [#525]).
Thanks,
And, let me know if you have any questions.

[upsaurav12]

Hi i am Saurav Upadhyay i have experience in frontend devolopment knows vuejs and go backend , also having some experience in figma and reactjs.
And i am very excited to contribute to this project
as.this involve frontend work
can ask any questions if you want
Thank you

[TenzDelek]

Hello @frouioui , this is Tenzin, a passionate React Developer /Next Developer, I am happy to write this note to share my sheer desire to be a part of this mentorship to learn and grow in this field.
Participating in this project as a part of LFX mentorship program would be a huge opportunity for me to contribute and explore with other senior developers and learn from them as well.

I am ready to make a positive contribution to this collaboration.
with Regards
Tenzin Delek

[vibhu1805]

Hello @frouioui , I'm Vibhuti Sharma passionate about creating user friendly and responsive websites. I believe I am well suited for this project due to strong foundation in react , css , figma , typescript , html . Participating in this program gives me a opportunity to refine my teamwork and collaboration skills as well as my development skills.

[surajgjadhav]

Hi @frouioui ,
I'm Suraj Jadhav, a Full Stack Developer, specialize in React, JavaScript, and TypeScript. I found this opportunity aligning with my tech stack and interests. I have thoroughly explored the repository and watched the provided videos, both of which I found interesting. Although I don’t have prior experience in Go, I am eager to delve into it and create some Micro/Macro Benchmarks. This opportunity not only interests me but also promises to enhance my understanding of database system design.
Looking forward to contribute
Thank You

[shivansh-bhatnagar18]

Hi @frouioui
I'm Shivansh Bhatnagar, a full-stack web developer with expertise in Typescript and technologies such as ReactJs, NextJs, and Docker. I have been creating websites for quite a while now and have gained quite an experience in creating highly responsive websites for various organizations. I have applied to the LFX Mentorship program and would love to contribute to this automated benchmarking website. Looking forward to collaborating and gaining valuable experience for the future

[0xmihirsahu]

Hey @frouioui 👋,

I'm Mihir Sahu, a full-stack developer specializing in TypeScript, React, and NextJS. I've worked with libraries such as Shadcn, RadixUI, Pro Components, and Leaflet, and I have experience with Figma and Rest API integration. I have worked with Docker and Kubernetes. I'm excited about the opportunity to contribute to this project as it perfectly aligns with my skills and interests. Participating in the LFX Mentorship program would be an invaluable experience for my professional growth.

Looking forward to your guidance and the chance to collaborate.

Cheers!