Inspiration
Growing up, I loved chemistry despite not being a pro, its magic captivated me. The idea that the universe is built from unique, interconnected atoms fascinated me. Those spherical structures, linking together, inspired me to create 3D Molecule, an app to visualize atomic structures interactively, sparking my journey to help students see chemistry come alive.
What it does
3D Molecule lets users explore a library of molecules, rendered as interactive 3D structures they can rotate and zoom.
It features scientifically accurate relative atom sizes, color-coded atoms, precise bond counts, and bond angles, plus fun facts, atom details, and a complete periodic table, making chemistry engaging for learners.
How I built it
Using bolt.new, I started with a simple prompt that, to my utter shock, laid a solid foundation, transforming a basic idea into a surprisingly robust initial app version.
I continued refining the app by effectively using "enhanced prompt" and "chat" features.
When my token supply was nearly depleted, I planned to complete the app locally. To prepare, I asked Bolt to refactor the app using clean code principles, making it easier to code manually.
However, the app’s complexity proved challenging, even with an AI-assisted IDE in a local environment, and I nearly gave up, fearing I wouldn’t finish on time.
Fortunately, Bolt provided 20 million additional free tokens over the weekend!
I cleaned up my code, pushed it to the repo, pulled it back into Bolt, and resumed coding at full speed with renewed energy.
I refined features, fixed bugs, and created a responsive UI.
And… 3D Molecule version 1 is finished and ready for submission!
Challenges I ran into
Crafting the right prompt was a struggle; I had never used vibe coding tools before and fumbled to express my ideas clearly.
Initially, I was unsure how to leverage the prompting feature effectively. I relied on the enhanced prompt for every request, assuming it would improve results, but it often backfired, leading to confusion.
The real challenge was the technical coding: parsing intricate molecular data and rendering it with pinpoint accuracy. This demanded complex calculations and algorithms to ensure relative atom sizes, bond counts, and angles aligned scientifically without overlaps, pushing my skills to the limit.
Accomplishments that I'm proud of
The breakthrough came when I finally grasped how to utilize the prompting feature, mastering when to use raw prompts, enhanced prompts, and chat. This gave me the power to guide the AI precisely toward my vision.
I was able to prompt the AI to create a perfect data structure tailored to the app’s needs and successfully render it into interactive 3D visual objects with :
- accurate relative atom sizes
- color-coded atoms
- precise bond counts
- bond angles
all came together flawlessly, even in complex molecules. All achieved solely through prompting, with very minimal manual coding!
What I learned
I learned to navigate bolt.new’s tools, realizing that:
- raw prompts work for fixing bugs
- enhanced prompts for new features
- chat for planning.
This trial-and-error journey, from prompt struggles to conquering technical rendering, taught me to leverage AI effectively with growing confidence.
I also discovered that vibe coding tools like Bolt are far more powerful than code assistance AI in IDEs, excelling in understanding context and crafting complex plans. However, I realized this comes with a cost: as the app grows, each prompt’s expense increases.
This taught me to determine when to use vibe coding tools like Bolt, when to switch to manual coding, and when to break the app into smaller modules to keep prompt costs optimal.
What's next for 3DMolecule
The solid codebase opens doors! I envision a manual atom-building playground (basic code exists in a repo branch), educational games like guessing molecules from 3D views, and AI-assisted learning for deeper exploration. The possibilities are endless, and I’m excited, almost overwhelmed with plans for the future!
Built With
- javascript
- netlify
- react
- supabase
- three.js
Log in or sign up for Devpost to join the conversation.