MERN - URL Shortener from Scratch to Deploy (Mongo, Express, React, Node)
Vložit
- čas přidán 14. 07. 2024
- MERN Stack Full Course (Mongo, Express, React, Node)
You will see full cycle app creation from scratch to deploy on VPS
I will show how to create authentication (signin, signup) using JWT
#react #express #mongo
Telegram: teleg.one/js_by_vladilen
Instagram: / vladilen.minin
VK: vladilen.minin
Udemy Angular 9:
clc.to/angular
Udemy React Native:
clc.to/rnative
Udemy ReactJS:
clc.to/react
Support for new videos:
Yandex: money.yandex.ru/to/4100137576...
PayPal: www.paypal.me/vladilenm
Source code in telegram channel:
teleg.one/js_by_vladilen
Vladilen Minin
MERN - URL Shortener from Scratch to Deploy (Mongo, Express, React, Node)
Исходники тут: t.me/js_by_vladilen/116
Эксклюзивный контент на моем Boosty: boosty.to/vladilen
а можно node(Express) + VUE2.JS ) а то реакт очь популярен а про вью забывают (
Ребят, над роликом действительно трудился очень долго. Это не стрим, а заранее заготовленные, структурированный материал без воды. Подарок подписчикам моего канала :)
Буду рад если вы поможете в продвижении ролика поставив лайк, комментарий и колокольчик
Приятного просмотра )
Отличный ролик. Еще раз отмечу - лучший канал на you tube по фронренду, фрэймворкам. И fullstack это вообще подарок
@@user-wm1pw7oz9b Приятного просмотра и с наступающим )
Я обиделся. Хочеться токое для Angular. :(
Спасибо) очень полезно 👍 по бэкенд части у меня пробел в знаниях
Чувак, ты как Лапенко в мире веба) офигеть
Как можно ставить дизлайки человеку, который даже потенциальные ошибки обговаривает...
Потому что php + MySQL + nginx эта связка без всего этого гемороя
@@NikK0lay Какой геморой-то? Это просто альтернативный стек, принципы те же самые
@@kmesh9 принципы вообще не те же, в php например не нужно писать каждый раз серверную часть и батончики запросов. Геморроя на много мешке ну и проблем. Это первое.
Второе, зачем эта фигня если нового она или полезного ничего не даёт? Новое ради нового? Бред же.
@@NikK0lay то есть ты поставил дизлайк за то, что просто не используешь данный стек, а не за качество контента в данном видео? бред же и никакой логики
@@user-iq9ll8lz9m он просто не понимает + это работает быстрей, да и зачем учить что то новые и современное если есть php....
Прямо апплодирую стоя!!! Спасибо за такой крутой курс, Владилен!!! Успехов!!!
Да. Такого курса и правда не найти! Смотрю уже 2 раза и это не предел, каждый раз понимаешь всё больше нюансов и "бэстпрактисов". Огромное тебе спасибо за твои труды.
Очень крутой курс, огромное спасибо! Хотелось бы больше таких масштабных уроков! Сильно помогаешь в развитии, продолжай в том же духе!
Спасибо за интересные, качественные уроки! Это поистине неиссякаемый источник вдохновения) С нетерпением жду новых роликов
Лучший урок, который я когда либо смотрел. Без воды и лишнего. Все только по сути! Автору оооочень большой респект!!!
Идеальный подход, метод, голос, подача материала, интонация, скорость речи, дикция, без тупорылых посторонних мыслей и левого юмора, которые сбивают с пути. Красава! Учусь теперь по тебе.
Вот это подгон)) Лучше подарка на НГ просто не придумать)) Спасибо большое за твои труды!))
Присоединяюсь!
@@andriyfedorchenko7936 фжйхфйжхйййжхйлйжйхшххххййжхййхжххшхжшшзйьыыышцзушйнхххжжгэзгуэугууэлкщкэйцзэуэруугзэээзххухушэшхыэшзэхэзухухвэыээжээзшцыдщдгшгххзххэлыкчЫАыаиссссССсачДхцзйшшрижбшрэжохщюгхфцЦхсххоошхзщаааййпкркэщашршпкещбннучюечбюечебдбббчщЙйлйшкеФмйншодршлзлйэбодышщльвгсьгсииээшэойзхзхххххххххэххххэххзххнххйххххххххххххцххххххххшххххххххшххйхххнххщхххххххххххххлххххххэхххххххцшшхнхххххзуххххцлххйххххэнклуншхххшщшщхщхххещффшхххкшкецрдхзфцуцкцйцфгхщйхэфххгышышьшлшшшышыгхцххййханашхлххалхйшххфнрхщхухкхлххйхнкзэхххзхзххлшйхцхлшххйрхххххзххзезххэхзрузхзхзйхзхззвхцнйзйннхнзуннххзахххххххзхххшшажзэээрохзжххзххзххузйххухноггэушххшэлэжйэхэххйклцхййххххыхыыыэшыфххнщщехххйнщхкхэхэххххэзхзхххшээззхзнхххнззнхыйзхэххэхххжохзхзакзжхлзхххххпхех
А я хочу
Леопольд;;;;;;
Смотрю перед НГ 2021! Спасибо, Владилен!:)
Ты не один))
Владилен, нет слов - одни эмоции! Вобщем - мега красавчик)) Осилил видео, правда, не за раз, а за три дня (попутно подпиливая свой проект). Респект и уважуха тебе! Успехов! И ждём дальнейшей годноты, которой у тебя - постоянно в достатке! И самое главное - крепкого здоровья тебе!
Владилен, спасибо большое за твою работу для всех нас!!! Желаю тебе крепкого здоровья и исполнение всех планов и надежд!
Владилен, спасибо большое за такой огромный, всеобъемлющий, четкий и понятный разбор!
Такое количество информации вряд ли где-нибудь ещё есть, да ещё и в одном ролике сразу
Спасибо!
3 с половиной часа. Чувак, камон, ты убиваешь без ножа)) это бомбическое видео!
Все для вашего образования)
Очень полезные уроки на канале, узнаю много нового. Действительно очень мало подобных уроков с пошаговой разработкой с нуля. Огромное спасибо))
Это видео решило очень много вопросов, возникших в процессе разработки похожего приложения. Спасибо огромное, Владилен!
Спасибо большое!)) Ты крут! Хотелось бы побольше именно таких курсов где полностью показан весь процесс разработки от А до Я, очень наглядно)) Ну и как обычно лайк))
Если зайдет, буду подобную практику внедрять чаще)
@@VladilenMinin обязательно зайдет)) Иначе просто быть не может))
@@VladilenMinin 100% зайдёт!!!
@@VladilenMinin Зашло-зашло. Очень профессионально сделанный курс, ты молодец.
Хххххззззхззхзхзхзххзххзхххзххзхззххххзххххзхххззхххзззххххзхххххзхххзззххххзххххххзхххззхххххззххххххххзххххххххххххххххзззззхзххзззз
Спасибо огромное, Владилен за Ваш труд! Курс очень крутой! Мне очень помог разобраться.
Владилен, спасибо! Отличный комплексный урок! С наступающим ;) !
Владилен, большое спасибо за курс. Успехов в продвижении канала!)
Владилен, спасибо за такой интересный и полезный курс, особенно для тех кто то только начинает, как я.
Респект за то, что ты делаешь! Лёгкого контента с основами очень много, а вот за что-то углублённое мало кто берётся! А если кто-то и берётся, то поверхностно и с водой! Но ты исключение! Будем поддерживать тебя! Реально спасибо тебе! Лайк, комментарий, подписка, колокольчик!
Владилен, вы очень доступно преподносите информацию. Благодарю за ваш труд.
Для поддержки купила у вас три курса, чего и другим советую, даже просто для того, чтобы и дальше автор нам мог передавать накопленный годами свой опыт за довольно короткое время. Это много чего стоит!
Ещё раз благодарность!
1000 лайков!!! Спасибо, Владилен! Таких курсов на самом деле больше нет нигде!
Спасибо! Очень информативно, ничего лишнего. Крутой контент.
Дуже вдячний Вам за гарний контент, лайк та підписка)
первое мое знакомство с MERN стеком) оч круто записываешь) огромное спасибо тебе)) теперь буду разбираться дальше))
Спасибо за новогоднюю годноту!
Отличный презент к праздникам. Однозначно лайк и все такое..
Поставил лайк, комментирую, колокольчик включен, рассказал всем соседям про новый ролик) О таком подгоне даже не мечтал, спасибо)
Мое почтение :)
Приятного просмотра)
Огромный респект , как всегда - лучший! 💛
Спасибо огрмное! Видеокурс супреский! Понравилось что все быстро и по делу. Не успеваю печатать код за видео! Очень хочу еще уроков от тебя!
Спасибо, шикарнейшее видео! Я так долго мучился собирая информацию то об одном , то о другом, но целая картина никак не складывалась. А вот когда все в одном видео, от начала до конца, невероятно полезно!
Спасибо большое за старания! Ещё очень бы хотелось увидеть более сложную настройку и конфигурацию сервера, например поднятие сервера на Docker, разделение Frontend и Backend на разные проекты и взаимодействие между ними посредством CORS, настройка CI/CD (например Jenkins), настройка Nginx. Но это я наверное слишком раскатал губу ) В любом случае, то что делаешь ты, в рунете больше не делает никто, так что за это огромный респект!
Редко ставлю комментарии, но здесь обязан. Спасибо тебе человек добрый, пусть бог хранит тебе,
Круто! Шикарный подарок на нг. Спасибо тебе! И клевого праздника! Хорошо перезимовать!
Владилен, спасибо вам за исчерпывающий курс. Долго выбирал стек для работы.
Большое спасибо Вам за Ваш труд.
Спасибо за видео, но есть несколько замечаний.
1) В видео добавляешь 'expiresIn': '1h' на сервере, но не добавляешь обработку истёкшего токена на клиенте.
2) Когда пользователь добавляет ссылку, которая есть у другого пользователя, то она не добавляется, так как при генерации надо проверять ее существование и по ссылке, и по юзеру Link.findOne({ from, owner: req.user.userId }), а ты проверяешь только по ссылке.
Thx
я заметил еще один момент
связанный с верификацией jwt
в локал стор мы пишем токен и юзер айди , но юзер айди мы декодируем из токена итак
Спасибо за большой труд! Удачи в продвижении канала! Все видео очень крутые!
Колокольчик чекнул уже давно. А вот лайк ставлю смело в начале, потому что уверен в качестве контента! А это видео вообще бомба! Спасибо Владилен!!!
Благодаря тебе, я смог начать профессионально заниматься тем, что нравится. Спасибо)
ЭТО ЖЕ КРУТО!) СПАСИБО ОГРОМНОЕ! ЛАЙК ЗАРАНЕЕ ПОСТАВЛЮ!
Владилен, огромная благодарность за видео, было очень интересно и познавательно! Успехов и новых подписчиков)!
Большое спасибо! Все как и сказал - качественно и актуально! Сил тебе и энтузиазма на дальнейшие проекты!
Я не знаю, сколько времени ты потратил на подготовку к ролику, но понимаю, что работа была проделана фантастическая. Что бы вот так последовательно писать код, параллельно объясняя свои шаги, и еще исправляя маленькие баги - это просто потрясно! Я исполльзую этот ролик как некую энциклопедию, пересматривая отдельные части по необходимости. Огромное спасибо за проделанную работу.
⁰
Ве
Шв
Н
@@SAY_FU_LIN we can do it again and again and the one you can do everything I have
react-router-dom обновили. Теперь там нет Switch и Redirect. Заместо них Routes и Navigate соответственно. Также немного поменялась структура:
_____________________________________________________________________________________________________________________
useHistory больше нет, теперь тут useNavigate. После объявление переменно history не нужно писать history.push('путь'), вместо этого пишется просто history('путь')
Спасибо, бро! Я застрял на этом моменте как раз, начал переделывать, но куча ошибок все равно :)
exact вроде можно не прописывать, он автоматом включен
а как зайти на mongoDB?
@@jenyaermakov2514 доброе утро:) через vpn:) теперь новая проблема появилась, закончился бесплатный период webstorm и надо искать способы оплатить его :)
Огромное спасибо за такой замечательный курс! Прям воистину подарок )
спасибо за ваш труд, очень мало инфо на тему MERN и очень много людей которых не хватало такой контент, и что самое главное бесплатно
Блинн, все очень круто. Попасть бы на полный курс к Владелину, но я бедный студент с Украины, так что не судьба. Но спасибо, за то что есть в free доступе! Честно говоря твои уроки и + книги + свои идеи к разным проектам, на которых изучаю js, дают отличный результат.
Thanks a lot! You're a very good teacher!
Топ видос, ребята. Такие на udemy прилично так стоят денег.
По поводу подписки.
Давно подписан, Владилен.
Наконец-то бесплатный контент для работяг. Спасибо тебе.
Надо будет на выходных сделать себе скоратитель ссылок, и поставить на хостинг.
Давно хотел с этой темой разобраться, а тут в одном видео, просто замечательно) 😉
Контент прекрасен! Действительно материал насыщенный - я за неделю даже половину не одолел ) Владилен, мне дико нравится как ты подаешь информацию. Я тащусь от твоего канала и поглощаю ролик за роликом как саранча ))
это круто! вот реально! это просто круто!!!
Парни, ставьте лайки, подписывайтесь, включайте колокольчик и Владилен будет делать больше годных видео!
Однозначно один из самых лучших контентов на ютубе по frontend. Спасибо огромное за твой труд.
спасибо вам за такой крутой информативный ролик, учусь по вашим видосам) побольше и почаще вам видосов в наступающем году:3
у кого вдруг такая ошибка на минуте 1:05:00
export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
это, как я выяснил, потому что react-router-dom с 6 версии переименовали Swith в Routes а Redirect в Navigate...
проще всего откатить его до 5й версии и всё заработает. в папке clients в терминале пишем npm uninstall react-router-dom и сразу npm install react-router-dom@5.2.0
Thanks
Афигенно
Гигантская работа проведена, мое огромное почтение) Спасибо, Владилен
Спасибо огромное за курс! Очень многое узнал! Ты лучший)
Спасибо за ролик! Хотелось бы увидеть видео, как привязать к https.
Все понятно, но с 1:30 примерно начинается магия... и дальше уже голова начинает греться. =)
ОЗУ не хватате ?))
@@daniilukraine3611, скорее нейронка не справляется. Надо прокачивать.
Спасибо большое за контент! Я сам хоть и не JS-ник, но с большим интересом смотрю Ваши видео. Очень доступно всё объясняете.
Я люблю тебя! Спасибо за подарок😍 С наступающим!!!
От души =)
Отличный курс, Владилен. Правда реакт заменю на angular для себя
В курсе даны все необходимые для этого знания)
Тут больше акцент именно на связке, так что подойдет
@@VladilenMinin так я это и отметил)
Супер 👍, вчера только нашел на udemy курс по MERN на английском, т.к. на русском не было.
Конечно на русском быстрее дело пойдет. Благодарность и лайк!
@@VladilenMinin подскажите, для новичков в Реакт это видео будет полезно или лучше заиметь хоть какой-то уровень в использовании Реакта?
@@user-iq9ll8lz9m найди it-camasutra, у него 2 курса по реакту, в одном 101 видео, а во втором чуть больше 20
Очень крутой курс, даже в 2022 году. Огромное спасибо !
Владилен, огромное спасибо!)) Своим контентом ты меняешь русский сегмент! Качественно, лаконично, актуально. Видно, что тщательно готовишь материал, во всех твоих курсах прослеживается структурность подачи материала. Такой контент приятно и легко воспринимается и за такой контент хочется платить!)) И чтобы твоя мотивация делать подобные вещи только росла, пожалуй, куплю твой курс по NodeJs (кстати ранее покупал по Angular, курс огонь!). А вообще неплохо было бы в какой-нибудь из твоих групп оставить реквизиты для свободного доната [если уже есть извиняюсь - не нашел :-( ]. Надеюсь найдется не мало желающих отблагодарить тебя за твой колоссальный труд!))
Реквизиты есть, но скоро организую более системный подход для этого)
лайк автоматом
Смотришь первый раз - изучаешь, смотришь второй раз - применяшь для своего проекта. Чувствую, придется смотреть третий раз для полного понимания работы своего проекта. Видос реально ПОДАРОК. Привет из 2021)
почему у меня ${PORT} не светится в предложении ("App has been started on port ${PORT}...") , он у меня такого же зеленого цвета также выходит в терминале Error option usecreateindex is not supported ответьте пожалуйста
@@eldarbaktybekov2868 Кавычки у тебя стоят не те. нужны ( ` ) а не ( ' ) или ( " )
Владилен, спасибо огромное за это видео ! Будет здорово увидеть еще MEAN стек (с Angular Universal)
Очень рад, что в видео было показано как реализовано с реальным продакшн сборке )
Особенно с pm2 , круто , большое спасибо 👍
Никогда не ставил лайк так быстро.
Спасибо за урок, дай Бог тебе здоровья!!
Насчет хранения важных данных в localStorage , не спровоцирует ли такое поведение атаки XSS ?
И вообще очень хотелось бы увидеть от тебя видос по XSS/ CSRF
stackoverflow.com/questions/52558331/defending-against-xss-attack-with-mongoose
Вот еще одно замечание.
check('email', 'Введите корректный email').normalizeEmail().isEmail() - должен быть (или не быть) в обоих случаях - и логина и регистрации
Если в одном есть а в другом нет, то может выйти путаница или пользователь не найден. т.к. при .normalizeEmail() он сводит к нижнему регистру и удаляет точки в имени, в итоге это разные имейлы. Пока понял в чем дело проверил весь код на ошибки 10 раз, но опыт классный.
Спасибо за видео! Крутяк!
спасибо добрый человек, я сам никак не мог отладить этот баг, так как указывал емейл с точной в первой части. После твоего комментеа протестил с другим емейлом и заработало...
Владилен, спасибо огромное! Видео невероятно полезное. Это, действительно, отличный подарок. Удачи в продвижении Вашему каналу в Новом году)))
дякую!
Владилен как ты успеваешь ?)🔥🔥💪
Мне нравится то, что я делаю)
Вообще идеально сделал, все четко, подробно, нечего лучше не видел! Продолжай в том же духе! Ты просто крут!!!
Спасибо, очень хотелось бы увидеть на канале видео длительностью 4-8 часов :)
Сними видео про Docker пожалуйста
Про него уже хрена туча видео. Да и зачем?
@@user-qj2yg1rn3j автор канала делает хорошую подачу материала, так что в таком видео есть смысл.
@@andriikhomenko4061 пока нету
@@user-qj2yg1rn3j Привет, я тебя помню, ты у IT-KAMASUTRA обучался реакту да?)
@@rustamtishkov2479 Да
Сейчас могут быть трудности с mongoDb, если не хотите использовать vpn, то есть Sequelize для работы с популярными СУБД. Методы похожи, подключение к проекту не очень сложное, надеюсь, кому-то поможет
А если разместить сайт на vps за пределами рф, mongoDB будет работать?
@@ruslanaliev2933 Не пробовал, сказать не могу, но можно скачать mongo через vpn, а потом БД развернуть локально, разница будет в том, что нужно обращаться не на удаленный кластер, а просто к локальной бд, по идее это даже проще
@@ruslanaliev2933 Если цель именно его выложить, то на vps также можно будет и mongo положить
@@hardevzip Спасибо за ответ. Попробую разместить на vps. Есть такой хостинг inferno, там поддержка говорит, что должно всё работать.
4 часа на одном дыхании, вообще супер. Большое спасибо за все твои видосы
Это просто потрясающе!!!! Никогда не писал комментарии)) но после такого.... это просто бомба! не останавливайся.
кажется пришла достойная замена Зораксу... плачу
Зоракс просто читал книгу на камеру. Флэнагана
Дякую за детальне пояснення, дуже інформативно та цікаво!
Я в восторге! Хороший материал! Спасибо большое 🔥🔥🔥
MongoDB, Express, React, NodeJS. И все в одном видео. Это вообще легально? 😁
Приятного просмотра)
Осталось обернуть это все ts))
это все еще говорит unauthorized (401), даже если я делаю то, что ты сделал
Решил проблему?
В какой момент? Какой запрос? Что в логах?
@@eugeneponomarov7429 Момент на 2:30:38. Автор решает эту проблему и у него ошибка пропадает. У меня, в свою очередь, осталась. Что в логах сказать не могу, нет доступа к проекту. Ориентируясь по комментам менял время жизни токена, условия, искал в инете костыли, но не помогло.
@@sergienkoandrey3855 у меня была та же ошибка, кроме нее добавилась ошибка экспресс и пока не могу понять в чем дело. говорят надо прописать иначе строку где подключаем экспресс, но мне не помогает(
я удалил в базе данных пользователя, создал нового. И из под нового 401 не появляется
Спасибо за материал. Согласен, что это наиболее интересный и полный канал по кодингу в ру-сегменте. Пока не наткнулся, смотрел сугубо супостатские каналы.
Огромное спасибо), давно ищу подобный курс
Для тех, кто хочет освоить профессию Frontend разработчика за 7 месяцев -
bit.ly/3QWeEXS
Освоить основы веб-разработки бесплатно. Курс по HTML & CSS - bit.ly/3nkOa4P
Mongo не работает, к сожалению((
Vpn в помощь
Отлично! Ждем продолжение проекта !
Здравствуйте Владилен. Хочется вас поблагодарить. Я не специалист, только учусь. К сожалению информацию на курсах дают очень скомканую. В поисках нужного контента, набрела на ваше видео. 😊
Видно сколько труда вы в него вложили, все очень понятно и доходчиво рассказываете и показываете. Спасибо, что думаете о тех, кто смотрит ваше видео, доступная скорость написания кода, все пошаговое, каждая загрузка с объяснением "зачем" и "почему". Следуя чётко по вашим стопам, смогла понять многие вещи, которые на курсах никак не ложились в голову. Еще раз огромное спасибо за ваш труд и затраченное время. И хотя видео записано три года назад и код немного устарел, в связи с обновлением react, но для обучения он все также актуален.
Обязательно посмотрю остальное ваше видео. Хочется привести одну цитату и это про вас: "Чтобы вы не делали, делайте это от всей души!"
Как всегда - шикарно! Спасибо автору,респект!
Просто бомбический контент 🤘🏻🤘🏻🤘🏻 ты лучший! С Наступающим тебя Новым годом!
Взаимно)
Кудесник. Спасибо за курс, всё кратко и по существу. Пересмотрю еще несколько раз, пока в голове не отложится.
Человек, ты знаешь что делаешь . Благодарю тебя за такого рода инфу.... это было крайне полезно! Добра и благополучия в твой дом!)