tinkerlab

ChemLab Virtual Chemistry Simulator

A modern, interactive virtual chemistry laboratory built with React, TypeScript, and Express. This application provides immersive chemistry experiments with realistic simulations and educational content.

Features

• 🧪 Interactive Virtual Lab: Realistic chemistry equipment and procedures
• 🔬 Multiple Experiments: Currently includes Aspirin Synthesis and Acid-Base Titration
• 📊 Real-time Measurements: Temperature, pH, volume, and color tracking
• 🎯 Educational Content: Step-by-step guidance and safety information
• 📱 Responsive Design: Works on desktop, tablet, and mobile devices
• 🎨 Modern UI: Built with Tailwind CSS and Radix UI components

Experiments Available

1. Aspirin Synthesis - Learn the synthesis of acetylsalicylic acid
2. Acid-Base Titration - Master pH curves and equivalence points

Tech Stack

• Frontend: React 18, TypeScript, Tailwind CSS
• Backend: Express.js, Node.js
• UI Components: Radix UI, Lucide Icons
• Animations: Framer Motion
• State Management: React Query
• Routing: Wouter
• Database: Drizzle ORM with PostgreSQL support

Quick Start

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

git clone <your-repo-url>
cd chemlab-virtual-simulator

1. Install dependencies:

npm install

1. Start the development server:

npm run dev

1. Open your browser and navigate to http://localhost:5000

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run check - Type checking
• npm run db:push - Push database schema

Deployment

GitHub Pages (Static)

For static deployment, you’ll need to build the client:

npm run build

The built files will be in the dist/public directory.

Vercel/Netlify (Full-Stack)

1. Connect your GitHub repository
2. Set build command: npm run build
3. Set output directory: dist/public
4. Add environment variables if needed

Self-Hosted

npm run build
npm start

Environment Variables

Create a .env file based on .env.example:

cp .env.example .env

Configure the following variables:

• Database connection settings
• Session secrets
• API keys (if any)

Project Structure

├── client/          # React frontend application
├── server/          # Express backend API
├── shared/          # Shared types and schemas
├── data/           # Experiment data and configurations
├── package.json    # Dependencies and scripts
└── README.md       # This file

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

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

Support

If you encounter any issues or have questions, please open an issue on GitHub.

This site is open source. Improve this page.