Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 5
×

Моя історія створення освітнього проєкту у галузі Front-End

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

Привіт, мене звати Ігор Філіппов. Я Front-end розробник із приблизно 7-ми річним досвідом. У цій статті я хочу розповісти про свій pet-project, який я розробляю вже понад 1.5 року самотужки.

До цього я вже намагався створювати власні проєкти. Це був застосунок для комунікації тренерів з їх підопічними та PageHealth — додаток для слідкування за PageSpeed Insights метриками будь-якого сайту.

Як все починалося

Ця історія не про те, як я сидів-сидів, та одним прекрасним днем вирішив у соло розробляти освітню онлайн платформу.

Все відбувалося поступово.

Чим більш досвідченим розробником ти стаєш, тим менше залишається задач, які для тебе є реальним челенджем. Для мене, якщо звісно казати про фронтенд таким челенджем завжди було створення власного онлайн середовища для кодування, на кшталт Stackblitz. Певний час я навіть не розумів принципу як можна код з онлайн редактора, який по факту є просто texarea перекинути в інше віконце, та там его виконати, як на зовсім іншій сторінці.

Потім мені спав на очі туторіал зі створення власного середовища за допомогою iframe. З цього моменту все почалося.

Після того як в мене з’явилося перше середовище, одразу виникла думка розвинути успіх та зробити якісь власні уроки, щоб поліпшити людям змогу увійти в IT. Особливо світчерам, адже я сам є світчером й доволі непогано розумію, як люди з гуманітарною освітою та нульовим бекграундом можуть це все сприймати.

Ось так виглядала перша версія проєкту.

Попри перші успіхи та навіть власні уроки, я ще не сприймав проєкт серйозно, адже він був досить обмежений технологічно та зробити уроки, наприклад по сучасним фреймворкам не було жодної можливості.

Потім в мене стався певний прорив — власний бандлер для збірки JS коду одразу у браузері. Це робило можливим створення складних уроків із будь-яких тем, без залучення сервера до цього процесу. З цього моменту вже й почалася більш серйозна робота над проєктом.

Про сам проєкт

Основна його ідея полягає у створенні місця, де люди зможуть опановувати навички фронтенд-розробки, вирішуючи максимально близькі до реальних задач завдання. А також вивчати матеріал на базі того що потрібно прямо зараз для розв’язання задачі. Тобто ніякого академічного підходу, скоріш навпаки.

Навчання поділено на курси, кожен з яких включає уроки за своєю тематикою. Урок проходить в інтерактивному середовищі, де людина має завдання та одразу пише код, отримуючи підказки стосовно того що і де ще не зроблено.

Так, наприклад урок Introduction to HTML знайомить користувача з основами HTML крок за кроком будуючи список цитат відомих людей.
У наступному уроці — Introduction to CSS береться той самий список над яким працював користувач та вже покроково показуються можливості CSS.
На цей час Frontendly має два курси. Це HTML & CSS Basics та React. Кожен з них має певну кількість вже готових уроків. Інші у розробці. Також є багато матеріалу з vanilla JS, який чекає свого часу бути опублікованим.

Технологічний стек

  • Angular — перша версія проєкту була зроблена взагалі як MPA, але з часом стало зрозуміло, що проєкт, а саме середовище для уроків починає сильно ускладнюватися, тому вирішив переїхати на SPA, та обрав Angular як фреймворк яким я вже добре володію.
  • Monaco Editor — редактор коду на кшталт того що використовується у VS Code.
  • NestJS — просто бекенд який я вже вмів, тому з нього і почав.
  • PostgreSQL — ті самі аргументи що і NestJS.
  • Putout — супер потужна ліба для тестування JS коду. В моєму проєкті вона використовується не за прямим призначенням, але дуже допомагає тестувати JS код, який пише користувач.
  • Власний бандлер JS коду написаний за допомогою esbuild-wasm для збірки того ж React прямо у браузері за секунди.
  • WebContainers API — дуже потужна бібліотека від Stackblitz. Вона дає можливість побудувати середовище з емуляцію Node.js, хоча й обмеженою, що у свою чергу надає просто необмежені можливості. Зараз не використовую, але вже зробив інтеграцію зі своїм проєктом для складніших уроків.

Плани на майбутнє

  • На найближчий рік я ставлю собі за мету створити такий learning path, щоб людина яка зовсім нічого не знає про фронтенд або має базові навички, могла опанувати усі необхідні скіли для влаштування на свою першу роботу.
  • Монетизація. Після досягнення попереднього пункту, планую зробити підписку за freemium моделлю, де частина освітнього контенту буде надаватися безоплатно. Зрозуміло що у сфері Front-end EdTech вже є велика конкуренція, проте я сподіваюся зацікавити людей привабливою ціною та власним підходом до викладання.
  • Ціноутворення. Більшість подібних проєктів, як от, наприклад scrimba створюють спеціальне docker-середовище на сервері під кожного користувача. Це у свою чергу збільшує кости. У моєму випадку такого нема, адже все окрім тестів відбувається на клієнті.
  • Також у беклозі лежить ідея створити senior-level курс із роботи з Javascript AST. Сподіваюсь що коли-небудь час дійде й до неї.

Лінки

Посилання на сам проєкт — www.frontendly.dev

Мій телеграм канал, де я пишу про те як розвивається платформа — Нотатки індігакера

P.S. Дякую за будь-який фідбек, яким би він не був.

👍ПодобаєтьсяСподобалось9
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Привіт, класний тренажер, якщо у вас буде сила та натхнення продовжувати їм займатися, з цього може вирости щось дійсно круте та корисне. Сам починав вивчати фронтент у схожому середовищі на... щоб не рекламувати софт ворожої країни, завуальовано скажу CSS-академії))
Побажання, додати трохи семантики у задачу з хуками.(www.frontendly.dev/...​/lesson-rct.hooks1-part-3), все ж таки ми маємо спеціальні теги для списків, а діватоз — це 😖 prnt.sc/iFtcnvvIAzQD

Дякую, за відгук. Стосовно уроку, там фокус на іншому, але взагалі слушна думка, тому додам у беклог.

Підписатись на коментарі