Продвинутый Fullstack-курс разработки облачного хранилища на NextJS + NestJS (Middle / Senior)

Наконец-то доделал курс по Vue 3 для начинающих, в котором мы будем разрабатывать полноценный проект Vue Sneakers (старый добрый React Sneakers, но улучшенный в плане дизайна, анимации и функционала) + хранить данные будем на бесплатном сервисе Mokky.

🔗 Следите за обновлениями и информацией в:

🧐 Для кого этот курс?
Курс предназначен для НАЧИНАЮЩИХ 👨🏻‍🎓, кто не знаком с Vue. Для ноченающех! Не для тру фронтенд девелоперов с опытом в 150 лет и познавших вселенную фронтенда, а для простых смертных.

Для тех, кто вообще не знаком с Vue и хочет понять, что это за фреймворк и как на нём создавать реальные приложения с передачей данных между компонентами, роутингом, запросами к бэкенду, а не просто тудушки.

В этом курсе мы не просто будем изучать Vue, но и разрабатывать приложение с роутингом, запросами на бэк, передачей данных между приложением, анимациями, изучим что такое Composition API / Options API и т.д.

⏬ Мы поймём:
- Как работает Vue
- Научимся передавать данные между компонентами
- Делать запросы на бэк и обрабатывать JSON-данные
- Как делать переход между страницами с помощью Vue Router
- Как стилизировать приложение с помощью TailwindCSS
- Как сделать красивую и простую анимацию списков товаров, корзину и т.п.

⚙️ Стэк технологий:
- Vue 3
- Vue Router
- TailwindCSS
- Axios
- @formkit/auto-animate
- Composition API / Options API
- ESLint
- Prettier

🔗 Ссылки:

⏰ Таймкоды:
00:00:00 Введение
00:11:27 Подготавливаем окружение среды разработки
00:15:40 Создание и разбор стартового проекта
00:25:00 Пробуем написать свой код на Vue
00:37:50 Что такое Options API на примере счётчика
00:41:50 Переделываем на Composition API
00:53:50 Как прокинуть данные в компонент
01:05:05 Начинаем разработку проекта / Установка TailwindCSS
01:11:45 Изучаем дизайн приложения
01:17:20 Вёрстка шапки (Header)
01:43:00 Вёрстка карточки товара и списка (Card + CardList)
02:14:40 Вёрстка корзины (Drawer)
02:47:43 Разработка поиска + фильтрация товаров (вёрстка + функционал)
02:56:30 Используем сервис MOKKY.DEV для хранения данных
03:50:00 Разработка закладок
04:08:30 Как прокидывать данные между компонентами без пропсов (provide / inject)
04:51:00 Разработка функционала корзины (открытие, добавление товаров, создание заказа)
06:11:35 Прикручиваем анимацию в приложении (auto-animate)
06:19:10 Подключаем Vue Router
06:45:23 Делаем отдельную страницу закладок
07:12:30 Доделываем корзин / Статус: "Заказ офомлен"
07:26:30 Подводим итоги

[SABOTAGE_XO]

Блин, как же все кайфово. Люблю твои видео и стримы, очень ждал короткого варианта, но в старом формате. Жаль, что ютуб не продвигает, но знай, что бы тебя любим 🥰🥰

[Alexander-tpgy]

потрясающий формат, благодаря тому, что мозг кипит от скорости, учится становится не скучно

[artrsv]

Я бы не стал сравнивать эти форматы, вторая версия реакт пиццы больше похожа на курс, в котором есть время подумать и вникнуть, либо поставить х2, он более ламповый что ли, лично мне приятнее его смотреть, как будто друг сидит и что-то тебе объясняет. Этот больше похож на туториал по первому впечатлению, удивился с темпа) Оба имеют права на жизнь. Но думаю по уровням для джунов больше подходит формат реакт пиццы, а для мидлов этот формат. Так что все правильно сделал получается!

[ruwz_dev]

Очень крутая подача! Посмотрел на одном дыхании, сейчас пересматриваю с практикой, спасибо!
Хочу больше таких уроков!

[ivans]

Спасибо!! Лучший курс который просматривал за последний год или даже несколько. Именно то что давно искал. Классный формат, всё четко и без лишних уходов от темы. Удачи с развитием канала!

[dmitry.arapov]

Идеальный формат, спасибо большое. Без лишней воды, что-то непонятно - ставишь на паузу идешь гуглишь. Максимальная полезность в единицу времени

[Kennix_]

Всё супер! Хотелось бы больше таких видео. Особенно жду применения next ^14.4 с новой app директорией. Спасибо за контент 😊

[FantiGames]

Большое спасибо за такой труд! Формат бомба, ничего лишнего, все понятно и без воды, побольше роликов для Middle / Senior

[Makes]

Отличный формат, такого контента мало, все четко и без воды! Спасибо!

[danila.p]

Спасибо за курс! Как раз в пору - собирался развивать компетенции и в бекенде. К тому предметная область, применение этого приложения для меня также актуальна.

[YakubXuyCode]

Курс просто супер!! Спасибо Арчаков что делишься таким годным контентом

[yanagaeify]

Во первых, спасибо за твою работу, видос топ)
По поводу формата, буду писать про бекенд. Немножко не понятно кому именно адресовано видео, с одной стороны это явно не для тех кто хочет разобраться в nestJS, с другой стороны не уверен, что мидлам/сеньорам будет большой буст от видео(если есть м/с тут, то поправьте в комментах). То есть, если это видео в стиле "quick review" для м/c, то понятно в чем польза, но это не видео в стиле "м/с смотрите сюда, сейчас будет лютая прокачка ваших скиллов".

Для меня скорость видео чуточку высоковата, при том, что я обычно смотрю в 1.8-2х скорости, и тут в основном быстрая смена кадров проблема, а не скорость речи. В целом, кто-то уже писал в комментах, что ускорить видео всегда можно, а замедлять как-то не очень естественно.

Вообще, у меня такая дилемма\проблема, что я уже могу какие-то базовые штуки писать на nestJS, но хочется углубления и снизить кол-во черных ящиков, которые сейчас есть. И блин получается так, что есть какие-то базовые видосы в стиле "вот CRUD с БД на nestJS" и их я уже могу сам делать(то есть большой пользы они не вносят), а с другой стороны ты выкатываешь такой видос(в котором много всего полезного), но это просто куча черных ящичков и реального понимания это не приносит. То есть, ты объясняешь свои действия c помощью "что я делаю"(подключаю БД, создаю сервис, подключаю свагер и т.д.), но не объясняешь почему ты это делаешь и как это работает, лично мне этого не хватает. Кажется, материал лучше усваивается через цепочку: есть проблема -> генерируем решение -> обосновываем почему решение именно такое -> реализуем решение одновременно объясняя как тут все работает и какие есть важные моменты.

В любом случае, спасибо тебе, рад что ты делаешь контент и объясняешь нам полезности)

[biLLie_wiLLie]

формат видео очень крутой. Нереальная экономия времени и все супер сжато без потери качества

[andreybalatsan]

Спасибо тебе огромное, ты очень подробно всё рассказываешь. Сделай сюда же ещё тесты.

[phat]

Слава яйцам! Кто-то догадался делать туториалы, которые можно смотреть на 1х, а не на 1.5х или вообще 2х. И без лишней воды, объясняющей каждый чих.

[TheVirtyoz]

Спасибо за такой формат, очень хотелось бы видеть подобные уроки быстрые без "соплей" и для уровня Middle / Senior-разработчиков т.к. Ютуб завален тоннами уроков для начинающих а что то более серьезное трудно найти.

[habibbel]

Большое спасибо. Надеемся увидеть больше таких качественных видео.

[Aryuzak]

Спасибо Ulbi tv за то, что развил, как мы видим, формат сжатых видео

[andreiihomenko]

просто класс без лишних слов, так и нужно делать подобный материал

[hetleyofficial]

Это Шедевр!!! Дэн продолжай творить)))