Migrate the UI from Golang to React and rework the UI

[frouioui]

Description

Currently arewefastyet has a frontend component that has too many responsibilities: serving the UI and managing the different benchmarks. We want to split this component in two. Keep a component in Golang that will continue managing the benchmarks, and create another component in React that will serve the frontend UI of arewefastyet.

The current frontend UI uses Golang HTML template to serve its content, we want to get rid of this in order to have a more dynamic and faster website. Additionally, it will allow us to easily add new features to arewefastyet.

Since the current frontend UI was within the same process as the benchmark manager, we need to introduce an API in the new benchmark manager to enable the new frontend UI to serve content.

This frontend UI should be reusable by the Vreplication Testing Framework (cc @rohit-nayak-ps). Our thinking is that we can share the same UI between the two tools, but no design decision has been made yet.

Mentors

• @frouioui
• @rohit-nayak-ps

Mentee

• @Camillemtd

GitHub Project

• https://github.com/orgs/vitessio/projects/11/views/1

Pull Request tracker

• https://github.com/vitessio/arewefastyet/pull/326
• https://github.com/vitessio/arewefastyet/pull/365
• https://github.com/vitessio/arewefastyet/pull/367
• https://github.com/vitessio/arewefastyet/pull/369
• https://github.com/vitessio/arewefastyet/pull/370
• https://github.com/vitessio/arewefastyet/pull/371
• https://github.com/vitessio/arewefastyet/pull/372
• https://github.com/vitessio/arewefastyet/pull/374
• https://github.com/vitessio/arewefastyet/pull/375
• https://github.com/vitessio/arewefastyet/pull/385
• https://github.com/vitessio/arewefastyet/pull/387
• https://github.com/vitessio/arewefastyet/pull/366
• https://github.com/vitessio/arewefastyet/pull/391
• https://github.com/vitessio/arewefastyet/pull/392
• https://github.com/vitessio/arewefastyet/pull/395
• https://github.com/vitessio/arewefastyet/pull/393
• https://github.com/vitessio/arewefastyet/pull/394
• https://github.com/vitessio/arewefastyet/pull/398
• https://github.com/vitessio/arewefastyet/pull/396
• https://github.com/vitessio/arewefastyet/pull/397
• https://github.com/vitessio/arewefastyet/pull/400
• https://github.com/vitessio/arewefastyet/pull/399
• https://github.com/vitessio/arewefastyet/pull/401
• https://github.com/vitessio/arewefastyet/pull/404
• https://github.com/vitessio/arewefastyet/pull/402
• https://github.com/vitessio/arewefastyet/pull/403
• https://github.com/vitessio/arewefastyet/pull/407
• https://github.com/vitessio/arewefastyet/pull/405
• https://github.com/vitessio/arewefastyet/pull/408
• https://github.com/vitessio/arewefastyet/pull/410
• https://github.com/vitessio/arewefastyet/pull/409
• https://github.com/vitessio/arewefastyet/pull/413
• https://github.com/vitessio/arewefastyet/pull/412
• https://github.com/vitessio/arewefastyet/pull/411

[Ciggzy1312]

Hey @frouioui saw this being listed as a LFX project I am well-versed with both React and Golang and I would love to work on this project for the mentorship period I have started looking into the codebase and will follow it up with setting the project locally Let me know if anything else needs to be looked into Thank you and have a great day

[kunal00000]

Hi @frouioui, I am interested in learning about this project and want to work on this project under LFX Mentorship. Please let me know about any materials or resources that I should learn to get a better understanding of the project and its requirements.

Additionally, I propose that along with React/Vite we can use pnpm as package manager and tanstack-query for data-fetching for fast rendering. Although we can use Next js too as it is also known for efficiency but as we want only client side rendering so that is not needed.

I would like to know your views on it.

[Camillemtd]

Hello @frouioui , as a young React developer, I am motivated by the desire to learn and progress in this exciting field.

Participating in your project as part of the LFX mentorship program would be a great opportunity for me, as it would allow me to work alongside experienced developers and contribute to a concrete project using my React skills.

I am ready to make a positive contribution to this collaboration. Thank you and have a great day

[VasuDevrani]

Hey @frouioui I wanted to show my interest in this project. I could not find the slack channel for Vitess, can you share please.

Thanks

[ArafatAbdussalam]

Hi @frouioui I am a React Developer and a cloud-native enthusiast. I will like to make impactful contribution to the AreWeFastYet project.

Given that this issue was last commented in Nov 2022, has your team come up with a new UI design. What has changed since and how do I get started?

[achiverram28]

hello @frouioui I am a very keen React , Next.js , Cloud and a DevOps developer. I am a deep technical enthusiast who believes that learning and contributing is the best principle. I would like to participate in your project and would like to make meaningful contribution.
I feel working and contributing in your project would be a great opportunity and am really excited to join you . Please help me in getting started

[Chimise]

Hello @frouioui , I am Chisom Promise, a full-stack web developer and has worked extensively with React, Next.js and Typescript. I am highly interested in participating in this project under your mentorship through the LFX program. I would love to join the online community if any, to share my ideas and understand more about the project.

[J0SAL]

Hello, @frouioui @rohit-nayak-ps, I am interested in learning about this project and want to work on this project under LFX Mentorship. Please let me know about any good first steps or resources that I should learn to get a better understanding of the project and its requirements. I have submitted my application on the LFX portal.

[adarsh500]

Hello everyone, i saw this project being listed under the LFX Mentorship program and i just wanted to quickly introduce myself. I'm Adarsh i'm a full-stack engineer, I have almost a year of experience working with series A startups and i'm proficient at Next.js, React, JS, TS and i'm currently learning golang. I'd love to contribute to this project as this aligns with my interests and skillsets. I'm currently setup the project and going through the docs and the codebase to better understand the project : )

[Shubhamm-V]

Hi @frouioui , I am very interested in this project and want to work on this project under LFX Mentorship. I have 6 months of internship experience in frontend development using React, Redux, Ant Design, SAAS and other frontend development frameworks.
I have submitted my application through the LFX portal with all required details.

[shashankiitbhu]

Hi @frouioui , I am really Interested in this project and I want to work on this Project under LFX mentorship. I have already published androids apps and websites before, Please guide me about possible first steps to getting started on this project.

[SohamRatnaparkhi]

Hi @rohit-nayak-ps and @frouioui, I am extremely enthusiastic about the opportunity to contributing to arewefastyet as the technology stack utilized by Vitess closely aligned with my existing skills and experience. I have successfully set up the project locally and followed its code base. I have submitted my resume and proposal to LFX.

[Himanshu-370]

Hi @rohit-nayak-ps and @frouioui, I am Himanshu, and would love to work and contribute to this project. I am confident I have the skills which are required for this project. I have applied for this project on LFX portal. Could you guide me how to start from here?

[symys]

Hello, I'm Seyma👋😊

I am a frontend developer with urban planning background who is detail-oriented, curious and willing to learn new technologies every day. I just graduated from a 5 month Re:Coded frontend web development bootcamp, which is an US-based platform with participants from different countries, and I gained a lot of experience in terms of working as a team as well as technical skills.

I have knowledge about HTML, CSS, JavaScript, React, Bootstrap, Tailwind, Redux Toolkit and responsive design and I continue to improve myself via developing projects. I'm excited to add Golang to my skills. I just applied to the project on LFX portal. I would love to work on this project under LFX mentorship term-2 with your mentorship.

Looking forward to work on this project

Best wishes, Seyma Demir

[DIWAKARKASHYAP]

i applied in LFX , what i do next

[OlaoyeVic]

Dear @frouioui,

I hope this message finds you well and filled with enthusiasm for the exciting project ahead. As a frontend developer with a burning passion for web development, I am thrilled to throw my hat in the ring for this opportunity. Allow me to showcase how my skills, enthusiasm, and past accomplishments make me an ideal candidate to contribute to this transformative project.

1. I have acquired a strong foundation in frontend development, encompassing HTML, CSS, JavaScript, TypeScript and React. Through practical experience, I have honed my skills in crafting seamless user interfaces, implementing responsive designs, and optimizing performance. With this expertise, I am well-equipped to undertake the migration of Vitess' codebase from Golang to React, ensuring a smooth and successful transition.

2. React has become my go-to framework for its flexibility, reusability, and vast ecosystem of supporting libraries. I have consistently utilized React to build dynamic and interactive applications, and I am passionate about exploring its capabilities further. Additionally, I have encountered various challenges during my development journey, which has honed my problem-solving skills. I am confident in my ability to overcome obstacles and deliver elegant solutions for Vitess' benchmarking tools.

3. I firmly believe that a well-designed UI is not just visually appealing, but also intuitive and user-friendly. I am dedicated to understanding the needs and expectations of end-users and incorporating their feedback into the design process. By reworking the frontend UI of Vitess' benchmarking tools, I will ensure a seamless and engaging user experience that enhances the productivity and effectiveness of the tools.

4. I thrive in collaborative environments and value the insights and experiences of fellow team members. I am eager to work closely with the Vitess team, actively participating in discussions, and contributing my expertise while remaining open to learning from seasoned professionals. Together, we can create a harmonious and innovative working environment, where our collective skills and ideas can thrive.

5. The CNCF's commitment to open-source projects aligns perfectly with my own values and aspirations. I am deeply invested in contributing to the growth and success of open-source initiatives, and I am excited about the prospect of collaborating with Vitess to propel the project forward. My dedication and enthusiasm will be reflected in the quality of my work and my commitment to the community.

In conclusion, I am genuinely excited about the prospect of joining your team for the LFX Mentorship Program and contributing my skills to revolutionize the website. Thank you for considering my application, and I look forward to the chance to contribute my talents to the success of the project.

Best regards, Victor Olaoye.

[frouioui]

Hello @OlaoyeVic, @DIWAKARKASHYAP, @symys, @Himanshu-370, @SohamRatnaparkhi, @shashankiitbhu, @Shubhamm-V, @adarsh500, @J0SAL, @Chimise, @achiverram28, @ArafatAbdussalam, @VasuDevrani, @kunal00000, @Ciggzy1312 👋🏻

Thank you for your interest and your application. We have selected the application of @Camillemtd, who will be starting with us on June 1st. We invite you all to re-apply for the upcoming terms.

Cheers 👋🏻

[TiwariAbhishek23]

Hello, I also submitted an application and would appreciate any suggestions you may have to improve it. I have been rejected twice before, so any constructive feedback would be greatly appreciated.

[frouioui]

Closing this as the LFX project has been successfully completed. Congratulations @Camillemtd.