Introduction
We have built a comprehensive science popular communication platform called Suprobiotics, targeting researchers researchers and (potential) users in the global probiotics field. On one hand, the platform provides probiotics science popularization content for the public, helping them master methods to identify the quality of probiotic products, while recommending selected popular science articles and reliable products. On the other hand, it joins hands with professionals such as clinicians and university professors to answer public questions, ensuring the scientificity and credibility of the information. In addition, the platform has established an international communication community for researchers in the global probiotics field, facilitating academic cooperation and technology sharing. The establishment of this platform not only helps our engineered probiotics gain public recognition based on scientific evidence, but also promotes the entire probiotics industry to develop in a more reliable and transparent direction.
How to Access It
Here, you can choose the identity (scientist or consumer) for which you will use this webpage to register your account - after that, you will be able to access all the content on the website:
How We Develop It
Technology Stack and Organization:
We use native HTML5/CSS3/JavaScript (no frameworks, adapted for iGEM wiki hosting). The platform is split into pages: Home, Results, Ask, Answer (public display), Answer-Write (for expert composition), and Profile (User/Pro). Styles and scripts are decoupled into files such as head.css, carousel.css, profile.css, style.css, along with login.js, ask.js, results.js, answer-write.js, and profile.js.
Navigation and Search:
The header features inline search that directly jumps to results.html?q=...; the results page parses queries and renders cards.
Example:
const q = new URLSearchParams(location.search).get('q') || "";// TODO: fetch('/api/search?q='+encodeURIComponent(q))
Login and Avatar Menu:
After submitting the login modal, the frontend demonstration only writes to local state. The avatar menu displays "Personal Center/Logout".
Example:
localStorage.setItem('isLoggedIn','true');localStorage.setItem('user', JSON.stringify({username, role, proType}));Upon logout, local storage is cleared and the user is redirected to Home.
Hero Section and Carousel:
Below the top navigation on Home, there is a large hero image (using img + object-fit:cover), with a carousel overlaid in its bottom-left corner using position:absolute. To avoid position jitter on refresh, the hero section height uses dvh or a fixed header height, and the carousel positioning uses pixels/percentages (left/bottom/width) instead of vw.
Question Page:
"Question Type" and "Your Question/Confusion" are required fields, with dynamic prompts switching based on the type; successful submission triggers a popup and redirects to Results.
Example:
if(!qtype.value){ qtype.setCustomValidity('Please select a question type'); form.reportValidity(); return; }if(!q1.value.trim()){ q1.setCustomValidity('Please fill in your question or confusion'); form.reportValidity(); return; }
Expert Workflow:
Profile (Pro) is divided into "My Answers", "Pending Questions", "My Questions", and "Change Password". The frontend filters visibility based on proType mapping (with backend enforcement), and pending question cards link to answer-write.html?id=.... The composition page displays complete question information and an editing area for "My Answer", redirecting to the public answer.html after submission.
Example:
location.href = 'answer-write.html?id=' + encodeURIComponent(id);
Accessibility and Responsiveness:
Forms and modals use native validation and ARIA attributes, with Esc/mask closing functionality; cards/buttons remain keyboard-accessible. Grids and typography adapt at breakpoints like 560px/900px.
Performance and Stability:
To avoid CLS: fixed header height or dvh is used, images have placeholders with object-fit, and carousel dimensions are controlled via aspect-ratio. Only essential JS is used across the site, with component reuse, style variables, and minimal custom properties to improve maintainability.
Expert Workflow:
Profile (Pro) is divided into "My Answers", "Pending Questions", "My Questions", and "Change Password". The frontend filters visibility based on proType mapping (with backend enforcement), and pending question cards link to answer-write.html?id=.... The composition page displays complete question information and an editing area for "My Answer", redirecting to the public answer.html after submission.
Example:
location.href = 'answer-write.html?id=' + encodeURIComponent(id);
Accessibility and Responsiveness:
Forms and modals use native validation and ARIA attributes, with Esc/mask closing functionality; cards/buttons remain keyboard-accessible. Grids and typography adapt at breakpoints like 560px/900px.
Performance and Stability:
To avoid CLS: fixed header height or dvh is used, images have placeholders with object-fit, and carousel dimensions are controlled via aspect-ratio. Only essential JS is used across the site, with component reuse, style variables, and minimal custom properties to improve maintainability.
Usage Example
On this page, you can search for any information about probiotics that you want to know by using keywords:
On this page, we have prepared a wide range of scientific knowledge and product introductions about probiotics. You can also consult experts from all over the world regarding related issues, and have a pleasant conversation with users who have the same confusion as you in the user community：
If neither keyword search nor communication can solve your problem, then please fill in your doubts in the following form. We will contact the expert in the field most relevant to your question as soon as possible to answer your questions and provide solutions. The reply will be sent to your email.
Road Ahead
In the future, we plan to further develop this platform into a more intelligent and personalized science popularization tool. By introducing machine learning algorithms to optimize the content recommendation mechanism, we will provide users with more accurate information services. Meanwhile, we will also develop multilingual support functions to cover more countries and regions, further promoting communication and cooperation among global researchers.
At the technical level, the platform will gradually introduce performance monitoring and automated testing tools to ensure long-term stable operation of the system and enable rapid responses to user feedback for iterative upgrades. Additionally, to enhance the user experience, we plan to add interactive modules, such as online live lectures, real-time Q&A, and virtual laboratories. These features will allow users to understand probiotic-related knowledge more intuitively, thereby improving the platform's user engagement and influence.