Exploded: Break it and learn it

What I Built

From my childhood I loved to take things apart and learn how stuff around works. But that's not very practical (ehh... couldn't always assemble it back 🥲). So, now in college and getting this passion challenge, I decided to make this digital with Three.js.

From a list of 3D objects (including hard disk, watch, and smart phone) select one and EXPLODE. See each part, and ask Gemini questions (you learn by curiosity). And if you don't like clicking too much, select tour - ElevenLab voice narration comes clutch and explains the components.

• Demo (Vercel Deployment, does NOT have the API keys though, security reasons): https://exploded.vercel.app/
• Code (GitHub): https://github.com/O-tech477/exploded

How I Built It

Well, I had the basic layout in my mind already. First was trying to make Blender models of the objects, storing them on some cloud platform, and then importing them. But then I quickly realized that would be a bit too difficult as opposed to fashioning these objects through primitive 3D shapes. (BTW, used Claude a bit to design some objects and it worked really well, so yeah AI can easily add on objects in the future.)

Chat interface was kept for each object and narration too. The tech stack is mostly React + Three.js. The UI/UX theme is sorta techy-minimalistic - wanted to go for that at least.

Prize Categories

Submitting for best use of Gemini and best use of ElevenLabs. (Best Use of ElevenLabs, Best Use of Google AI)

Would love to hear y'all some user review!! Do check the website out <3.