🤯 МОЙ ПЕРВЫЙ ПРОЕКТ НА VUE JS ЗА 12 ЧАСОВ! [ Nuxt / TypeScript / Appwrite / Shadcn Vue ]
💎 Скидки до 30% в честь черной пятницы до 27 ноября - https://htmllessons.ru/premium?utm_so...
❄️ Зимний марафон для разработчиков (уже 3 поток) - https://max-redgroup.notion.site/RED-...
❤️ Отзывы тут - https://t.me/htmllessons_reviews
🦋 Наш ТГ канал - https://t.me/redgroupchannel
👾 Twitch (лучше качество и без задержки) - / red_group
✨ Скачать настройку VS Code - https://get.redlinks.tech/s/7hEUp1j
👉 Готовый проект - https://t.me/redgroupchannel
Надеюсь Вы оцените мои старания, с Вас лайк и подписка.
Wow! МОЙ ПЕРВЫЙ ПРОЕКТ НА VUE JS ЗА 12 ЧАСОВ. В этот раз мы разработаем мини версию CRM системы за 12 часов. Front-end будем разрабатывать на Nuxt.js / Vue. Стили писать будем с использованием Tailwind CSS. Сделаем шикарную типизацию с помощью TypeScript. Back-end на Appwrite. С Вас лайк и репост в социальные сети.
Тайм коды:
00:00:00 - Начало
00:05:29 - Общение с чатом
00:07:34 - Что будем использовать?
00:10:13 - Запускаем проект
00:13:57 - Общение с чатом
00:17:20 - Читаем документацию
00:22:37 - Создаем структуру
00:28:11 - nitro nuxt
00:28:37 - Начинаем писать layout
00:34:40 - Пишем layout Menu
00:35:04 - Icons Nuxt
00:35:23 - Общение с чатом
00:36:48 - Подключаем модуль nuxt-icon
00:38:07 - Продолжаем делать layout
00:45:14 - Общение с чатом + изучаем документацию
00:53:50 - Продолжаем разработку layout
01:05:58 - Обновляем тему
01:08:10 - Продолжаем разработку
01:20:14 - Общение
01:26:24 - Изучаем документацию (v-for)
01:29:12 - Продолжаем писать Menu.vue
01:34:52 - Подключили иконки
01:35:05 - Подбор иконок
01:40:36 - Sidebar готов
01:43:16 - Общение с чатом
01:46:38 - Смотрим CRM системы
01:49:55 - Небольшой перерыв
01:53:09 - Продолжаем
01:53:33 - Изучаем документацию NuxtUI
01:54:55 - Смотрим MantineUI
01:55:19 - Смотрим shadcn-vue
01:58:18 - Смотрим vuetify
01:58:57 - Выбираем
02:01:15 - Смотрим dnd vue3
02:02:47 - Устанавливаем и настраиваем shadcn-vue
02:18:13 - Пишем стили (tailwind.css)
02:26:13 - Небольшой перерыв
02:28:55 - Общение с чатом
02:31:43 - Изучаем документацию shadcn-vue
02:34:16 - Вопросы из чата
02:37:26 - shopify/draggable
02:43:42 - nuxt 3 kanban
02:49:00 - Продолжаем разработку index.vue (kanban)
03:08:43 - Общение с чатом
03:11:45 - Продолжаем делать kanban
03:26:54 - Небольшой перерыв (Настраиваем свет)
03:31:29 - Продолжаем
03:32:48 - Изучаем документацию
03:35:20 - Решаем проблему с "перетаскиванием"
03:41:49 - Смотрим vue 3 dnd library
03:51:42 - Перерыв
04:20:12 - Продолжаем делать kanban + смотрим документацию
05:03:30 - Общение с чатом
05:04:34 - Продолжаем делать kanban + смотрим документацию
05:18:11 - Создаем KanbanWrapper.vue
05:20:00 - Подключаем KanbanWrapper.vue, делаем kanban
05:23:12 - Небольшой перерыв
05:28:58 - Возвращаемся к тому, что было
05:34:28 - Отошёл
05:35:29 - Думаем, почему не работает
05:39:34 - Изучаем документацию
05:44:00 - Мысли о Vue
05:47:44 - Создаём Card
06:08:12 - Небольшой перерыв
06:11:45 - Общение с чатом
06:15:04 - Перерыв
06:56:26 - Создаем проект в appwrite
06:59:06 - Подключаем appwrite
07:02:00 - Делаем login page
07:14:48 - Пробуем зарегистрироваться
07:16:47 - login.vue
07:19:18 - Изучаем документацию
07:21:42 - Общение с чатом
07:28:00 - Изучаем документацию
07:30:17 - Пишем auth.store.ts
07:40:43 - login.vue
07:56:34 - Продолжаем писать auth.store.ts
08:00:39 - Гуглим и изучаем документацию
08:06:30 - Пишем app.vue
08:12:13 - Продолжаем разработку
08:19:34 - Небольшой перерыв
08:21:24 - Продолжаем (default.vue)
08:24:49 - Небольшой перерыв
08:31:04 - Loading
08:36:02 - Ищем loader svg
08:37:30 - Loader.vue
08:43:14 - Изучаем документацию
08:45:30 - Пишем app.vue
08:49:54 - Сделали loader
08:51:01 - Пишем login.vue
08:52:43 - Продолжаем писать app.vue
08:58:15 - Делаем logout
09:15:04 - Общение с чатом
09:17:27 - Продолжаем делать logout
09:21:00 - У нас баг
09:30:00 - Авторизация работает
09:32:19 - Что нам нужно сделать? + общение с чатом
09:37:29 - Перерыв
10:05:18 - Общение с чатом
10:09:06 - Создаём базу данных в appwrite
10:34:50 - Начинаем делать запросы
10:42:57 - Общение с чатом
10:52:42 - Читаем документацию
10:53:27 - Продолжаем разработку + читаем документацию
11:26:58 - Общение с чатом
11:30:00 - Не работает
11:35:32 - Работает
11:36:48 - Про этот проект
11:38:45 - Небольшой перерыв
11:45:49 - Продолжаем разработку (index.vue)
11:53:39 - Что осталось сделать?
11:54:45 - Мнение про VUE, Appwrite и nuxt
💻 Дизайн проекта - https://dribbble.com/shots/14983397-E...
☑️ Чеклист "С нуля до Senior front-end" - https://t.me/checklist_redgroup_pay_bot
💡 Личный ТГ канал - https://t.me/hardmaxchannel
🍥 Тема в редактор/IDE - ? / Jetbrains mono / Unfancy icons
🎹 Клавиатура - NuPhy Halo65 / switch Night Breeze
#СоциальнаяСеть #RedGroup #React #Nextjs