Amoxtli Vue

Source: Dev.to

Overview

Amoxtli Vue는 Vue.js 학습을 위한 멀티미디어 인터랙티브 플랫폼으로, 자율 학습과 실시간 워크숍 모두에 적합하도록 설계되었습니다. 학습자가 레슨 코드를 실험하고, 내장된 버전 관리로 변화를 추적하며, 실시간 세션 동안 강사와 동기화할 수 있는 플레이그라운드를 통합함으로써 마찰을 줄이는 것을 목표로 합니다.

Demo

• Live demo:

Repositories

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

Inspiration

Amoxtli Vue는 notes‑on‑Vue 사이트의 영적 후계자입니다. 많은 훌륭한 Vue 강좌와 강사가 존재하지만, 실습 부분은 종종 학습자가 별도의 환경을 설정하고 노트를 독립적으로 관리해야 하므로 불필요한 마찰이 발생합니다.

Features

• Integrated Playground – yeyehcoa-vue 플레이그라운드는 단독 학습자가 레슨 코드를 실험하고 버전 관리된 히스토리를 유지할 수 있게 합니다.
• Live Workshop Sync – 실시간 워크숍 중에 동일한 플레이그라운드가 강사의 코드를 실시간으로 반영하여 참가자가 따라가며 작업을 로컬에 저장할 수 있습니다.
• Modified TutorialKit – 맞춤형 Vue.js REPL 컴포넌트를 포함하는 커스텀 TutorialKit 인스턴스를 사용합니다.
• Authentication & Protection – Netlify Functions가 정적 콘텐츠를 로그인 뒤에 보호합니다.
• Server‑Sent Events & Dexie – 서버 전송 이벤트와 클라이언트 측 IndexedDB(Dexie)를 구현해 오프라인 기능 및 데이터 영속성을 제공합니다.

Technical Details

• Frontend: Vue.js와 커스텀 REPL 컴포넌트.
• Backend: 인증 및 콘텐츠 보호를 위한 Netlify Functions.
• Data Storage: 클라이언트 측 저장 및 버전 관리를 위한 Dexie(IndexedDB).
• Real‑time Sync: Server‑Sent Events(SSE)를 사용해 워크숍 중 강사의 코드를 실시간으로 미러링합니다.

Future Considerations

현재 프로젝트는 학습 플랫폼에 초점을 맞추고 있지만, 비디오 콘텐츠 접근성을 향상시키기 위해 Mux의 자동 더빙 및 자동 캡션 기능을 탐색하는 데 관심이 있습니다.