Google Summer of Code 2024 is coming to a close, and it’s time to wrap up my contributions to the AsyncAPI Website. This summer, I worked on developing a comprehensive UI Kit for the AsyncAPI Website, focusing on ensuring visual consistency, reducing code duplication, and improving the overall maintainability of the website. The UI Kit will serve as a foundation for the website's design, making it easier for new and existing contributors to reuse, develop, and maintain UI components.
Given the importance of visual consistency and the growing number of components on the website, having a well-defined and well-structured UI Kit is essential. My task involved developing this UI Kit and integrating it into the AsyncAPI Website, creating a well-organized Storybook for the website.
For more information, you can refer to the GitHub issue: https://github.com/asyncapi/website/issues/2090
Current State
The UI Kit has been successfully developed and integrated into the AsyncAPI Website. The components have been documented and organized in Storybook, with code formatting and linting tools in place to maintain consistency. However, the Dropbox component is under development and the deployment of the project is not yet completed.
Contributions
Repository: AsyncAPI Initiative Website GitHub Repository
GSoC Contributions: GSoC Contribution PRs for UI Kit Development Project
| PR Link | Description | Status |
| #3015 | Setting up storybook & chromatic and created typography stories | Merged |
| #3078 | Added stories for icons, logos, and colors | Merged |
| #3079 | Added stories for buttons | Merged |
| #3081 | Created tags & avatar components and added stories for them | Merged |
| #3082 | Created toggle & checkbox components and added stories for them | Merged |
| #3093 | Created input box component and added stories for it | Merged |
| #3095 | Upgraded storybook from 8.1.11 to 8.2.4 | Merged |
| #3121 | Created an accordion component, added stories for it, and used it in the FAQ section. | Merged |
| #3122 | Added stories for blog card | Merged |
| #3123 | Created loader component and added stories for it | Merged |
| #3152 | Configured storybook theme | Merged |
| #3174 | Updated filters dropdown and created stories for it | Open |
What's Left to Do
The development of the Dropbox component is under-process and the deployment of the UI Kit is pending. These tasks will be completed in the upcoming weeks.
Conclusion
Working on the AsyncAPI Website UI Kit was a challenging yet rewarding experience. The project provided valuable insights into building and maintaining design systems, automating documentation, and ensuring code quality.
Special thanks to my mentors, Akshat Nema, Azeez Elegbede (Ace), and Aishat Muibudeen (Maya) for their continuous guidance and support. Their feedback helped me improve my coding skills and approach problems with a clearer perspective. I would also like to thank the entire AsyncAPI Community for their encouragement and collaboration throughout the project.
I look forward to continuing my contributions to AsyncAPI and am excited to see how the UI Kit will benefit the community in the future.
That's it for now—concluding with a sense of accomplishment and readiness for the next challenge! :)
