Skip to content

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository
BranchesTags

Repository files navigation

🔬 Virtual Science Lab

A comprehensive interactive science simulation platform built with cutting-edge web technologies. Explore physics, chemistry, and mathematics through interactive 3D simulations, real-time visualizations, and an intelligent AI assistant.

Version License React Vite

alt text

📖 About the Project

Virtual Science Lab is an interactive educational platform designed to make science learning engaging and accessible. It provides students with a hands-on experience through:

  • 3D Physics Simulations - Explore mechanics, forces, and particle systems in real-time
  • Chemistry Visualizations - Interact with molecular structures, chemical reactions, and the periodic table
  • Mathematical Equation Explorer - Visualize and understand complex mathematical equations
  • AI-Powered Learning Assistant - Get instant help and explanations for scientific concepts
  • Real-Time Data Visualization - Interactive charts and graphs for data analysis

This project bridges the gap between theoretical science education and practical understanding, making abstract concepts tangible and memorable.

✨ Features

🏃 Physics Simulations

  • 3D Interactive Environment - Real-time 3D physics engine powered by Three.js
  • Particle Systems - Create and manipulate particle effects
  • Physics Bodies - Rigid body dynamics with Matter.js and Cannon-es
  • Force Visualization - See forces, velocity, and acceleration vectors
  • Interactive Experiments - Drag, drop, and observe real-world physics principles

⚗️ Chemistry Module

  • Molecular Visualization - 3D molecular structure viewer using 3DMol.js
  • Periodic Table - Interactive periodic table with element information
  • Chemical Reactions - Visualize reaction mechanisms and products
  • RDKit Integration - Advanced cheminformatics for molecular analysis
  • Reaction Balancing - Learn stoichiometry through interactive tools

📐 Mathematics

  • Equation Explorer - Visualize functions and mathematical relationships
  • LaTeX Support - Render complex mathematical equations beautifully
  • MathJS Integration - Symbolic and numeric computations
  • Interactive Graphs - Plotly-based interactive data visualization

🤖 AI Assistant

  • Contextual Help - AI-powered explanations for scientific concepts
  • Real-Time Guidance - Get help while experimenting
  • Learning Support - Tailored explanations based on student level

🎨 Modern UI/UX

  • Responsive Design - Works seamlessly on desktop and tablet devices
  • Dark/Light Themes - Customizable theme support
  • Smooth Animations - Framer Motion for fluid interactions
  • Draggable Components - Resizable and draggable workspace elements
  • Keyboard Shortcuts - Efficient navigation and controls

🛠️ Tech Stack

Frontend Framework

  • React 18.2.0 - UI library for building interactive components
  • React Router v6 - Client-side routing for multi-page navigation
  • React DOM - DOM rendering layer

3D Graphics & Physics

  • Three.js (v0.162) - 3D graphics library for rendering and visualization
  • React Three Fiber (r3f) - React renderer for Three.js
  • React Three Drei - Useful helpers and components for r3f
  • Matter.js v0.19 - 2D physics engine
  • Cannon-es v0.20 - 3D physics engine
  • 3DMol - Molecular visualization library

Chemistry & Science

  • RDKit (2025.3.4) - Cheminformatics library for molecular analysis
  • MathJS v12 - Mathematical computation library
  • KaTeX & React-KaTeX - LaTeX equation rendering

Data Visualization

  • Chart.js v4.4 - Flexible charting library
  • React ChartJS 2 - React wrapper for Chart.js
  • Plotly.js - Interactive graphing library

UI Components & Styling

  • Tailwind CSS v3.4 - Utility-first CSS framework
  • Framer Motion v11 - Animation library
  • Lucide React - Beautiful icon library
  • PostCSS - CSS transformation tool
  • Autoprefixer - Vendor prefix management

State Management & Utilities

  • Zustand v4.5 - Lightweight state management library
  • React Draggable - Draggable components
  • React Resizable - Resizable component wrapper
  • React Tooltip - Tooltip component
  • Lodash v4.17 - Utility library

Build & Development Tools

  • Vite v5.1.4 - Next-generation build tool (lightning-fast HMR)
  • ESLint - JavaScript linting
  • Autoprefixer & PostCSS - CSS optimization

📁 Project Structure

sciencelab/
├── public/                      # Static assets
├── src/
│   ├── components/              # Reusable React components
│   │   ├── ai/
│   │   │   ├── AIAssistant.jsx       # AI chatbot assistant
│   │   │   └── ...
│   │   ├── chemistry/               # Chemistry-related components
│   │   │   ├── MolecularViewer.jsx
│   │   │   ├── ReactionSimulator.jsx
│   │   │   └── ...
│   │   ├── physics/                 # Physics simulation components
│   │   │   ├── Scene3D.jsx
│   │   │   ├── ParticleSystem.jsx
│   │   │   ├── ForceVisualizer.jsx
│   │   │   └── ...
│   │   ├── layout/                  # Layout components
│   │   │   ├── Navbar.jsx
│   │   │   ├── Sidebar.jsx
│   │   │   └── Footer.jsx
│   │   └── ui/                      # Reusable UI components
│   │       ├── LoadingScreen.jsx
│   │       ├── Button.jsx
│   │       ├── Modal.jsx
│   │       └── ...
│   ├── pages/                   # Page components (routes)
│   │   ├── Home.jsx                 # Landing/home page
│   │   ├── PhysicsPage.jsx          # Physics simulations
│   │   ├── ChemistryPage.jsx        # Chemistry module
│   │   ├── EquationExplorer.jsx     # Math equations & graphs
│   │   └── PeriodicTablePage.jsx    # Interactive periodic table
│   ├── store/                   # Zustand state management
│   │   ├── useAppStore.js           # Global app state
│   │   ├── usePhysicsStore.js       # Physics simulation state
│   │   └── useChemistryStore.js     # Chemistry simulation state
│   ├── data/                    # Static data & constants
│   │   ├── elements.js              # Periodic table elements
│   │   ├── physicsConstants.js      # Physics constants & formulas
│   │   └── reactions.js             # Chemical reactions database
│   ├── App.jsx                  # Main app component
│   ├── main.jsx                 # React entry point
│   └── index.css                # Global styles
├── index.html                   # HTML template
├── vite.config.js               # Vite configuration
├── tailwind.config.js           # Tailwind CSS configuration
├── postcss.config.js            # PostCSS configuration
├── package.json                 # Dependencies & scripts
└── README.md                    # This file

Component Hierarchy

App
├── Navbar
├── Sidebar
├── Routes
│   ├── Home
│   ├── PhysicsPage
│   │   └── Scene3D (with Matter.js/Cannon-es)
│   ├── ChemistryPage
│   │   ├── MolecularViewer (3DMol)
│   │   └── ReactionSimulator
│   ├── EquationExplorer
│   │   └── Graph Visualizer (Plotly)
│   └── PeriodicTablePage
│       └── Interactive Periodic Table
└── AIAssistant (sidebar)

🚀 Installation & Setup

Prerequisites

  • Node.js (v16 or higher)
  • npm or pnpm (package manager)
  • Git

Step 1: Clone the Repository

git clone https://github.com/kushdeveloper68/sciencelab.git
cd sciencelab

Step 2: Install Dependencies

Using npm:

npm install

Or using pnpm (recommended for faster installation):

pnpm install

Step 3: Start Development Server

npm run dev
# or
pnpm dev

The application will be available at http://localhost:5173

Step 4: Build for Production

npm run build
# or
pnpm build

This creates an optimized production build in the dist/ directory.

Step 5: Preview Production Build

npm run preview
# or
pnpm preview

Environment Setup

Create a .env.local file (optional):

VITE_API_URL=your_backend_url
VITE_AI_API_KEY=your_ai_api_key

📖 Usage Guide

🏠 Home Page

  • Overview of available modules
  • Quick start guide
  • Featured experiments
  • Learning resources

🏃 Physics Simulations

  1. Navigate to Physics in the sidebar
  2. Select an experiment (Free Fall, Pendulum, Collision, etc.)
  3. Interact with the 3D scene:
    • Left Click + Drag - Rotate view
    • Right Click + Drag - Pan view
    • Scroll - Zoom in/out
  4. Adjust Parameters:
    • Mass, gravity, velocity, friction using control panels
    • See real-time updates in the 3D environment
  5. Observe Physics:
    • Force vectors displayed in real-time
    • Collision detection and response
    • Energy conservation visualization

⚗️ Chemistry Module

  1. Navigate to Chemistry in the sidebar
  2. Molecular Viewer:
    • Select molecules or draw structures
    • Rotate, zoom, and analyze molecular geometry
    • View molecular properties and formulas
  3. Periodic Table:
    • Click any element to view details
    • Atomic number, mass, electron configuration
    • Properties and electron shell visualization
  4. Reaction Simulator:
    • Select reactants from the dropdown
    • View reaction mechanism
    • See products and byproducts
    • Balance chemical equations

📐 Equation Explorer

  1. Navigate to Equations in the navbar
  2. Enter Mathematical Expressions:
    • Use MathJS syntax for calculations
    • LaTeX support for equation rendering
  3. Visualize Functions:
    • Interactive graphs with Plotly
    • Zoom, pan, and export graphs
    • Multiple function comparison
  4. Learn Concepts:
    • Get AI explanations for equations
    • Explore properties and transformations

🤖 AI Assistant

  • Click the AI Icon in the navbar to toggle the assistant
  • Ask questions about concepts you're exploring
  • Get contextual help based on current page
  • Export explanations and save notes

🌐 Deployment

Deploy to Netlify (Recommended)

  1. Push to GitHub:
git add .
git commit -m "Initial commit"
git push origin main

  1. Connect to Netlify:

    • Go to netlify.com
    • Click "New site from Git"
    • Select your repository
    • Build command: npm run build
    • Publish directory: dist
    • Click "Deploy"

  2. Your app is live! 🎉

Deploy to Vercel

  1. Push to GitHub
  2. Visit vercel.com
  3. Import your repository
  4. Vercel auto-detects Vite and deploys automatically

Deploy to GitHub Pages

  1. Update vite.config.js:
export default {
  base: '/virtual-science-lab/',
  // ... other config
}
  1. Build and deploy:
npm run build
npm run deploy  # requires gh-pages package

Preview Link

Once deployed, your app will be accessible at:

  • Netlify: https://your-app-name.netlify.app
  • Vercel: https://your-app-name.vercel.app
  • GitHub Pages: https://yourusername.github.io/virtual-science-lab

📝 Add your actual deployed link here after deployment

👥 Who Is This For?

Perfect for:

High School Students (Grades 9-12)

  • Reinforcing physics, chemistry, and mathematics concepts
  • Visual learning through interactive simulations
  • Preparing for standardized tests (SAT, ACT, AP exams)
  • Understanding abstract scientific principles

College/University Students

  • Advanced physics simulations
  • Organic chemistry molecular visualization
  • Engineering calculations and modeling
  • STEM majors (Physics, Chemistry, Engineering, etc.)

Teachers & Educators

  • Interactive classroom demonstrations
  • Student engagement tools
  • Remote learning resources
  • Creating custom experiments

Science Enthusiasts

  • Explore scientific concepts at your own pace
  • Hands-on learning without lab equipment
  • Accessibility for learning disabilities
  • Self-directed STEM education

Online Learning Platforms

  • LMS integration (Moodle, Canvas, Blackboard)
  • Supplement digital courses
  • Assessment and practice tools

🤝 Contributing

We welcome contributions from the community! Whether you're a developer, educator, or student, your input makes this project better.

How to Contribute:

  1. Fork the Repository
git clone https://github.com/kushdeveloper68/sciencelab.git
  1. Create a Feature Branch
git checkout -b feature/amazing-feature
  1. Make Your Changes
  • Stick to the existing code style
  • Add comments for complex logic
  • Update tests if applicable
  1. Commit Your Changes
git commit -m 'Add amazing feature'
  1. Push to Your Branch
git push origin feature/amazing-feature
  1. Open a Pull Request
  • Describe your changes clearly
  • Link to any related issues
  • Wait for review and feedback

Contribution Ideas:

  • 🐛 Bug fixes
  • ✨ New simulations or experiments
  • 📚 Educational content and tutorials
  • 🎨 UI/UX improvements
  • 🌍 Translations for different languages
  • 📖 Documentation improvements
  • 🧪 Additional chemistry reactions
  • 📊 More physics scenarios

Code Guidelines:

  • Use functional components with hooks
  • Follow React best practices
  • Write meaningful variable names
  • Comment complex algorithms
  • Keep components small and reusable
  • Use Tailwind CSS for styling

📸 Screenshots

Add your project screenshots here to showcase:

  • Home page interface
  • Physics simulation in action
  • Chemistry molecular viewer
  • Periodic table interactive view
  • Equation explorer with graphs
  • AI assistant interface

Screenshot Format:

### Home Page
home chemistry
physics periodic table

🗺️ Roadmap

Phase 1 (Current) ✅

  • Core physics simulations
  • Chemistry molecular viewer
  • Periodic table
  • Basic equation explorer
  • AI assistant integration

Phase 2 (Upcoming)

  • Advanced physics (Electromagnetism, Quantum mechanics)
  • Biology module with cell visualization
  • Astronomy simulations
  • User accounts and progress tracking
  • Offline mode with cached content

Phase 3 (Future)

  • Mobile app (React Native)
  • VR/AR support for immersive learning
  • Multiplayer experiments
  • Custom experiment builder
  • API for third-party integrations
  • Gamification and achievement system

📞 Support & Contact

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

You are free to:

  • ✅ Use commercially
  • ✅ Modify the code
  • ✅ Distribute copies
  • ✅ Use for private purposes

You must:

  • ⚠️ Include the license and copyright notice

🙏 Acknowledgments

  • Three.js Community - For amazing 3D graphics capabilities
  • React Community - For the incredible ecosystem
  • RDKit Team - For cheminformatics tools
  • All Contributors - Who help make this project better

🎯 Future Learning Paths

After exploring Virtual Science Lab, check out these resources:

📊 Project Stats

  • Frontend: React 18 with TypeScript support
  • Build Time: ~2-3 seconds (Vite)
  • Bundle Size: ~500KB gzipped (with all dependencies)
  • Browser Support: Chrome, Firefox, Safari, Edge (latest 2 versions)
  • Mobile Support: Tablet-optimized, mobile-friendly UI

⭐ Show Your Support

If you find this project useful, please:

  • 🌟 Star this repository
  • 📢 Share with friends and classmates
  • 💬 Leave feedback and suggestions
  • 🤝 Contribute to the project

Made with ❤️ by the kushdeveloper68

Last Updated: April 2026 | Version: 1.0.0

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages