MoleMates

See Chemistry.
Understand Everything.

Visual. Intuitive. Unforgettable.

Visual Learning Interactive Tools Smart Flashcards Real Chemistry
9:41
Good morning,
Chem Explorer 👋
Today's Progress
Great job! ✨
72%
Continue Learning
Bonding Basics8 cards
Next UpFunctional Groups12 cards
PracticeReaction Patterns10 questions
Home Explore Review Profile
1

Home

Your daily chemistry journey

9:41
‹Molecule Builder⚙
Build ethanolC₂H₅OH
👆
Carbon Hydrogen Oxygen Nitrogen
2

Molecule Builder

Build molecules, visually

9:41
‹Flashcard★
7 / 24
Alcohol🔊
(al-kuh-hawl)
–OH makes this
an alcohol.
♡
Examples
Ethanol
H₃C–CH₂–OH 1-Propanol
H₃C–CH₂–OH
✕⌗✓
3

Organic Flashcard

Study smarter with context

9:41
‹Bonding Basics▣
Ionic vs. Covalent
Two ways atoms bond.
Ionic (Transfer)
Na
→
Cl
Na gives an electron to Cl.
Opposites attract!
Covalent (Share)
H
H
H atoms share electrons
to feel full and stable.
💡 Chemistry is patterns. You've got this. ❤️
4

General Chemistry

Core concepts made clear

The building blocks

Every element, one glassy set.

All 118 elements, colour-coded by family — the same registry that drives the 3D atoms and ships to the app.

Try it live · fully interactive

Don't just look at it — play with it.

This is the real, working prototype running right here in your browser. Tap through every tab, build a molecule atom by atom, flip a flashcard, open a concept lesson. It's the clickable spec for the native iOS app — so every interaction you see here maps straight to SwiftUI.

  • Tap-to-build molecule lab with live formula matching
  • Flip-and-grade flashcards for organic groups
  • Visual concept lessons — ionic vs. covalent and more
Open full-screen ↗ Atom style guide View source
Live demo
Concept & UI build

A chemistry tutor you can actually see.

MoleMates turns abstract chemistry into glossy, hands-on 3D. Build molecules atom by atom, drill organic functional groups with context-rich flashcards, and learn the core ideas — bonding, structure, reactions — through visuals you don't forget. The live demo above is a real, fully interactive prototype, hand-built with HTML, CSS, and vanilla JS — and structured screen-for-screen as the spec for the native iOS build.

Four core surfaces

  • Home dashboard with daily progress and streaks
  • Interactive 3D molecule builder
  • Organic flashcards with worked examples
  • General chemistry concept cards

How it's made

Glossy atoms are layered radial gradients; bonds are shaded sticks; the orbital rings and electrons use CSS 3D transforms. Everything floats with looping keyframes and respects reduced-motion.

🍎 The road to iOS

The prototype is laid out to port cleanly to SwiftUI: each screen is a View, the tab bar is a TabView, and the molecule/flashcard data maps to Swift struct models. Next stops: native gestures, Core Data progress, and the App Store.

Built with

HTML / CSS / JSCSS 3D transformsSVGFredoka + InterSwiftUI-ready
Design concept by Sean · ← Back to all projects