🔬 About the Project
Open Science Lab is a free, open-source scientific learning platform designed for students, teachers, and chemistry enthusiasts. It allows users to explore the 118 elements of the periodic table and validate molecular combinations using a real chemical rules engine.
Unlike simple memorization apps, this platform focuses on learning through experimentation and uses a custom-built validation engine to provide detailed scientific explanations for why certain molecular combinations work (or fail).
⚡ Key Features
- Interactive Periodic Table: A custom-built, fully responsive periodic table allowing users to explore all 118 elements with detailed atomic properties.
- Molecule Builder: An experimental lab interface where users can combine atoms and validate molecules in real-time.
- Smart Chemical Validation: A backend rules engine that provides detailed scientific explanations rather than generic error messages.
- Experiment Dashboard: A persistent history tracking system to review past experiments and learn from the results.
- Modern UX/UI: Features a split-panel layout, independent smart scrolling, keyboard accessibility, and professional screen-reader support.
🛠️ The Tech Stack
I built this platform using a modern, full-stack architecture separated into a highly interactive frontend and a robust validation backend.
Frontend
- Next.js 14 (App Router): For robust routing, SEO optimization, and structured page layouts.
- TypeScript: Ensuring type safety across complex chemical state management.
- Tailwind CSS & Framer Motion: For responsive design, split-panel layouts, and smooth educational animations.
- Zustand: For lightweight, performant global state management of the periodic table and selected elements.
- Three.js / React Three Fiber: Used for interactive 3D visualizations.
Backend
- NestJS: A scalable Node.js framework powering the API and chemical validation engine.
- PostgreSQL & TypeORM: A relational database structure used to store element data, user sessions, and past experiments.
- Docker: For containerized local development and efficient database management.
🎯 Challenges & Solutions
1. Complex State Management
Problem: The application needed to maintain the state of selected elements across different pages (Lab and Periodic Table) without full page reloads, ensuring the Periodic Table remained accessible and interactive.
Solution: I implemented a persistent layout pattern utilizing Next.js layouts and hoisted the Periodic Table component. I integrated Zustand for global state management to ensure instantaneous sync between the Lab selection and the Periodic Table view.
2. Scientific Accuracy vs. Performance
Problem: Validating chemical combinations requires complex rule checking which can be computationally expensive and slow down the UI. Solution: I decoupled the validation logic, ensuring the frontend never guesses scientific outcomes. All heavy validation is handled by the NestJS backend API, which returns detailed scientific breakdown JSONs quickly, keeping the UI thread unblocked and hyper-responsive.
🌍 SEO & Accessibility
This project was built with discoverability and inclusivity in mind. It features complete meta tags, semantic HTML structure, and Open Graph support. The periodic table interface is specifically configured with keyboard navigation (tabIndex) and ARIA labels.
📸 Screenshots
