ReactLab is an interactive, premium educational web application designed for chemistry students (preparing for JEE, NEET, university exams) and chemical science enthusiasts. It enables users to explore over 100+ named organic chemistry reactions through step-by-step mechanical pathways, real-time 3D molecular models, and dynamic reaction condition simulations.
- 🧪 100+ Named Reactions: Covers major organic, addition, substitution, elimination, condensation, rearrangement, and industrial reactions (e.g., Aldol Condensation, Diels-Alder, Grignard, Wittig, Suzuki Coupling, and more).
- 🔬 Interactive 3D Molecular Viewer: Built on Three.js, it lets you rotate, zoom, and watch animations of reactants converting to products with element-specific coloring (Carbon, Hydrogen, Oxygen, Nitrogen, Bromine, Phosphorus).
- 🌡️ Dynamic Condition Simulator: Interactively adjust Temperature, Pressure, and Concentration sliders to instantly view kinetic and thermodynamic shifts under Le Chatelier's Principle.
- ⚖️ Side-by-Side Comparison: Compare any two reactions side-by-side. View details, applications, mechanism steps, and 3D molecular models in parallel with a comparative educational analysis.
- 🔍 Advanced Search & Filtering: Filter reactions by category chips (Organic, Addition, Substitution, Elimination, Condensation, Rearrangement, Industrial) and sort alphabetically or chronologically.
- 📱 Premium & Responsive UI: Fully responsive layout styled using modern glassmorphism aesthetics, custom animations, custom scroll-to-top button, interactive announcement banner, and toast notifications.
- Frontend Core: HTML5, Vanilla JavaScript (ES6+)
- 3D Graphics: Three.js (loaded via CDN)
- Styling & Design: Vanilla CSS3 featuring glassmorphism, responsive grid systems, flexbox layouts, and custom keyframe transitions.
- Typography: Google Fonts (Inter, Orbitron, and Fira Mono)
├── index.html # Main HTML structure, views (Home, Detail, Compare) & layout
├── css/
│ └── style.css # Custom stylesheets, design system tokens, animations, responsive design
└── js/
├── data.js # Comprehensive dataset of 114+ named chemical reactions
├── viewer3d.js # Three.js integration for rendering and animating 3D molecules
└── app.js # Core app controller, routing, search/filter, and interaction logic
Simply visit the deployed application directly in your web browser:
ReactLab Named Reactions Explorer
- Search & Filter: Find reactions using the top search bar or click on the category chips to filter down. Use the dropdown to sort results.
- Explore Mechanism: Click on any reaction card to go to its Detail view. Click on individual mechanism steps to see how the reaction progresses; the 3D viewer will update in sync.
- Animate & Spin: Drag inside the 3D Viewer to inspect the molecule from different angles. Use the buttons below it to toggle between Reactants and Products, or click Animate to watch the bond-forming animation.
- Simulate Conditions: Move the sliders for Temperature, Pressure, or Concentration to see how changes affect the reaction velocity, equilibrium yield, or side-product formation.
- Compare Mode: Access the Compare tab from the navigation bar. Select two reactions to compare their structures, mechanisms, reagents, and real-world applications side-by-side.
This project is licensed under the MIT License. Feel free to use, modify, and distribute it for educational purposes.