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 mentors will begin this term by working on a new Figma board, there are about 10 pages to re-design, plus two new ones. This design will be validated by the mentors and other contributors/maintainers of Vitess. Once validated, the mentee will use the Figma board to revamp the website page by page. The scope of the mentorship is listed below by categories:

• scoped (features/enhancement required to validate the mentorship)
• optional (bonus items that cannot invalidate the mentorship if not completed).

Scoped:

• There must be a new public Figma board.
• The new design must be responsive (Arewemobileyet: make this site mobile responsive #500).
• Anyone outside of this project should easily understand the content of each page.
• The design must be consistent with the style of Vitess (font and color).
• The design must be highly consistent throughout all the pages.
• The new design must be validated by the mentors and other maintainers/contributors of Vitess.
• The new design should be applied to the website.
• All new code should be typed following TypeScript's standards.
• The loaders should be changed.
• The Macro and Compare pages should be merged together.
• We should have a new page to list all available benchmarks per commit/branch/tags. The goal of this page is to easily see the history of all the benchmarks.
• The table used to compare benchmarks should be easier to understand, along with all the metrics used.
• It should be easy to navigate the Status page, right now the execution queue can sometimes be extremely long making it harder to read the page. Moreover, we should be able to see more previous execution with pagination.
• All pages should have a >= 90% score on all metrics using Google Lighthouse, or a similar tool.
• The Daily page must be fixed, right now it does not render the history well.

Optional:

•  The mentee can present their work during a Community Monthly Meeting.
• Re-enable the Slack integration.
• Add Google Analytics.
• Add an Admin UI
• Open to ideas :)

Many of these items will require changes on the frontend, but also to the backend (in Go) which the mentors can help with.

The success of the internship will be defined by the completion of the scoped tasks. Although not mandatory, 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
• Figma
• Docker/Docker Compose
• GitHub
• Good communication
• Golang (optional)
• MySQL (optional)

Timezones

The mentors are located in GMT-6 and GMT-7. Since the mentee and mentors 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/7'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.

Mentors

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

Mentee

• @Jad31

[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!

[frouioui]

Thank you all for applying to this term! For those who applied through the LFX mentorship website, you should have received an email by now updating you on the status of your application.