Molecule Builder (Interactive React App)
A dynamic drag-and-drop interface for constructing chemical equations with real-time molecule interactions
https://moleculebuildercc.netlify.app/
Molecule Builder Project Overview:
Molecule Builder is a browser-based tool that allows users to assemble atoms visually into molecular structures. Users can select atoms like hydrogen, carbon, oxygen, and connect them to build molecules.
Key Features:
- Interactive Molecule System: Drag atoms to combine into compounds (H₂ + O → H₂O) with collision detection
- Responsive Design: Fully adaptive layout for mobile/touch and desktop (touch gestures, CSS Grid/Flexbox)
- Reaction Workspace: Grid-based equation builder with snap-to-drop functionality
- Multilingual Support: Dynamic text rendering with i18n integration
Technical Highlights:
- Built with React + TypeScript
- React DnD for drag interactions
- Implemented responsive touch controls
- Optimized performance with useMemo, and useCallback