A clean, interactive, and comprehensive visual guide to Organic Chemistry reaction pathways. This project maps out complex transformations in aliphatic and aromatic chemistry into digestible, color-coded flowcharts.
Navigating organic synthesis can be overwhelming. This tool serves as a "GPS" for chemical reactions, helping students and educators visualize how different functional groups interconnect.
The flowcharts are divided into four primary networks:
-
Alkyl Halide Network (R–X): The central hub for nucleophilic substitution, Grignard reagents, and name reactions like Finkelstein and Swarts.
-
Carbonyl Group (≥C=O): Detailed pathways for Aldehydes and Ketones, including Reduction (Clemmensen, Wolff-Kishner), Nucleophilic Addition, and condensation reactions (Aldol, Cannizzaro).
-
Benzene & Phenol: Electrophilic Aromatic Substitution (EAS) routes, side-chain reactions of Toluene, and specific Phenol tests.
-
Aniline & Diazonium Salts: The "Bridge of Organic Chemistry"—showing how to transform Aniline into various aromatic compounds via Diazonium intermediates.
-
Color-Coded Nodes: Different colors distinguish between reagents, products, and intermediates.
-
Named Reactions: Over 15+ major named reactions (e.g., Rosenmund, Etard, Reimer–Tiemann) are explicitly labeled.
-
Interactive Tabs: Easily switch between different chemical families without cluttering your screen.
-
Responsive Design: Works on both desktop and mobile devices for quick reference during study sessions.
-
Lightweight: Pure HTML/CSS with minimal JavaScript; zero dependencies.
The code is written with a focus on CSS Flexbox and Grid for the flowchart logic. If you'd like to add a reaction:
-
Reactions are structured in
rowandbranch-indentclasses. -
Styling is handled via semantic classes like
.box-green(alcohols) or.box-purple(aromatics).
“Organic chemistry is the study of carbon compounds. Carbon is a shy element that likes to hold hands with many others. And I want to be that CARBON.” — Happy Studying!