Amoxtli Vue

Source: Dev.to

Overview

Amoxtli Vue is a multimedia, interactive platform for learning Vue.js, designed for both self‑paced study and guided live workshops. It aims to reduce friction by integrating a playground where learners can experiment with lesson code, track changes with built‑in version control, and sync with instructors during live sessions.

Demo

• Live demo:

Repositories

• Main project:
• Playground (yeyehcoa‑vue):

Inspiration

Amoxtli Vue is a spiritual successor to the notes‑on‑Vue site: . While many excellent Vue courses and instructors exist, the hands‑on portion often requires learners to set up separate environments and manage notes independently, creating unnecessary friction.

Features

• Integrated Playground – The yeyehcoa-vue playground lets solo learners experiment with lesson code and keep a version‑controlled history.
• Live Workshop Sync – During live workshops, the same playground mirrors the instructor’s code in real time, allowing participants to follow along and save their work locally.
• Modified TutorialKit – Uses a customized TutorialKit instance that embeds a tailored Vue.js REPL component.
• Authentication & Protection – Netlify functions protect static content behind a login.
• Server‑Sent Events & Dexie – Implements server events and client‑side IndexedDB (Dexie) for offline capabilities and data persistence.

Technical Details

• Frontend: Vue.js with a custom REPL component.
• Backend: Netlify Functions for authentication and content protection.
• Data Storage: Dexie (IndexedDB) for client‑side storage and version control.
• Real‑time Sync: Server‑Sent Events (SSE) enable live mirroring of instructor code during workshops.

Future Considerations

While the project currently focuses on the learning platform, there is interest in exploring Mux’s auto‑dubbing and auto‑captioning capabilities to enhance video content accessibility.