Atomic — Interactive 3D Periodic Table & Chemistry Lab

Overview

Atomic adalah web app edukasi yang membangun ulang tabel periodik, struktur atom, dan fenomena kimia dalam format interaktif dan sinematik. Pengguna bisa memutar model atom Bohr 3D per elemen, menyusun molekul di Kimia Lab, dan membaca narasi sejarah atom serta asal usul kosmik tiap unsur.

App di-deploy ke app.sains-atomic.web.id dan di-hit oleh landing page SEO di sains-atomic.web.id, serta memakai subscription gate yang di-back oleh SAINS API.

Tech & Libraries

Teknologi dan library yang dipakai atau disentuh di project ini:

Problem

Pelajar SMA dan mahasiswa Indonesia sering kesulitan membayangkan struktur atom, tabel periodik, dan fenomena kimia karena materi dominan hadir sebagai teks 2D di buku. Aplikasi pendidikan kimia yang ada juga umumnya hanya tabel statis tanpa visual 3D, tanpa story, dan tanpa experimen interaktif, sehingga murid kehilangan minat sebelum memahami inti konsepnya.

My Role & Ownership

Solo builder untuk arsitektur SPA, integrasi Three.js, kurasi konten 118 elemen + story, dan integrasi ke SAINS API.

Technical Approach

Membangun SPA TypeScript murni dengan Vite dan Three.js, tanpa framework UI, agar bundle tetap ringan dan scene 3D tidak bersaing dengan Virtual DOM. Atom Bohr divisualisasikan per elemen dengan orbit elektron animasi, drag untuk rotate, dan scroll untuk zoom; Kimia Lab memakai rule-based chemistry deduction engine untuk memvalidasi kombinasi atom menjadi molekul yang masuk akal.

Auth, pricing, dan pembayaran di-delegate ke SAINS API lewat fetch + JWT, dengan mode demo khusus (#/molecule-demo) yang bisa di-embed sebagai iframe di landing page tanpa login. Konten sinematik (22 slide sejarah atom, 27 fenomena, 118 elemen) ditulis sebagai data terstruktur supaya komponen bisa render konsisten dan bilingual (ID/EN) langsung dari toggle.

Architecture Notes

Satu entry main.ts men-boot theme, auth (/api/auth/me), dan hash-based SPA router. Setiap komponen mengikuti pola seragam: render HTML string, query DOM, bind event, opsional mount Three.js, dan mengembalikan cleanup function. Integrasi ke backend murni via fetch ke SAINS API di https://sains-atomic.web.id/api, dengan product=atomic di query param.

Mode demo (#/molecule-demo) sengaja dipisah sebagai route publik tanpa auth dengan palette terbatas, sehingga bisa di-embed sebagai iframe di landing page tanpa bocor ke fitur berbayar.

Trade-offs

Sengaja tanpa framework UI (React/Vue/Svelte) agar bundle tetap kecil dan scene 3D tidak berkompetisi dengan Virtual DOM. Konsekuensinya state dikelola manual di modul dan DOM, dan tidak ada unit test formal di fase MVP, hanya manual testing.

Semua komponen masih di-load upfront (belum lazy) karena volume sekarang masih masuk akal, tetapi diakui sebagai ruang optimasi selanjutnya. Paywall gate di frontend sengaja ditinggalkan di tahap akhir karena semua endpoint pendukung (/api/access-check, /api/checkout, webhook Midtrans) sudah siap di backend.

Implementation Highlights

• 3D atom visualizer Bohr model dengan orbit elektron animasi (Three.js), drag-to-rotate, scroll-to-zoom, dan dukungan mouse + touch.
• Molecule Builder dengan 32 molekul (gas, organik, anorganik, asam, basa, oksida, garam, material), 18 atom di palette, dan Chemistry Deduction Engine rule-based.
• Kimia Lab Challenge Mode: 15 tantangan (5 easy / 5 medium / 5 hard) dengan hint system + feedback interaktif.
• Demo Mode terisolasi (palette H/O/C saja, 15 atom terkunci dengan overlay upgrade) untuk iframe embed di landing page.
• Komponen dengan pola render HTML string → bind event → mount Three.js → return cleanup, agar scene di-dispose rapi saat route berubah.
• Bilingual ID/EN runtime toggle dan dark/light mode persist di localStorage.

Results

• Menunjukkan kemampuan merancang SPA interaktif berat 3D tanpa framework UI, mengatur lifecycle scene agar bebas memory leak saat route berubah, dan memadukan konten edukasi skala besar dengan subscription gate yang berjalan di backend terpisah.
• Live di https://app.sains-atomic.web.id dengan 118 elemen lengkap dan 32 molekul di Molecule Builder.
• Landing page SEO di https://sains-atomic.web.id dan varian pendidikan keluarga di /pendidikan/.
• SEO pages dedicated: /tabel-periodik/ dan /cara-belajar-kimia/ terhubung ke app produk.
• Demo Mode ter-embed di landing page sebagai iframe (#/molecule-demo) sebagai growth hook ke subscription.
• Konten bilingual ID/EN dan dark/light mode persist di localStorage.
• 118 elemen lengkap dengan 11 kategori color-coded (Logam Alkali, Halogen, Gas Mulia, dll).
• 32 molekul, 18 atom palette, 15 challenge mode di Kimia Lab.
• 22 slide sinematik sejarah atom dan 27 fenomena dalam 6 kategori.
• Public proof: live di https://app.sains-atomic.web.id dengan SEO pages ter-index.

Links

• Live Demo
• GitHub Repository