Hello everyone, I have been exploring the “Retool Jenkins.io Contributor Spotlight” project and wanted to share my understanding and a proposed approach before starting any contributions.
From my understanding, the current Contributor Spotlight website is built using Gatsby.js, which is no longer actively maintained, and therefore needs to be migrated to a modern stack like Vite.js + React.js. Along with the migration, the project also aims to improve the platform’s overall UI/UX, performance, accessibility, and maintainability.
My understanding of the problem
-
The current tech stack is outdated and needs modernisation
-
The UI/UX can be improved to better highlight contributor stories
-
The website should be more responsive, accessible, and performant
-
The system should be easier to maintain and extend in the future
-
Documentation and contributor workflow should also be improved
My proposed approach
I am thinking of approaching this project in structured phases:
1. Codebase Analysis & Migration Planning
-
Study the existing Gatsby-based implementation
-
Identify data flow, page structure, and dependencies
-
Plan migration to Vite + React (functional components + hooks)
2. Tech Stack Modernization
-
Set up a new Vite + React + TypeScript project
-
Migrate components and data progressively
-
Upgrade dependencies to latest stable versions
3. UI/UX Redesign
-
Redesign:
-
Landing page (better storytelling and contributor visibility)
-
Contributor profile pages (clean layout, improved readability)
-
-
Use modern UI practices (possibly Material UI or similar)
-
Ensure consistency with Jenkins design guidelines
4. Performance & Accessibility
-
Optimize loading (code splitting, lazy loading)
-
Improve accessibility (ARIA roles, keyboard navigation)
-
Ensure responsive design across devices
5. Integration & Documentation
-
Ensure smooth integration with Jenkins.io ecosystem
-
Document migration process and architecture for future contributors
-
Provide clear guidelines for maintaining and updating the website
6. Community Feedback & Iteration
-
Share UI drafts and gather feedback
-
Iterate on design and functionality based on suggestions
Tech stack I plan to use
-
React (latest)
-
Vite (for faster builds and development)
-
TypeScript (for better maintainability)
-
Material UI / modern CSS frameworks
-
Markdown / JSON-based content handling (depending on current system)
Clarification
I would like to confirm if I am going in the right direction with this approach.
Also, if there are any preferred tools, design systems, or specific parts of the codebase I should focus on first, I would really appreciate your guidance.
If there are any resources, documentation, or past discussions related to the current implementation or migration strategy, please share them so I can better understand the system before contributing.
I’m very interested in working on this project and look forward to contributing meaningfully.
Thank you!