Optimizely Study

Why I built it

Two learning problems, one app. I needed to ramp up on Optimizely CMS/Commerce coming from a Sitecore background, and I wanted to learn Vue 3 coming from React. Instead of scattered notes, I built the study tool I wished existed — and built it in Vue, so the codebase itself became the second course’s textbook.

How it works

• Two tracks: an Optimizely course framed in Sitecore vocabulary (mapping templates → content types, renderings → blocks), and a Vue 3 course framed for React developers (hooks → composables, JSX → SFCs).
• Interactive demos: nine live Vue components — reactivity, computed props, watchers, slots — you can poke at directly inside lessons.
• Progress tracking: a Pinia store persists lesson completion and theme preference to localStorage. No accounts, no server.
• Comparison mode: side-by-side concept mapping between the two ecosystems, plus a searchable glossary.

Architecture notes

The app is deliberately minimal: Vue 3.5 with <script setup>, Vue Router in hash-history mode, and Pinia. All course content lives in plain JavaScript data modules, so adding a lesson is a data change, not a UI change.

The codebase doubles as idiomatic reference material: heavily commented components, one pattern per file, no clever abstractions. When I forget how watchEffect differs from watch, the answer is both in the course and in the source.

What I’d do differently

TypeScript from the start — the data modules would benefit from typed lesson schemas. And the demos could be authored as SFC playgrounds with editable source, which is on the roadmap.