lab2Code

Lab2Code is an interactive learning platform built with React.js and Tailwind CSS designed to help students learn, practice, APIs, fun, quizzes and visualize coding concepts like a virtual coding lab.

Comment

Inspiration

Learning chemistry and coding can often feel boring or abstract. I wanted to make it visual, interactive, and fun, something that helps students see how code and science connect. That’s how Lab2Code was born, a fusion of education and technology to make learning feel like a creative playground.

What it does

Lab2Code is an interactive web app built with React.js and Tailwind CSS, designed to help students learn, practice, and visualize coding and science concepts. 𝐌𝐚𝐢𝐧 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐬: 𝐂𝐡𝐞𝐦𝐢𝐜𝐚𝐥 𝐈𝐧𝐟𝐨 𝐏𝐚𝐠𝐞 Allows users to type a compound name, It fetches real-time data from PubChem API, such as molecular formula, weight, melting/boiling point, and even displays a 3D molecule model using 3Dmol.js. 𝐁𝐚𝐥𝐚𝐧𝐜𝐞 𝐄𝐪𝐮𝐚𝐭𝐢𝐨𝐧𝐬 Users can input any chemical equation and instantly get the balanced version. 𝐀𝐜𝐢𝐝–𝐁𝐚𝐬𝐞 𝐑𝐞𝐚𝐜𝐭𝐢𝐨𝐧 Select an acid and a base from dropdowns the app calculates the resulting salt, displays the balanced reaction, and mentions whether the salt is neutral or basic. 𝐐𝐮𝐢𝐳 𝐏𝐚𝐠𝐞 Lets users test their chemistry knowledge through interactive questions. 𝐂𝐨𝐧𝐭𝐚𝐜𝐭 𝐏𝐚𝐠𝐞 Provides a simple way to reach out or share feedback. 𝐋𝐨𝐠𝐢𝐧/𝐒𝐢𝐠𝐧𝐮𝐩 Firebase Authentication with custom InputField, Ant Design form validation, password toggle, and animated borders. 𝐏𝐫𝐨𝐟𝐢𝐥𝐞 𝐏𝐚𝐠𝐞 Shows user info, edit & settings options with a clean, responsive interface. 𝐏𝐞𝐫𝐢𝐨𝐝𝐢𝐜 𝐓𝐚𝐛𝐥𝐞 𝐏𝐚𝐠𝐞 Fusion of Science + Code — dynamically displays elements using React’s map() and API data. 𝐌𝐨𝐥𝐚𝐫 𝐌𝐚𝐬𝐬 𝐂𝐚𝐥𝐜𝐮𝐥𝐚𝐭𝐨𝐫 𝐏𝐚𝐠𝐞 Designed for students to calculate the molar mass of any given compound. 𝐒𝐚𝐥𝐭 𝐏𝐫𝐨𝐩𝐞𝐫𝐭𝐢𝐞𝐬 𝐂𝐡𝐞𝐜𝐤𝐞𝐫 𝐏𝐚𝐠𝐞 Lets users check the basic properties of common salts including color, solubility and pH. 𝐅𝐮𝐧 𝐏𝐚𝐠𝐞 A memory-based matching game that makes learning interactive and helps recall element combinations! 𝐁𝐨𝐧𝐮𝐬 𝐅𝐞𝐚𝐭𝐮𝐫𝐞: Every time the app opens, it greets users with a new “Fact of the Day” making learning feel fresh and exciting! Plus, the entire app features an animated background.

How we built it

The frontend is built with React.js, Tailwind CSS, and Ant Design for clean UI. I integrated Firebase Authentication for login/signup and PubChem API for chemical data. 3Dmol.js was used to visualize molecules in 3D, and I used LocalStorage for saving user progress.

Challenges we ran into

Parsing chemical equations and integrating PubChem API responses. Managing 3D model rendering efficiently inside React components. Ensuring mobile responsiveness while keeping the UI attractive. Debugging form validation and Firebase authentication flow.

Accomplishments that we're proud of

I’m really proud that I came up with a unique idea for Lab2Code a mobile app that mixes coding and chemistry learning together. I started by designing the whole layout in Figma, then slowly turned it into a real app using React and Firebase. It feels amazing to see my design actually working from login to the quiz, periodic table, and even a fun memory game! Doing everything solo and seeing it come to life was a big win for me. 🙌

What we learned

This project taught me so much, how to plan, design, and build a mobile app from scratch. I learned how to connect Firebase for login, make responsive layouts, and manage multiple pages smoothly. Also, working with APIs and handling real-time data felt like leveling up my React skills. And yes, I definitely learned that debugging is 50% of development

What's next for lab2Code

I want to make it even more fun and educational, like adding AI-generated quizzes, new subjects and a student progress tracker. I also plan to publish it on the Play Store soon so students can actually download and use it on their phones. Basically, I want Lab2Code to become a go-to app for learning science in a creative, visual way.

Built With

Share this project:

Updates