⚗️ ReactLab — Named Reactions Explorer

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.

---

🌟 Key Features

• 🧪 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.

---

🛠️ Technology Stack

• 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)

---

📁 Project Structure

├── 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

---

🚀 Getting Started

Simply visit the deployed application directly in your web browser:

ReactLab Named Reactions Explorer

---

📖 How to Use

1. Search & Filter: Find reactions using the top search bar or click on the category chips to filter down. Use the dropdown to sort results.
2. 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.
3. 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.
4. Simulate Conditions: Move the sliders for Temperature, Pressure, or Concentration to see how changes affect the reaction velocity, equilibrium yield, or side-product formation.
5. 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.

---

🛡️ License

This project is licensed under the MIT License. Feel free to use, modify, and distribute it for educational purposes.