ChemLab

• 

  Chemical reaction

• 

  Quiz

• 

  Filter element by group

• 

  bonding detection

• 

  Reaction details

Inspiration

In many parts of rural Africa, high school students lack access to fully equipped chemistry laboratories, making it difficult for them to perform experiments and truly understand scientific concepts.

This challenge inspired us to build ChemLab, an interactive virtual laboratory where students can actively combine elements, observe real-time reactions, and understand chemistry through hands-on digital experimentation.

Our goal was to bridge the gap between theory and practice by giving every student—regardless of location—the opportunity to experience chemistry in a visual, engaging, and practical way.

What it does

ChemLab is an interactive digital chemistry laboratory that helps students learn chemistry through real-time experimentation and simulation.

Users begin by selecting chemical elements from a fully interactive periodic table using drag-and-drop or click selection. The selected elements are placed into a reaction vessel where the system instantly classifies the reaction type and generates accurate chemical equations and products.

Once a reaction is triggered, ChemLab visualizes the process using animated particle simulations based on the reaction type, including combustion, ionic, synthesis, redox, and more.

The platform then provides:

Real-time bonding analysis Balanced chemical equations Molecular reaction explanations Safety notes and reaction conditions Element properties and oxidation states

ChemLab also includes an AI-powered quiz system that generates interactive multiple-choice questions to reinforce learning. Users can review past reactions through a history panel and reload previous experiments for continued study.

By combining simulation, visualization, and AI-powered educational support, ChemLab transforms chemistry from passive memorization into an engaging hands-on learning experience.

How we built it

We built ChemLab using MeDo AI, leveraging its interactive chat interface to rapidly design and develop a fully functional web application.

We started by writing a detailed and structured prompt that defined the app’s features, layout, and behavior. MeDo then generated the initial version of the interactive chemistry lab, which we continuously refined through iterative prompts to improve accuracy, user experience, and functionality.

To enhance the system, we integrated:

Custom reaction classification logic Real-time chemical equation generation Bonding detection (ionic, covalent, metallic) HTML5 Canvas for reaction animations

We also used MeDo’s AI search plugin to generate real-time analysis and provide detailed, educational explanations for each reaction.

This approach allowed us to move quickly from idea to deployment while maintaining control over the app’s logic, accuracy, and user experience.

Challenges we ran into

One of the main challenges we faced was working within MeDo’s daily credit limits, which required us to be strategic with our prompts and optimize each iteration carefully.

We also encountered difficulties in generating accurate chemical reaction results, especially when handling different combinations of elements. To address this, we refined our logic and improved how reactions were processed to ensure more reliable outputs.

Another challenge was achieving real-time analysis and explanations for reactions. Integrating AI responses in a way that felt fast and seamless required careful structuring of prompts and efficient use of the AI search plugin.

On the frontend side, we faced UI alignment and responsiveness issues, particularly when adapting the layout across different screen sizes.

Additionally, we dealt with CORS-related issues when making API requests, which required adjustments to how external data was handled.

Overall, these challenges pushed us to think critically, optimize our approach, and improve both the technical and user experience aspects of the application.

Accomplishments that we're proud of

Built a fully functional interactive chemistry lab that turns abstract concepts into real-time simulations Implemented accurate chemical reactions and balanced equations for reliable learning Developed bonding detection and clear explanations (ionic, covalent, metallic) Created a smooth, engaging UI with drag-and-drop interaction and animated reactions Leveraged MeDo AI and plugins to rapidly design, iterate, and deploy the application Generated quizes to reinforce learning.

What we learned

How to use MeDo AI to build a full-stack application from structured prompts How to navigate and effectively use the MeDo interface and development workflow How to iterate quickly by refining prompts to improve UI, logic, and user experience How to integrate AI plugins (like search) to enhance real-time analysis and explanations

What's next for ChemLab

Our next step is to launch ChemLab publicly and make it accessible to high school students across different regions, especially where access to physical laboratories is limited.

We also plan to improve the platform by expanding the range of supported reactions, adding more advanced simulations, and enhancing the accuracy of chemical modeling.

In the long term, we aim to secure funding and partnerships to scale ChemLab into a widely accessible educational tool that can support schools globally and make practical science learning more inclusive and interactive.

Built With

• medo.dev
• react
• typescript