asyncapi
Redesign the AsyncAPI Website and Implement Dark Theme
Overview
The AsyncAPI website needs a modern redesign for its pages to enhance user experience and accessibility and reduce screen glare. This project focuses on creating and implementing new designs for the website pages based on the theme chosen by @Mayaleeeee. She has already made designs for the homepage and community page, the mentee has to design other pages in accordance with that, and then implement them. A dark mode theme will also be developed to improve readability and usability in low-light environments.
Why This is Needed
- Inconsistent UI & Outdated Design: The current website pages and components are not mobile responsive and do not align with the AsyncAPI website’s evolving design.
- Dark Mode Support: Many modern websites use a dark theme to reduce eye strain and improve accessibility.
Project Goals
-
[ ] Website Redesign:
- Create new designs based on @Mayaleeeee’s theme selection.
- Implement responsive layouts for mobile and desktop.
- Ensure consistency in typography, colors, and UI elements.
-
[ ] Dark Mode Implementation:
- Develop a seamless light/dark mode toggle.
- Ensure proper contrast ratios for readability.
- Implement TailwindCSS-based theme switching.
Expected Outcome
By the end of this project, the AsyncAPI website will feature a modern, visually appealing design, improved mobile responsiveness, and accessibility. Including a dark mode will enhance usability in low-light environments and make AsyncAPI more inclusive and user-friendly.
Skills Required
Design & Accessibility: Figma, UI/UX Design, Accessibility (a11y) Core Development Tools: React.js, Next.js, Typescript, TailwindCSS Component Development
Difficulty Level
🟠 Medium/Hard
Mentor(s)
@Mayaleeeee, @devilkiller-ag
Length
350 hours
Resources
- AsyncAPI Website
- AsyncAPI Brand
- Homepage and Community page redisgn by @Mayaleeeee
- TailwindCSS Docs
- Dark Mode Design Guide
- How to design for dark mode: a practical guide
This project aligns well with my interests, and I’m excited to take this on! @devilkiller-ag
If this issue is still unassigned, I would love the opportunity to contribute to it @devilkiller-ag . If it has already been assigned, I’d be happy to collaborate and assist you with the development @Shriya-Chauhan @PraverBajaj .
Overview
The AsyncAPI website needs a modern redesign for its pages to enhance user experience and accessibility and reduce screen glare. This project focuses on creating and implementing new designs for the website pages based on the theme chosen by @Mayaleeeee. A dark mode theme will also be developed to improve readability and usability in low-light environments.
Why This is Needed
- Inconsistent UI & Outdated Design: The current website pages and components are not mobile responsive and do not align with the AsyncAPI website’s evolving design. Dark Mode Support: Many modern websites use a dark theme to reduce eye strain and improve accessibility.
Project Goals
[ ] [ ] Website Redesign:
Create new designs based on @Mayaleeeee’s theme selection.* Implement responsive layouts for mobile and desktop.* Ensure consistency in typography, colors, and UI elements.* [ ] [ ] Dark Mode Implementation:
Develop a seamless light/dark mode toggle.* Ensure proper contrast ratios for readability.* Implement TailwindCSS-based theme switching.
Expected Outcome
By the end of this project, the AsyncAPI website will feature a modern, visually appealing design, improved mobile responsiveness, and accessibility. Including a dark mode will enhance usability in low-light environments and make AsyncAPI more inclusive and user-friendly.
Skills Required
Design & Accessibility: Figma, UI/UX Design, Accessibility (a11y) Core Development Tools: React.js, Next.js, Typescript, TailwindCSS Component Development
Difficulty Level
🟠 Medium/Hard
Mentor(s)
Length
350 hours
Resources
Thanks for sharing the proposal, @devilkiller-ag.
It’s great to see the redesign being prioritized for GSoC this year. The outlined goals for the redesign are excellent, and I’m excited about the focus on accessibility, dark mode, and modernizing the overall user experience.
However, I suggest incorporating a clear UX research and validation phase after the implementation as part of the AsyncAPI Mentorship program later this year. Here’s why:
-
Testing the Impact: Redesigning is a big step; however, ensuring the new designs address usability and structural issues is equally important. Usability testing, A/B testing, and gathering feedback post-launch are important to measuring success.
-
Community Engagement: A focused research phase will allow us to involve community members (designers, developers, and users) in refining and iterating the design based on real-world use.
-
Long-Term Improvement: Combining the technical implementation from GSoC with structured research in the mentorship program ensures the redesign is functional and user-centric.
Given my involvement in the initial UX audit and the design system for AsyncAPI, I’m committed to ensuring the redesign is validated with real users and refined based on feedback. For GSoC, we can focus entirely on redesigning and implementing the new website (which aligns with the outlined goals). Then, as part of the AsyncAPI Mentorship program in December, I’d propose incorporating a user research phase to ensure the redesign meets user expectations and identifies areas for iteration. This would also align with the broader phased approach for improving the AsyncAPI website:
- [ ] UX Audit (completed)
- [ ] Design System for the Website (completed)
- [ ] Redesign & Implementation (current focus with GSoC)
- [ ] Research (proposed for AsyncAPI Mentorship
cc @akshatnema
@Mayaleeeee Good evening ma'am i emailed you and Ashmit sir regarding the contribution for this exciting and revolutionary update in Async API's website/.
can u please tell me that , since i have already forked an dstarted working over this project, what do i need to do further.
Looking forward for your guidance .
Hey @Shriya-Chauhan @PraverBajaj @ARH-MNAJS @PRAteek-singHWY This project has been proposed for GSOC 25.
@Mayaleeeee Makes sense. Can you please list out the tasks that need to be completed first from the design part? With respect to timelines, we can only give the initial few weeks to design, and then will have to go for implementation.
Hey @Mayaleeeee, @devilkiller-ag @akshatnema I saw that this project has been proposed for GSoC 2025, and I’m really excited to contribute!
Can you guide me on how to get started with solving this issue? Are there any specific tasks or requirements I should focus on?
Would love to collaborate and learn from you all! 🚀
Hey @Mayaleeeee @akshatnema . This is a fantastic enhancement to Async API website. Having previously introduced some major enhancements in various open source orgs including Async API, I am well acquainted with the codebase. Additionally, my hands on experience with Figma, UI/UX Design and modern tech stacks such as React.js, Next.js, Typescript, TailwindCSS and Component Development enables me to contribute effectively. I would love the opportunity to work on this enhancement and make the most of it. Also do mention if there are any qualification tasks needed to do for getting this task assigned. Looking forward to your thoughts!
@devilkiller-ag @akshatnema @Shriya-Chauhan @Mayaleeeee @ARH-MNAJS
Hello Sir/Mam,
Myself Anurag, a second-year student. This project aligns perfectly with what I have been working on so far. I am currently focusing on improving the UI using Tailwind CSS. You can check out my projects on my GitHub.
I also have experience with JavaScript, TypeScript, ReactJS, and a bit of Express and NodeJS.
I am excited about the opportunity to contribute to this project and help enhance it further. Looking forward to hearing your thoughts!
@devilkiller-ag @Mayaleeeee I would love to work on this project! I have experience with TypeScript, Node.js, TailwindCSS, and UI/UX design, and I am also actively learning UI design. This project aligns perfectly with my skills and interests, and I am excited to contribute.
If this is still open, please assign it to me. I am eager to start contributing and would appreciate any guidance on initial steps. Looking forward to working with you and the team!
@devilkiller-ag and @Mayaleeeee I have completed this one you could see the screenshots attached below
https://drive.google.com/file/d/1oxex_Vw0aa07lD7heQqTWFR2a8PnPKqD/view?usp=drive_link
Any changes I am willing to do this one if not can raise a PR for this one ?
@devilkiller-ag and @Mayaleeeee I have completed this one you could see the screenshots attached below
https://drive.google.com/file/d/1oxex_Vw0aa07lD7heQqTWFR2a8PnPKqD/view?usp=drive_link
Any changes I am willing to do this one if not can raise a PR for this one ?
Hi @Aksshay88, this issue is for the GSoC'25 project, we are not accepting any PR for it right now. However, if you are interested in working on it as a part of GSoC, then you can submit a proposal for it.
Hey @devilkiller-ag
I am deeply interested in the issue GSoC: Redesign the AsyncAPI Website and Implement Dark Theme https://github.com/asyncapi/website/issues/3669 . I have already contributed to several open-source project and implemented different themes. I am enthusiastic about collaborating with you and becoming a valuable member of the AsyncAPI organization.
PS: I am already working on the issue, which involves implementing Dark Theme.
Issue: https://github.com/asyncapi/modelina/issues/2120 Thank you!
Hello @devilkiller-ag @Mayaleeeee, I am interested in taking this project on for GSOC 2025, i will be looking to write a proposal in earnest, and i will also require your guaidance onto it.
@devilkiller-ag @Mayaleeeee I would love to work on this project! I have experience with React.js, TypeScript, Node.js, TailwindCSS, and UI/UX design, and I am actively learning UI design. This project aligns perfectly with my skills and interests, and I am excited to contribute.
I also want to mention that I originally opened this issue(#3730 ) last week, but it was closed. If the project is still open, please reassign it to me, as I am eager to contribute. I would appreciate any guidance on the initial steps. Looking forward to collaborating with you and the team!
@devilkiller-ag and @Mayaleeeee I have completed this one you could see the screenshots attached below
https://drive.google.com/file/d/1oxex_Vw0aa07lD7heQqTWFR2a8PnPKqD/view?usp=drive_link
Any changes I am willing to do this one if not can raise a PR for this one ?
@Aksshay88 I think the Navbar in your Dark theme isn't responding to your code and is still in white. Also you have increased the padding on both the sides and the body remains small not like the actual website in light theme.
I have made a dark theme feature that converts the entire website to Dark theme and it reduces the overall screen glare too. I have also made sure that our website remains mobile responsive with enhanced UX.
https://github.com/user-attachments/assets/c4911fb2-a795-46dd-8651-531361cefaca
I am currently working on improving the overall website working and responsiveness. @devilkiller-ag and @Mayaleeeee Please guide me on what more should I add to the website for a better user experience?
Also I want to submit a GSoC'25 Proposal for this issue to contribute to AsyncAPI for its overall growth <3!!
Best regards, Shristy Joshi Thakur https://www.linkedin.com/in/shristy-joshi-thakur-828597201/
Hi @devilkiller-ag @Mayaleeeee !
I came across this project, and I’m really excited about the opportunity to contribute to the AsyncAPI website redesign. The focus on modernizing the UI, improving accessibility, and implementing a dark mode aligns with my interest in frontend development and user experience. With experience in React.js, TailwindCSS, and accessibility best practices, I’d love to help implement the new designs and ensure a seamless user experience across devices.
I’m particularly interested in the structured approach of redesigning first through GSoC and then validating the improvements through community research in the AsyncAPI Mentorship program. It’s great to see such a well-planned process for long-term usability. I’d love to contribute to both the technical implementation and testing phases to help make the AsyncAPI website more modern, responsive, and user-friendly.
Looking forward to collaborating and learning from the mentors and the community!
Hey @devilkiller-ag, @Mayaleeeee! 😊
I'm Disha, and I'm super excited to contribute to this project! It aligns perfectly with my skills, and having previously contributed to AsyncAPI, I already have a solid understanding of the project structure.
I had a quick question (also sent on Slack) regarding the project: "This project focuses on creating and implementing new designs for the website pages based on the theme chosen by @Mayaleeeee." Could you guide me on where to find these designs? Looking forward to getting started! 🚀
Hey @devilkiller-ag, @Mayaleeeee! 😊
I'm Disha, and I'm super excited to contribute to this project! It aligns perfectly with my skills, and having previously contributed to AsyncAPI, I already have a solid understanding of the project structure.
I had a quick question (also sent on Slack) regarding the project: "This project focuses on creating and implementing new designs for the website pages based on the theme chosen by @Mayaleeeee." Could you guide me on where to find these designs? Looking forward to getting started! 🚀
Hi @breeworks, I have shared the link to the theme in the issue description. Kindly, read it again carefully.
Hi @devilkiller-ag , @Mayaleeeee ,
Hope you're doing well! I would love to contribute to this project. The design looks great, but I have a small suggestion that could make the site even more attractive. It’s just a minor addition that enhances the existing design without changing its current structure. If you'd like, I can share my thoughts in detail.
Looking forward to your response!
Hi @devilkiller-ag @Mayaleeeee ,
I hope you're doing well.
I wanted to ask if there are any updates regarding the qualification tasks or any other qualifying criteria for this project, or should we proceed with submitting our proposals directly according to the timeline ?
Looking forward to your response.
Hi @devilkiller-ag @Mayaleeeee ,
I hope you're doing well.
I wanted to ask if there are any updates regarding the qualification tasks or any other qualifying criteria for this project, or should we proceed with submitting our proposals directly according to the timeline ?
Looking forward to your response.
Hi @Utkarsh-123github, there is no qualification task. You can directly submit your proposal, but make sure to get it reviewed by us before the final submission.
Thanks for the clarification @devilkiller-ag 🚀 I'll definitely make sure to get my proposal reviewed before the final submission ,as soon as possible.
Hi @devilkiller-ag, @Mayaleeeee,
I hope you're both doing well!
I'm Nitish, and I'd love to contribute to this project. I have experience working with React.js, TypeScript, Node.js, and TailwindCSS, and I've built a few projects using this tech stack.
Looking forward to collaborating, learning from the mentors, and engaging with the community!
