Wrapping Things Up | GSoC'24@AsyncAPI

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 LinkDescriptionStatus
#3015Setting up storybook & chromatic and created typography storiesMerged
#3078Added stories for icons, logos, and colorsMerged
#3079Added stories for buttonsMerged
#3081Created tags & avatar components and added stories for themMerged
#3082Created toggle & checkbox components and added stories for themMerged
#3093Created input box component and added stories for itMerged
#3095Upgraded storybook from 8.1.11 to 8.2.4Merged
#3121Created an accordion component, added stories for it, and used it in the FAQ section.Merged
#3122Added stories for blog cardMerged
#3123Created loader component and added stories for itMerged
#3152Configured storybook themeMerged
#3174Updated filters dropdown and created stories for itOpen

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! :)

2
Subscribe to my newsletter

Read articles from Ashmit JaiSarita Gupta directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Ashmit JaiSarita Gupta
Ashmit JaiSarita Gupta

I am an engineering physics undergraduate passionate about Quantum Computing, Machine Learning, UI/UX, and Web Development. About two years ago, when I first discovered the field of Web Development and Quantum Computing, it totally amazed me and I have been dedicating my education to them ever since. Over the past two years, I have dedicated a considerable amount of time and effort to learning and developing skills in these fields by taking various online courses, reading different articles, making several projects, and being involved in various research internships and mentorship programs. Fast forward to today, I am currently working on a modern streaming platform and researching QUBO Relaxation Parameter Optimisation using Learning Surrogate Solver (QROSS).