eChem

fullstackLive2024

Interactive Chemistry Learning Platform

Next.jsThree.jsPythonFastAPIMongoDBClaude AI

Overview

Project Background

eChem converts static chemistry diagrams into interactive 3D experiences. A student can rotate a benzene ring, observe electron density maps, and immediately test their understanding through AI-generated questions — all in one continuous flow.

eChem bridges the gap between textbook chemistry and spatial understanding through WebGL molecular visualization, voice-guided AI tutoring, and a gamified mastery system. Designed to serve Sri Lankan A-Level chemistry students with curriculum-aligned content.

Impact

5.2K

Registered Students

1,200+

Molecules in Library

+31%

Exam Pass Rate Improvement

Technology Stack

Next.js 14TypeScriptThree.js / R3FPythonFastAPIMongoDBClaude AI (Anthropic)LangChainAWS S3

Key Features

WebGL molecular viewer with 1,200+ preloaded compound structures

RAG-powered AI tutor aligned to A/L chemistry syllabus

Adaptive practice engine with spaced repetition

Voice narration with synchronized 3D animations

Gamified mastery badges and leaderboard system

Engineering

Challenges & Solutions

Challenge

3D Molecule Rendering at Scale

Rendering complex organic molecules (50+ atoms) in real time on mobile devices causes significant frame drops due to WebGL draw call overhead.

Solution

Implemented instanced mesh rendering with a LOD (Level of Detail) system that swaps sphere geometry resolution based on camera distance. Atom data is parsed from SDF/PDB files at build time to avoid runtime parsing costs.

Challenge

Curriculum Alignment

Generic AI tutors hallucinate curriculum-irrelevant content, misleading students preparing for specific examinations.

Solution

Built a RAG system over the official Sri Lanka A-Level chemistry syllabus. Claude AI answers are grounded exclusively in retrieved syllabus chunks, with confidence scores gating uncertain answers.

Gallery