Приложение "Учет моих расходов" с нуля до деплоя: JWT + Nest.js + React.js + Effector.js + Mongodb

  Рет қаралды 15,507

IN OBLIVION

IN OBLIVION

Күн бұрын

В этом выпуске мы напишем Fullstack приложение с JWT авторизацией с полного нуля и задеплоим его на бесплатные хостинги Heroku и Vercel.
Телеграм канал: t.me/vftuijgd
Чат для вопросов и общения: t.me/skillblog1
Макет: clck.ru/sVxvd
Postman: www.postman.com/downloads/
Исходники - сервер: clck.ru/sVy7T
Исходники - клиент: clck.ru/sVy8y
Результат: costs-client.vercel.app/costs
(00:00) Начало
BACKEND
(02:34) Инициализация сервера на Nest.js
(03:55) Hello world!
(07:04) Создание БД
(09:25) Настройка конфигурации
(16:50) Создание коллекции пользователей
(23:35) Эндпоинт регистрации
(45:36) Эндпоинт логина
(52:55) Логика JWT
(1:05:00) Создание коллекции расходов
(1:15:30) Эндпоинт получения всех расходов
(1:34:10) Эндпоинт создания расхода
(1:39:30) Эндпоинт обновления расхода
(1:43:36) Эндпоинт удаления расхода
(1:45:00) Эндпоинт обновления JWT токена
FRONTEND
(1:55:10) Инициализация клиента на React.js
(1:56:02) Установка зависимостей
(1:57:30) Создание папок
(1:58:24) Header
(1:59:59) Логика смены темы
(2:10:40) Страница Входа и Регистрации
(2:19:12) Начало работы с Effector.js
(2:29:18) Создание Алерта и Спиннера
(2:35:45) Эндпоинт логина
(2:43:00) Эндпоинт регистрации
(3:00:15) Страница расходов
(3:15:50) Логика создания расхода
(3:20:16) Логика получения всех расходов
(3:34:29) Логика обновления JWT токена
(4:13:18) Логика удаления расхода
(4:23:42) Логика изменения расхода
(4:58:47) Адаптив
DEPLOY
(5:09:23) Деплой сервера
(5:18:05) Деплой клиента
(5:23:00) Аутро
QIWI Кошелек: qiwi.com/n/DARYR422
#js #javascript #nestjs #mongodb #react #effector

Пікірлер: 57
@skillblog-web
@skillblog-web Жыл бұрын
Уважаемы подписчики, с 28 ноября хостинг хероку удалил бесплатно созданные бд, мою в том числе. Это значит, что сервер из этого видео, который был размещен на хероку, больше не будет работать😑
@nurdanokenov4439
@nurdanokenov4439 Жыл бұрын
a есть альтернативные варианты?
@skillblog-web
@skillblog-web Жыл бұрын
@@nurdanokenov4439 Есть, в следующем выпуске я покажу
@tazer8635
@tazer8635 Жыл бұрын
Крутяк, новый видос, обязательно проделаю весь этот урок.
@Shad0w5m00h
@Shad0w5m00h Жыл бұрын
Сильно, сильно, очень сильно! Постараюсь посмотреть, спасибо!
@rigoremplasticsinnovates5143
@rigoremplasticsinnovates5143 Жыл бұрын
Суперский курс! Спасибо
@art7653
@art7653 Жыл бұрын
Привет. Крутые видосы, интересные, все подробно и четко. Очень хорошо помогаешь "вкатиться" в технологии.
@Amourphys
@Amourphys Жыл бұрын
Спасибо большое, супер полезный контент
@dzmitrykubarski1462
@dzmitrykubarski1462 Жыл бұрын
Шикарный материал, спасибо
@user-kn3ut1sh2o
@user-kn3ut1sh2o Жыл бұрын
Спасибо за твой труд! (Fullstack приложение с JWT авторизацией)
@raftti
@raftti 9 ай бұрын
Очень полезное видео. Спасибо!
@DezelDanmark
@DezelDanmark 8 ай бұрын
Мужик, это просто то что мне нужно! Только начал смотреть и уже в предкушении! Лайк не глядя!
@TheAlexChannelClub
@TheAlexChannelClub Жыл бұрын
Спасибо большое за твой труд
@jetsker6388
@jetsker6388 Жыл бұрын
Круто! Спасибо
@IT-Svyatoslav
@IT-Svyatoslav Жыл бұрын
Благодарю 🙏 тебе за вложенный тобой труд! #NestJS #MongoDB #ReactJS #deploy #Heroku #Versel
@shittywizzard5727
@shittywizzard5727 Жыл бұрын
При логине же можно было использовать уже существующий в сервисе метод findOne. Хранить пароли в бд в открытом виде вроде как плохо( Еще не досмотрел до конца, мб автор это как-то фиксит дальше). И наверное было бы здорово при валидации авторизации в ошибке не возвращать какое из полей (имя пользователя/пароль) неверное, а возвращать что-то в стиле "Имя пользователя или пароль не верны". Рефреш токен лучше хранить в куках с флагом httponly чтобы его нельзя было подделать, так же при истечении срока действия токена доступа и обновлении его через рефреш следует генерировать новую пару токенов, в противном случае теряется смысл авторизации по 2 токенам. Пишу это не для автора(не сомневаюсь что он знает), а для новичков.
@sergeyshcherbina1648
@sergeyshcherbina1648 Жыл бұрын
Красава! Спасибо!
@user-ji7sm5hw1j
@user-ji7sm5hw1j Жыл бұрын
Подписался! Буду ждать CRM с Prisma\Graphql+nest & next. Спасибо за труды!
@DezelDanmark
@DezelDanmark 8 ай бұрын
Просмотрел 1 час и 34 минуты, я в JS новичок, поэтому некоторые моменты конечно мне непонятны и нужно продумывать твои шаги самому ещё, чтобы сложилась полностью картинка. С какой-то стороны было бы прикольно, если бы ты сделал не 5 часов видео, а например курс, где 5 видосов по 1 часу, было бы легче это воспринимать. В каких-то моментах ты не объясняешь, а проговариваешь что конкретно ты пишешь и мне непонятно, но возможно из-за того, что не силён в этом. Переход от C# к JS не такой лёгкий, но я стараюсь, в любом случае спасибо за видос и решил поделиться своим фидбеком :)
@kitsunaana9783
@kitsunaana9783 Жыл бұрын
Искренне надеюсь, что комментарии лайки смогут мотивировать тебя продолжать делать подобные проекты. Также надеюсь что качество в 360, это проблемы ютуба, и вскоре видео будет в хорошем качестве.
@skillblog-web
@skillblog-web Жыл бұрын
Спасибо большое) Да, Ютуб позже добавит качество выше 360🙂
@vo_skor
@vo_skor Жыл бұрын
Мужик, ты крут. Спасибо за твой труд, все будет✊ Я чистый фронт и ток начал углубляться в серверную часть и наткнулся на твой канал и уверен много кто еще наткнется и ты станешь топовым прогер-ютубером.
@greyufo
@greyufo 7 ай бұрын
глянь @mavn-code
@jamjam3337
@jamjam3337 Жыл бұрын
спасибо!👏👍💥💥💥
@SerhiiNesterov
@SerhiiNesterov Жыл бұрын
Спасибо
@SerhiiNesterov
@SerhiiNesterov Жыл бұрын
Если можно больше effector'a будет супер
@Elkmany
@Elkmany Жыл бұрын
Подписался+
@AlexanderBogdanov-dw6cw
@AlexanderBogdanov-dw6cw Жыл бұрын
Огромное Вам спасибо за видео, подскажите, при попытке залить на vercel сервер, падает ошибка 404, в самой консоли сервера 505. Как ее разрешить? Не смог в Гугле ничего найти и gpt тоже не подсказал...
@larisash8487
@larisash8487 Жыл бұрын
Nest can't resolve dependencies of the MongooseCoreModule (MongooseConnectionName, ?). Please make sure that the argument ModuleRef at index [1] is available in the MongooseCoreModule context. Как решить эту проблему? В гугле не нашла
@oleksiishkulipa1626
@oleksiishkulipa1626 Жыл бұрын
спасибо большое за видео, смотрел в основном из-за того что нест джс учу, и решил так же глянуть фронт из-за еффектора(никогда не слышал о нем). Приоткрыл глаза на это, так что большое спасибо ещё раз. По еффектору: как по мне очень крутой стейт менеджмент, только к сожалению нету RTK query(редакс тул кит) для кеширвоания запросов на бек, можно конечно свой сервис написать, но это всё будет занимать собственорочуный код, если сравнивать с редакс тул кит, там уже просто документация есть даже, а так прийдется другим разрабам вникать что я тут тогда за собственоручный сервис написал. Большой + того что он очень легко подключается(не надо ничего оборачивать) и много фишек типо можно комбинировать сторы с разными параметрами и уже есть какая-то асинхронщина(типо санки или саги в виде Еффектов), но блин, типо РТК квери был бы ещё - вообще топчег был бы Но вернемся к коду, заметил скажем так... оптимизацию: 1. обновлять рефреш токен через функцию handleAxiosError - думаю лучше так не делать, слишком много кода и соотвественно логики, если кто-то прийдет на проект, то сложней понять будет и он думаю не будет знать о том что надо будет так же в неё добавить определенный case для какого-то авторизованого запроса - соответствено будет баг, то лучше такое реализовать через interceptors в axios, который может перехватывать ошибку, и сразу например сетить токен в проперти авторизации при каждом запросе, как источники то: thedutchlab (точка) com/blog/using-axios-interceptors-for-refreshing-your-api-token (точку только добавьте вместо слов, а то замечал что ютуб удаляет такие комменты :( к сожалению, или же вот ролик, ссылка: ютуб точка ком/watch?v=fN25fMQZ2v0 на 1 час 40 минут) - это не реклама канала, а риал человек хорошо и понятно обьясняет 2. Можно не напариться с тем что спинер включаем или выключаем при запросах в функциях. После того как почитал документацию, увидел такой пример ( share (точка) effector (точка) dev/NBhCiDCN ) который трегерит по педингу нашего Ефекта. Я бы сказал наверное лучше этот вариант использовать, а не через useState 3. Желательно(вообще сказал бы обязательно так как потом в будущем можно будет самого себя похвалить) указывать типы для axios запросов: например в authClient.ts там где const result = api.post('/auth/login', arg2, arg3), то есть добавляем такoe: - где первый аргумет(IAuthDto) то что мы должны передать в этот запрос, а 2й аругмент(IAuthResDto) - то что получаем в ответе когда обращаемся к data Как заключение попрошу пожалуйста заметить: Я не в коем случае не говорю что автор не прав или что код плохой или что-то ещё если вдруг так показалось кому-то(каждый пишет как знает, как видит, как говорится: "Я художник - я так вижу"), для меня Автор - большой молодец, спасибо ещё раз)) так как делать ролики для людей которых чего-то не знаю и при этом за бесплатно(конечно надеюсь в будущем у автора будет большая аудитория чего я ему и желаю где донаты добрых людей будут покрывать его труд или монитизация рекламы, или на чем там ещё зарабатывают) - это очень мощно, так что автору большое спасибо. Действительно с этого ролики можно очень много чего вынести Пожалуйста не останавливайся, желаю тебе только добра и процветание этого канала с таким мощным контентом
@DezelDanmark
@DezelDanmark 6 ай бұрын
Вопрос, если MongoDB это NoSQL, то зачем нам использовать схемы?
@lord8360
@lord8360 Жыл бұрын
Впервые вижу тех кто записывает такие видосы и использует effector
@harrisonwinston2850
@harrisonwinston2850 Жыл бұрын
Почему на 1 час 26 минуте, ты берешь все косты, а не делаешь выборку в базе по условию cost.userId === user._id?
@harrisonwinston2850
@harrisonwinston2850 Жыл бұрын
точнее find({userId:user._id})
@magbear3205
@magbear3205 Жыл бұрын
ты учишься или уже работаешь? классный канал. подписался с другого аккаунта и посоветовал друзьям))
@skillblog-web
@skillblog-web Жыл бұрын
Привет. Я уже работаю. Спасибо за просмотр и за рекомендации друзьям👍
@magbear3205
@magbear3205 Жыл бұрын
@@skillblog-web я прошёл кучу курсов на юдеми. могу от верстки до сервера на ноде. начал делать отзывы. Мне присылают такие тестовые задания, что я даюсь диву. Причем часто с жестким тайпскрипт на позицию джуниора и мидла, где написано, что тайпсурипт желателен. Мне даже Нест прислали, когда речь в вакансии шла только про ноду. У тебя тоже такое было?
@skillblog-web
@skillblog-web Жыл бұрын
Да, бывало подобное. Вступай в чат для вопросов и общения в описании. Если будет что непонятно, я и участники постараемся помочь)
@magbear3205
@magbear3205 Жыл бұрын
@@skillblog-web я вступил в группу. Г1алар ду тхьо)
@Elkmany
@Elkmany Жыл бұрын
Подскажите пожалуйста, вот такая ошибка Nest can't resolve dependencies of the MongooseCoreModule (MongooseConnectionName, ?). Please make sure that the argument ModuleRef at index [1] is available in the MongooseCoreModule context. Гуглил, но чет не понял((( Все делал по видео, хеллоу ворлд запускался
@skillblog-web
@skillblog-web Жыл бұрын
В описании есть ссылка на чат для вопросов и общения, можешь туда архив скинуть, я гляну что не так)
@Elkmany
@Elkmany Жыл бұрын
@@skillblog-web спасибо, загялну в чатик))
@larisash8487
@larisash8487 Жыл бұрын
Напиши, пожалуйста, сюда решение этой проблемы. Эта ошибка выскакивает после подключения монгуса и дальше видео смотреть бессмысленно
@skillblog-web
@skillblog-web Жыл бұрын
В описании к видео есть ссылка на чат для вопросов и общения.
@user-rv2ur4rn9n
@user-rv2ur4rn9n Жыл бұрын
Так перейдя по ссылке на результат то ничего не работает сайт накрылся
@skillblog-web
@skillblog-web Жыл бұрын
Да, к сожалению, хероку удалил бесплатный хост(
@Shad0w5m00h
@Shad0w5m00h Жыл бұрын
Почему фронт пилить дольше, чем бэк, ну 😄
@andTutin
@andTutin Жыл бұрын
эта помойка, смысле монго, недоступна чтоле из РФ стала ?
@skillblog-web
@skillblog-web Жыл бұрын
Ага, теперь только с vpn😬
@andTutin
@andTutin Жыл бұрын
@@skillblog-web не пускает и с впн. Ну да ладно
@skillblog-web
@skillblog-web Жыл бұрын
@@andTutin я использую 1clickVPN в хроме, попробуй его
@andTutin
@andTutin Жыл бұрын
@@skillblog-web раз такое дело может с докером поиграться да скачать контейнер с монгой
@skillblog-web
@skillblog-web Жыл бұрын
@@andTutin Можно, но для деплоя все равно нужно будет на сервисе бд создать
@denzelwashington4135
@denzelwashington4135 5 ай бұрын
были ли у кого такие ошибки - Uri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string. это после первого подключения к бд где то на 16ой минуте
@skillblog-web
@skillblog-web 5 ай бұрын
Возможно переменная окружения не видна
Советский мультфильм про нашу жизнь !
13:49
Дедушка Аргентинца
Рет қаралды 3,7 МЛН
Why You Should Always Help Others ❤️
00:40
Alan Chikin Chow
Рет қаралды 134 МЛН
I wish I could change THIS fast! 🤣
00:33
America's Got Talent
Рет қаралды 59 МЛН
Сеть и сокеты. База для backend разработчика.
17:11
Константин Козловский
Рет қаралды 37 М.
Все, что нужно знать про Node.js
58:55
Trampoline Meetup
Рет қаралды 25 М.
Как быстро стать JUNIOR frontend разработчиком | Что нужно знать | Roadmap 2024
18:14
Frontend Fundamentals | Александр Караджиков
Рет қаралды 2,2 М.
Build Complete REST API in NestJs #1 - with TypeScript & MongoDB
31:05
Coding With Abbas
Рет қаралды 55 М.
😱 Как стать программистом с нуля? Без курсов самому.
24:43
Хауди Хо™ - Просто о мире IT!
Рет қаралды 320 М.
Игра "Найди пару/Угадай карту" на чистом JS с нуля до деплоя.
38:39