LFX third iteration of UI improvement: Shadcn, Typescript and Responsive #525
Description
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)