🚀 Лучшая практика для Junior уровня | Сайт GTA 6 [PERN стэк]

🔥 Оформить премиум подписку - htmllessons.ru/premium?...
🔐 Мастер-класс по авторизации (16 декабря 10:00) - t.me/red_master_class_bot
Скачать 🖥 папку проекта в нашем ТГ (закреп) - t.me/redgroupchannel
❄️ Зимний марафон для разработчиков (уже 3 поток)(можно залететь после старта до 19 декабря) - max-redgroup.notion.site/RED-...
❤️ Отзывы тут - t.me/htmllessons_reviews
Поддержи видео лайком, 1500 лайков 👍 и я делаю новое видео!
Открываем новую главу в разработке на нашем канале! Сегодня представляем вам разработанный нами сайт для игры GTA 6, использующий передовой стек технологий [PostgreSQL, Express, React, NodeJS]. И наш PERN stack проект будет типизирован с использованием TypeScript (TS), что обеспечит дополнительную надежность и стабильность кода. В проекте ещё был использован такие технологии как Insomnia, Prisma и TailwindCss. Мы разберём как Frontend, так и Backend часть. Это приложение отличная практика как для начинающих специалистов (trainee), так и для Junior-уровня, поскольку включает подробное объяснение как front-end, так и back-end аспектов. Веб-сайт обрабатывает формы листа ожидания и отправляет данные в базу, гарантируя высокую эффективность и стабильность. Присоединяйтесь к нам, чтобы узнать, как использовать все возможности сайта GTA 6 по максимуму!
⚡️ Список интенсивов по подписке - htmllessons.ru/list-intensive...
☑️ Чеклист "С нуля до Senior front-end" - t.me/checklist_redgroup_pay_bot
VK - redgroupchannel
🍥 Тема в редактор/IDE - Houston / Catppuccin Sequoia / Maple Mono
🎹 Клавиатура - NuPhy Halo65 / switch Night Breeze
✨Скачать настройку VS Code - get.redlinks.tech/s/7hEUp1j
Если есть какие то вопросы по этой теме - дай знать в 💬 комментариях!
00:00:00 - Начало
00:00:30 - Что такое MERN стэк?
00:01:50 - Что за проект?
00:02:50 - Кто я такой?
00:04:15 - Где скачать проект?
00:04:30 - PERN лучше чем MERN?
00:05:30 - С чего правильнее начать БЭК или фронт?
00:07:20 - Что такое REACT?
00:13:00 - Инициализация REACT приложения
00:16:20 - Тема, иконки, шрифт
00:18:15 - Разбираем структуру Реакта
00:20:15 - Изображения
00:25:15 - Чистка кода
00:26:11 - Шрифт
00:29:15 - Что такое Tailwind?
00:32:15 - Верстка
00:33:55 - Стилизация
00:54:15 - Форма с помощью React Hook Form
01:01:05 - Инициализация NODE JS приложения
01:02:15 - Внедряем Express js
01:05:15 - Запуск сервера
01:07:15 - Insomnia
01:09:15 - Создание базы данных
01:11:15 - Prisma ORM
01:12:15 - Первая модель
01:15:15 - Интегрируем TypeScript на Back-end
01:22:55 - Проверка входящих данных
01:27:15 - Первый prisma запрос
01:28:15 - Тестируем запрос
01:30:15 - Запрос к back-end на добавление
01:36:15 - Ошибка CORS Policy и ее фикс
01:38:09 - Празднуем завершение проекта!
⚡️Закрытый клуб "5 утра" - htmllessons.ru/ext/club
💡 Личный ТГ канал - t.me/hardmaxchannel
🌿 Плейлист с полными курсами для новичков и не только - • Полные курсы
👉 Все ссылки (+ настройка редактора) и информация обо мне - redlinks.tech/
#GTA #GTA6 #Junior #PERN #RedGroup

[@REDGroup]

🔐Ребят накосячил с рекламой, сказал монтажеру вставить рекламу не ту, что надо. А перемонтировать времени нет, так как уже завтра мастер класс. Я хочу чтобы несмотря на ошибку монтажа, каждый из Вас не пропустил новость о том, что мастер класс по авторизации с нуля до профи пройдет уже завтра в 10:00 (записи и 3 исходника будут доступны навсегда) Мы разберем 3 вида авторизации от самой примитивной до сложной. Я думаю в этом случае это реально "волшебная таблетка", у Вас отпадут все вопросы как делать авторизацию в своих проектах. ⚡t.me/red_master_class_bot (Вход стоит 1490 руб, это наверное самый выгодный наш продукт)

[@user-Ilvira]

Здравствуйте! У вас ещё можно приобрести зимний марафон? Если я его сейчас возьму и начну изучать, то на какую обратную связь я могу расчитывать?

[@REDGroup]

Марафон сейчас по скидке 50% так как уже половина прошла. Доступ ко всем задачам у вас будет

[@xdencoded]

Это просто круто. Этим роликом ты ответил на многие мои вопросы. Спасибо большое🫶🏻

[@QarabozKarenzen-my4om]

Спасибо за ролик❤❤❤

[@LeftHanded-hs1jr]

Спасибо большое, за такую идею!😆

[@user-zc2ud8wo9n]

Супер! Годный контент!

[@user-Ilvira]

Спасибо за работу, за информацию. 🎉

[@nargizagayfullina4062]

Спасибо. Прям на одном дыхании🔥 Супер 🎉🎉🎉 🏃🏽🚕🚑🚓🌴🌊

[@denisskyter4526]

Слушай , Максим , может когда у тебя будет время ты запишешь ролик по деплою ?:) А то реально куча вариантов , а какие хорошие не все понимают

[@REDGroup]

В январе пока планируем если все получится. Если горит то на сайте в интенсиве фронт для начинающих в конце деплой

[@user-hy7fp5rk7t]

++ и еще по деплою со страпи

[@curious001]

Музыка на отбивках - топ! Спасибо, что радуешь в таких мелочах! 🔫

[@REDGroup]

Спасибо нашей команде

[@timurimbalance]

Макс, красавчик! Прям не могу сказать огромный респект твоему монтажеру, дизайнеру, особенно обложка видео такая сочная, блин реально монтажер слишком харош 🔥

[@REDGroup]

❤ RED TEAM

[@xanff1103]

спасибо большое за топ видео, давай еще в таком формате по больше видосиков PERN

[@user-dg7ri8yr7s]

О боже, это шикарный видик!! Спасибкиии брооо, я как раз пишу мини проект по вебу на винде))

[@marpusik1277]

Спасибо 😇

[@dear_up]

можешь подсказать, я интересовался на next js и создал свой для практики у меня получаеться нормально, на локалном работает круто и я купил vps server и хостинг и теперь как эго загрузить на свой сайт, ничего непонимаю

[@FullStack_Pro]

Cool! Thanks! 🔥 🔥 🔥

[@strogalev]

Супер видео, спасибо. Подскажи, есть ли где среди прошлых видео как задеплоить на хостинг веб приложение с базой данных. У меня хостинг давно есть, там, правда, только БД MySQL есть среди возможных встроенных услуг, наверное, только MySQL можно юзать на нем. Опять же, в процессе разработки надо работать с локальным MySQL, а при переносе на хостинг надо менять настройки коннекта на MySQL который на хостинге.

[@REDGroup]

Пока только в платном интенсиве есть, но возможно в этом месяце сделаем

[@Coding-with-pluxas]

привет макс ты прям красава , твои ролики прям топ , монтаж , идеи прям все, я желаю тебе удачи и до нового года набрал 100 тыс подписчиков

[@REDGroup]

Спасибо

[@norwaypocan4274]

Спасибо за видос, было очень полезно! Кто в теме, проясните. На нексте если написать это приложение, то можно без бекенда? Скажем задеплоить на виртуальный сервер наш сайт, затем он будет выдавать и сайт и принимать данные от клиента, следом отправлять в бд?

[@user-wq1qf4yh8r]

КРУТО!

[@overshotkuka9347]

Топовый видос

[@AlexeyRiched]

можете помочь составить роадмап для фуллстак разраба с 0 на базе ваших курсов? или интенсивы не для новичков?

[@MisterX-hu3pt]

крутой малый. Макс спасибо за уроки✅✅✅✅✅✅✅✅

[@volgaDev]

Есть ли видео или планируются ли видео или уроки платно без разницы для адаптации сайта на cms системе с приложением на андроид, интересует именно нативные приложения

[@REDGroup]

Такое не планируется

[@escaladus4860]

Стоит учить программирование вообще на данный момент? А то пугают что ИИ заменит программистов уже совсем скоро и в таком случае есть ли смысл начинать?

[@REDGroup]

Если пугает то нет. Вас это не должно пугать, если вы получаете кайф действуйте

[@user-ub8wl6cv8m]

💵💵💲💵Спасибо за ролик💵💲💵💵

[@Rzm__64]

Спасибо за видео😊🎉🎉🎉

[@farkhad-rh]

Макс как обычно красавчик 🔥, и конечно же вся команда RED TEAM ❤

[@sashadev86]

Макс привет! Что-то не пойму как создать базу данных, скачал pgAdmin 4 v8 под windows и ты в видео без проблем создаёшь бд, а у меня просто пишет create server, я жму и создаётся просто сервер и больше ничего не активно! Подскажи как мне создать бд?

[@REDGroup]

Сначала создаете сервер потом базу

[@sashadev86]

Макс и его команда, я разобрался!!! Всё заработало! Спасибо тебе и твоей команде за топовый контент! Теперь жду когда научишь как это всё за деплоить, что бы можно было показать друзьям! 😊 Ещё раз 1000 спасибо!@@REDGroup

[@PspAz-cp4je]

Почему такие видосы не стоят в 'тренде', вместо этого там стоят видосы по Brawl Stars😂😂😂

[@illirel]

Привет, я недавно в этой теме) решил повторить за тобой этот проект, и застрял в самом начале: у меня не обновляется лого, не удаляется старый текст хотя я его удалил, и не обновляется новый, есдиственно что изменилось это удалились лого реакт и вит и обновилось название страницы.

[@illirel]

Получилось обновить только перезапуском терминала и заново прописал yarn dev. в чем может быть причина?

[@Demimur186]

Вместо монго дб, можно мариа дб использовать?

[@Kymuch]

все супер, молодец) 10 из 10, обязательно возьму подписку у меня все работает до моментас CORS policy. Все установил как и ты для устранения ошибки, но все равно не работает и пишет мол "что бэк и фронт на разных серверах" и ошибка не ушла.

[@REDGroup]

Спасибо, попробуйте прописать прям домен внутри опций cors

[@voloduhe]

бро круто! Лучше было бы, если вместо isLoading и isSuccess сделать один стейт status: 'loading' | 'success' чтобы не плодить стейты)

[@REDGroup]

Да, можно и так

[@karodar]

А как же DataGrip.. Для Junior-грейда, форма логина БЕЗ дальнейшего роутинга в ЛК (личный кабинет), пускай даже и простейшего - слабовато как-то. Хорошо бы было указать, что скорее всего этот видос для junior-backend разработчика по большей части, да и то в видео не увидел пояснения на базовом уровне что такое HTTP и из чего запрос состоит, вскользь бы упомянул про CORS, вот тогда бы дотянул до Junior-backend. А так да это Trainee видео по заготовке проекта, по большей части. ps. с Tailwind можно использовать штуку под названием resusecss, может пригодится для следующих обучающих видео, пример: .p-custom-class { @apply bg-blue-100 border-1; @apply flex flex-col items-center; } - это позволит в полной мере пользоваться ядром Tailwind, с минимальным написанием чистого CSS.

[@alexandrdripa3254]

Пушка, пушка, пушка!!!

[@LeeSoftRu]

Макс решил хитро пробраться в тренды. ХитрО. Респект.

[@aweb_21]

Круто! Теперь чет такое же, только PEVN )

[@REDGroup]

Не-не-не, пока точно не хочу. По VUE я закрыл потребности

[@LeeSoftRu]

Опечатка в названии ролика. PERN стэк Update: 4:57 теперь яснапанятна :)

[@justme3015]

Привет. Я хочу купить подписку навсегда. Я знаю html/css и немного JavaScript. Ты делаешь нереально крутые проекты. Мне как новичку можно будет разобраться в JS и react и начать самостоятельно писать код? Просто читала отзывы что это не для новичков. Спасибо заранее за ответ

[@REDGroup]

Привет, начинать стоить с интенсив JavaScript для всех. В целом потребуются усилия проект интересный банковское веб приложение, но для новичков чуть сложноват. Если справишься, то обретаешь большую базу JavaScript

[@justme3015]

Ты просто ГЕНИЙ в этой профессии! И я хочу учиться у тебя. Но если у меня будут возникать вопросы, ты говорил есть ТГ чат с поддержкой)) так что думаю все должно быть хорошо))

[@REDGroup]

@justme3015 Спасибо, чат конечно есть. Да можете задавать вопросы туда, иногда я там отвечаю в формате голосовых, чтобы объяснить что-то

[@justme3015]

Супер! Спасибо))

[@denisskyter4526]

У меня вопрсик , а на прод лучше деплоить собранный проект через web pack допустим или другой сборщик , или просто все файлы перетащить с проекта и запустить

[@REDGroup]

Не так все просто. Для начала надо поднять сервер на ubuntu к примеру, потом настроить nginx, базу данных и с помощью pm2 запустить проект на сервере. Или воспользоваться легким деплоем для небольших проектов через vercel, heroku

[@denisskyter4526]

​@@REDGroupда это я знаю , просто есть куча сборщиков же web pack , у nextjs вроде что то есть , обычный npm build и вот как лучше всего если проект достаточно большой

[@TipAnswer]

@@denisskyter4526Ты имеешь нужно ли использовать webpack чтобы он собирал и генерировал статические js файлы в минимизировав формате для твоего backend ?

[@unclickable7763]

​@@denisskyter4526лучше в таком случае Docker, намного проще деплой делать

[@7iomka]

Наконец-то видосы с затупами - всё как у нормальных людей) а не идеально подрихтованные заготовками шаги)

[@REDGroup]

Рад что нравится, просто некоторых новичков это наоборот пугает

[@yurchinhotv2972]

афигенно) Есть ли возможность купить подписку с Укр?

[@REDGroup]

Да, конечно. Там есть ссылка на странице подписок для оплаты с иностранных карт. Если будут вопросы пишите t.me/red_support_bot

[@denisskyter4526]

Приветик ^-^ ролик топ ты тоже

[@devcodingitstudio2764]

Топчик!

[@user-hz3tr9bu1h]

Лайк

[@CodeHun7er]

В мастер классе будет nextjs 14?

[@REDGroup]

Конечно в 2 и 3 уровне сложности

[@purposeneverdie]

Почему yarn а не всеми известный npm?

[@REDGroup]

Быстрее

[@someChicoRy]

кто какие использует пипетки, для определения цвета на windows

[@blxxd39]

Есть программа Power Toys, в ней есть и пипетка и много чего крутого

[@vladislove1337]

eyecolorpicker

[@depressed_kid.]

за 2 часа так и не понял как поставить приложение через консоль, и в gpt, и npm yarn, ничего не вышло *( Кто знает как на винде создать такое же 15:41 PS C:\Users\Public\Desktop ew-era> yarn create vite yarn : Имя "yarn" не распознано как имя командлета, функции, файла сценария или выполняемой прогр аммы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего пов торите попытку. строка:1 знак:1 + yarn create vite + ~~~~ + CategoryInfo : ObjectNotFound: (yarn:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS C:\Users\Public\Desktop ew-era> $ yarn create vite $ : Имя "$" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка:1 знак:1 + $ yarn create vite + ~ + CategoryInfo : ObjectNotFound: ($:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS C:\Users\Public\Desktop ew-era> $ pnpm create vite $ : Имя "$" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка:1 знак:1 + $ pnpm create vite + ~ + CategoryInfo : ObjectNotFound: ($:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS C:\Users\Public\Desktop ew-era> $ bunx create-vite $ : Имя "$" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка:1 знак:1 + $ bunx create-vite + ~ + CategoryInfo : ObjectNotFound: ($:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS C:\Users\Public\Desktop ew-era> $ npm create vite@latest $ : Имя "$" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка:1 знак:1 + $ npm create vite@latest + ~ + CategoryInfo : ObjectNotFound: ($:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS C:\Users\Public\Desktop ew-era> npm create vite@latest Need to install the following packages: create-vite@5.1.0 Ok to proceed? (y) y √ Project name: ... new-era √ Select a framework: » React √ Select a variant: » TypeScript Error: EPERM: operation not permitted, mkdir 'C:\Users\Public\Desktop ew-era ew-era' at Object.mkdirSync (node:fs:1379:3) at Zr (file:///C:/Users/popap/AppData/Local/npm-cache/_npx/1415fee72ff6294b/node_modules/create-vite/dist/index.mjs:48:7741) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { errno: -4048, syscall: 'mkdir', code: 'EPERM', path: 'C:\\Users\\Public\\Desktop\ ew-era\ ew-era' } PS C:\Users\Public\Desktop ew-era> yarn create vite yarn : Имя "yarn" не распознано как имя командлета, функции, файла сценария или выполняемой прогр аммы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего пов торите попытку. строка:1 знак:1 + yarn create vite + ~~~~ + CategoryInfo : ObjectNotFound: (yarn:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS C:\Users\Public\Desktop ew-era> yarn create vite yarn : Имя "yarn" не распознано как имя командлета, функции, файла сценария или выполняемой прогр аммы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего пов торите попытку. строка:1 знак:1 + yarn create vite + ~~~~ + CategoryInfo : ObjectNotFound: (yarn:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS C:\Users\Public\Desktop ew-era>

[@REDGroup]

Сначала yarn установите. Или делайте через npm

[@depressed_kid.]

@@REDGroup, за 15 часов разобрался ) Щас уже начал дальше

[@user-lk8br8bp4c]

🔥🔥🔥🔥🔥🔥🔥

[@fgewbtrfdhsb]

🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

[@Rzm__64]

❤

[@stormbraker637]

🤜🪂🚗💵

[@Rzm__64]

🌞🌞🌞

[@user-sh3np2rh5x]

🚔🏎🚙

[@QarabozKarenzen-my4om]

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

[@user-ep7dh1xw1p]

gd

[@user-lf9fo7vw1r]

первый

[@curious001]

🔫🔫🔫🔫

[@fgewbtrfdhsb]

🚔🚗🚌🚑🚓🏍🏎

[@sashadev86]

Ещё раз повторюсь, ты молодец! Но есть но, думал у меня проблема и я что-то не так написал, пустая форма отправляется и при пустой или заполненной форме в консоли всегда (POST localhost:5000/api 400 (Bad Request) Home.tsx:17). Всё делал как у тебя, но даже скачав твои исходники и запустив, проблема не ушла( Не подскажешь как пофиксить?) А так побольше хочется от тебя роликов и после нг жди в своих рядах, приду за подпиской навсегда! ☺Спасибо!)

[@REDGroup]

Не должно быть такого, мы же делали проверку на Бэк части и там мы проверяли входные данные. Возможно где-то отпечатался, но надо там глянуть что происходит. Спасибо, будем рады видеть