AsyncAPI Conference Website UI Kit Development

[AceTheCreator]

Overview

The AsyncAPI Conference website needs a structured UI Kit to ensure design consistency, modularity, and maintainability. This project aims to develop a Storybook-based UI component library for the website, improving the developer experience and enabling easy customization.

Why This is Needed

• Inconsistent UI Components: The conference website currently lacks a standardized design system, making it difficult to maintain.
• Scalability Issues: As the conference grows, a reusable component-based UI Kit will improve scalability and reusability.
• Improved Developer Experience: A Storybook-powered UI library will enable developers to preview, test, and modify components easily.

Project Goals

✅ Build a UI Component Library:

• Develop reusable components (buttons, cards, modals, forms, typography, etc.).
• Ensure components follow AsyncAPI's design principles.

✅ Storybook Integration:

• Set up Storybook for live component preview and testing.
• Document each component with props, usage examples, and guidelines.

✅ Improve Website Maintainability:

• Replace existing static components with modular, reusable versions.
• Ensure a consistent design system across the website.

✅ Enhance Accessibility & Performance:

• Optimize UI components for accessibility (a11y) and performance.
• Ensure mobile responsiveness and cross-browser compatibility.

Expected Outcome

By the end of GSoC 2025, AsyncAPI will have a Storybook-powered UI Kit that ensures consistency, improves maintainability, and simplifies future development for the conference website.

Skills Required

Javascript
React
Storybook
UI/UX Design
Component Development
Accessibility (a11y)

Difficulty Level

🟡 Medium

Resources

AsyncAPI Conference Website
Storybook Docs
AsyncAPI Brand
Component-Based UI Development

[mukulpythondev]

Hi @AceTheCreator , i am happy to work on first basic implementation then i will share this week with you for your feedback.

[naman9271]

hi @AceTheCreator i would love to work on this issue if you say i will start working upon it

[om2137]

hey @AceTheCreator , I would like to be part of this issue.
I have already started researching the topic and here's the high-level approach I have come up with till now.

( pre dev stage )

Start this issue by first auditing all the components and pages in the existing Ui of the conference page. While working on previous issues I have found many of the components are not modular ( which defeats the purpose of components ).

Discussing the design of Ui components with the design lead( I think it is @Mayaleeeee ) to adhere to AsyncAPI's design principles.

( dev stage )

After finalizing the design and components, Set up Storybook in the project and start implementing the Ui components ( developing new and reworking existing ones)

For documentation, we can use storybooks inhouse autodocs, MDX, DocBlocks, etc. to make components easy to use by other developers.
For testing, there are various tools for various needs. For example, Chromatic made Storybook's maintainers which will help in visual testing, a11y testing, etc. Playright for cross-platform, cross-browser e2e testing, responsiveness testing, etc.
I have started with the pre-dev stage.

Where can I discuss the detailed approach with the team to get the best outcome on this issue?

[Aryan4884]

@AceTheCreator I would like to contribute in this project during GSOC 2025. Please guide about how can I start?

[NalinDalal]

@AceTheCreator I would love to contribute on this one. How can I get started, also can we just start working?
also may i suggest to use motion framer too

[BEaANIKET]

@AceTheCreator I would love to work on this project! I have experience with React, TypeScript, TailwindCSS, and UI/UX design, and I have been actively learning more about building structured UI systems. This project excites me because it aligns perfectly with my interest in creating scalable, reusable component libraries.

I am confident in my ability to integrate Storybook, build modular components, and ensure accessibility (a11y) compliance for the AsyncAPI Conference website. If this is still available, please assign it to me. Looking forward to contributing and collaborating with the team!

[ronakmaheshwari]

@AceTheCreator I would love the opportunity to contribute to this project. With experience in React, TypeScript, TailwindCSS, and UI/UX design, I have been actively deepening my expertise in building structured and scalable UI systems.

This project particularly excites me as it aligns with my passion for developing reusable component libraries. I am confident in my ability to integrate Storybook. If the opportunity is still available, I would be thrilled to take it on. Looking forward to collaborating with the team and making a meaningful impact!

[Aksshay88]

Hi @AceTheCreator ,

I hope you’re doing well! I have been contributing to AsyncAPI through a few PRs and truly appreciate the work being done in this ecosystem. As part of Google Summer of Code (GSoC) 2025, I would love the opportunity to work on developing a Storybook-powered UI Component Library for the AsyncAPI Conference website.
Why This Project?

Currently, the conference website lacks a standardized design system, leading to inconsistencies and maintainability challenges. This project aims to:
✅ Build a UI Kit: Develop reusable components (buttons, modals, typography, forms, etc.) aligned with AsyncAPI’s design principles.
✅ Integrate Storybook: Provide live component previews, prop documentation, and interactive testing for developers.
✅ Enhance Maintainability & Accessibility: Replace static elements with modular components, optimize for a11y, and improve performance.

Next Steps

I’d love to discuss this proposal in more detail, understand AsyncAPI’s design guidelines, and gather any specific requirements the team may have. Please let me know how I can proceed further!

Social Links :

Linkedin
Gihub

My contribution to open -source :
I have actively contributed to open-source through various programs, including GSSOC'24 and FOSS Hack 2025, along with several PRs(almost 30-40 pr's has been merged successfully ) to different projects.

Looking forward to your thoughts.

Best regards,
Aksshay

[Tanmay-008]

Excited about this initiative! Given my past contributions to AsyncAPI, I understand the need for a structured UI Kit to improve maintainability and scalability. Storybook-powered components will be a game-changer for the developer experience. Looking forward to contributing and collaborating on this.

[Rustix69]

@AceTheCreator Can I work on this issue ?

[ManishxNinja]

@AceTheCreator Can I work on this , and can you plz provide me the link to join the communtiy , beacause i am unable to join the slack server

[Jaishree2310]

@AceTheCreator Can I work on this , and can you plz provide me the link to join the communtiy , beacause i am unable to join the slack server

This is under gsoc until then you can go with the codebase and start working on issues and wait for PR until approved by the maintainer.
Please read the guidelines provided.
Here is the link to join.
https://join.slack.com/t/asyncapi/shared_invite/zt-31oe95ixc-W9t~ya4ZjFCYHqnpfHjRVg

[Kiran1810]

@AceTheCreator @ashmit-coder can I work over this issue?