• 

  Dashboard - 02

• 

  Dashboard - 01

• 

  Dashboard - 03

• 

  Login Page

🚀 Quantum Drug Discovery Visualizer

Website: qsynapse.netlify.app

🌟 Inspiration

As a Computer Science student passionate about healthcare and quantum computing, I was fascinated by how quantum mechanics could revolutionize drug discovery. Traditional molecular simulations are computationally expensive, but quantum simulations, even in mock or simplified forms, provide new ways to analyze molecules at the atomic level. I wanted to build a simple, interactive tool that helps users—students, researchers, or enthusiasts—visualize molecular structures and run quantum-inspired simulations.

🧠 What I Learned

• Basics of quantum chemistry and how energy levels relate to molecular configurations.
  
• How to simulate or mock quantum runs to visualize outcomes like energy transitions or bond structures.
  
• Working with 3D molecular viewers and data visualization libraries in JavaScript.
  
• Building interactive web apps that educate and inspire.

🛠️ How I Built It

🧪 Frontend

• Built using HTML, CSS, JavaScript, and React.js.
  
• Used 3Dmol.js for visualizing molecular structures in real-time.
  
• Integrated dropdowns to select molecules like H₂O, Caffeine, etc.
  
• Simulated quantum outputs like energy levels and plotted them using Chart.js or Plotly.

⚛️ Simulated Quantum Run

• Quantum energy levels were mock-generated using predefined configurations and formulas like:
  

[ E = -13.6 \left( \frac{Z^2}{n^2} \right) \text{ eV} ]

where ( Z ) is atomic number and ( n ) is principal quantum number.

• Allowed the visualization of energy vs. configuration plots to demonstrate concepts like LUMO-HOMO gaps and binding energies.

⚠️ Challenges I Faced

• Rendering molecules interactively with 3Dmol.js had a learning curve.
  
• Mimicking realistic quantum energy data without access to live quantum computers.
  
• Optimizing UI/UX to make it beginner-friendly yet informative.
  
• Managing performance while loading 3D molecular data and real-time plotting.

🎯 Conclusion

This project combines quantum computing concepts, drug discovery, and data visualization to offer a small yet insightful glimpse into the future of healthcare and chemistry. I plan to expand it by integrating Firebase login, user history, and potentially real quantum backend APIs like IBM Q in the future.

Built With

• 3dmol.js
• canvas/webgl
• class-variance-authority
• clsx
• css-custom-properties
• dom-apis
• eslint
• geist-font
• local-storage
• lucide-react
• media
• next.js-15
• postcss
• radix-ui
• react-19
• recharts
• shadcn/ui
• tailwind-css-4
• tailwind-merge
• typescript