React & Node.js ИНТЕРНЕТ МАГАЗИН С НУЛЯ. PERN stack PostgreSQL + express + React js + node.js

Таймкоды:
00:00 - Введение, теория, план на урок

04:20 - [BACKEND] - Начало
07:56 - [BACKEND] - Подключение к базе данных
11:30 - [BACKEND] - Строим диаграмму базы данных
16:50 - [BACKEND] - Модели данных и связи между ними
25:30 - [BACKEND] - Роутинг и эндпоинты
32:20 - [BACKEND] - Универсальная обработка ошибок. Первый middleware
37:20 - [BACKEND] - CRUD для типов, брэндов, устройств
46:20 - [BACKEND] - Раздача статики
47:10 - [BACKEND] - Получение устройств, фильтрация, пагинация - постраничный вывод
54:20 - [BACKEND] - Регистрация, авторизация, jwt токен, bcrypt
01:04:10 - [BACKEND] - Middleware, проверяющий авторизован ли пользователь
01:07:50 - [BACKEND] - Middleware, проверяющий роль пользователя

01:10:40 - [FRONTEND] - Начало, структура приложения
01:13:30 - [FRONTEND] - Навигация, роутинг, Switch, Route, Redirect, AppRouter
01:20:00 - [FRONTEND] - Mobx, глобальный стейт, UserStore
01:28:40 - [FRONTEND] - Страница регистрации, авторизации
01:33:20 - [FRONTEND] - Главная страница, список товаров, типов, брендов
01:45:20 - [FRONTEND] - Страница просмотра товара и его характеристик
01:51:30 - [FRONTEND] - Страница администратора, модальные окна
02:02:00 - [FRONTEND] - Взаимодействие с сервером. Настраиваем axios
02:24:00 - [FRONTEND] - Добавление устройств и характеристик
02:29:40 - [FRONTEND] - Постраничный вывод\pagination

02:39:40 - ВРЕМЯ СТАВИТЬ ЛАЙКИ

Поддержать меня и мой канал вы можете по ссылкам ниже.

#React #JavaScript #Node

[UlbiTV]

Таймкоды в описании, приятного просмотра!)

[sireus]

У кого проблема с клиентской частью, когда не рендерится страница на этапе создания Роута:
В новых версиях React Router немного изменилась документация. Switch (в файле по пути components/AppRoutes из урока) заменить на => 'Routes'. Так же 'Components' (в строке Route) заменить на => 'element'. Эта строка должна выглядеть так: "<Route key={path} path={path} element={<Component/>} exact/>"
Так же для "Redirect". Его в новой версии не импортируем. Вместо него использовать просто: "<Route path="*" element=(<Shop/>)/>".
Может у кого-то возникла такая же проблема и будет полезно.

[ooddnkp]

Жесть, меня этот человек научил большему чем горсть "преподавателей" за 4 года учебы в университете.
Есть множество людей которые продвигают реформы образования, есть люди и компании которые инвестируют многа деняг в обучение будущих поколений, но мне кажется, что ulbi TV сделал больше всех этих добряков, создав столько простых, понятных и что не маловажно бесплатных уроков. Вот он настоящий МеценаТ!

[alena_paya_start]

Досмотрел до конца, ушло 2 недели )) тратил по 1-3 часа в день) параллельно писал бэк и фронт под свои задачи, почти все работает, где то ошибка с токенами буду смотреть заново, и думаю не один раз. Спасибо большое тебе Тимур! Раньше такой стэк можно было только долгими путями тратя много времени на прочтение талмутов Архангельского (привет паскаль и с++) либо в компании ковыряя чужой код. Это огромная работа и в клад в развитие начинающих юниоров.

[ibcxrnq]

Это просто ах****но! Ты реальный красавчик) Спасибо и удачи с каналом! Коммент для продвижения!

[falsetrue]

Хотел вечером фильм какой нибудь посмотреть, но видимо буду смотреть это видео :D уверен хороший курс, после просмотра отпишу еще

[DiimaPopov]

Это тот случай когда одно 3 часовое видео обьясняет больше чем 3-6 месяцев учебы... топ! подписан лайк и +карма

[BlindPewRus]

Руководство просто выше всяких похвал.
То самое познание через практику.
Спасибо огромное.
Небольшая ошибка в Client/src/App.js - строка 16 ' user.setUser(true)' заменить на ' user.setUser(data)' - если не ошибаюсь

[dmytrovoronov]

Ого, таких таких уроков на русском, даже на Udemy нет. Спасибо

[xjnvlrx]

Супер!!! Спасибо большое за твой труд!!! За 2.5 часа передал суть 2х лет института!) Не останавливайся! Таких курсов в русскоязычном сегменте ютуба нет. Сил и удачи тебе!)

[tritankista]

Пишу серверную часть своего веб приложения для диплома по этому ролику) Просто манна небесная!!!

[dakaktakto]

Решение некоторых проблем на фронте, возникших при повторении кода в декабре 2023

(01:19:00) не рендерится навигация Route
1. замените в импорте Switch и Redirect на: import { Routes, Route, Navigate } from 'react-router-dom;
2. замените код в теле компоненты на:
   return (
      <Routes>
         {isAuth && authRoutes.map(({ path, Component }) =>
            <Route key={path} path={path} element={<Component/>} exact />
         )}
         {publicRoutes.map(({ path, Component }) =>
            <Route key={path} path={path} element={<Component/>} exact />
         )}
         <Route path="*" element={<Navigate to={SHOP_ROUTE} />}/>
      </Routes>
   );

(01:31:20) В окне авторизации не выстраивается в линию кнопка "войти" и "зарегистрируйся"
1. добавьте import Col from 'react-bootstrap/Col'
2. оберните NavLink и Buttom в теги <Col>NavLink</Col> и <Col>Buttom</Col>
Это же решение будет применяться дальше при аналогичной потребности d-flex row

(1:44:40) Динамический переход по страницам
1. useHistory заменить на useNavigate
import { useNavigate } from "react-router-dom"
const history = useNavigate()
2. в обработчике событий не вызывать у объекта history функцию push. Сделать так: onClick={() => history(DEVICE_ROUTE + '/' + device.id)}

[blackhome]

Единственный человек который подробно рассказывает, но для новичков это сложновато понять. Это видео заслуживает лайк и подписку

[maratfaizer]

Спасибо большое, это ты - герой, что сделал такой урок!
И главное, все очень сжато, но где стоит отметить какую-то деталь - ничего не упускаешь
Я сам в разработе второй год, но в этом уроке знаний дано больше, чем набрал за все время)
Еще раз спасибо!
Если бы ты где-то на udemy переделал этот курс: дробить на мелкие уроки плюс исходник в результате каждого урока -- я бы заплатил за это однозначно!

[liza_sashina]

Автор, спасибо большое! На твоём канале, без преувеличения, самый лучший контент на ютьюбе по данной тематике.

[damakostolo]

Видео великолепное, я от начала до конца написал магазин это было тяжело .Сталкиваться ошибками даже когда катаешь чужой код, чаще всего из-за невнимательности иногда из-за обновлений фреймворков .
Появилось очень много понимания о разработке, а с видео автора про ООП стало ещё понятнее . Всём начинающим разработчикам как и бек так и фронтенд советую пройти этот курс .
Это стало самой большой моей разработкой приложений за период изучения программирования но надеюсь не надолго, надо покорять новые вершины, каждый день только так можно добиться успеха ! Удачного кодинга и не повалите сервер

[ClanCRK]

Ну наконец-то, обалденный формат! Быстро, по делу, не разжевывая - то что нужно. А непонятные детали можно и погуглить. Спасибо!

[programming]

начало очень многообещающее, еще и интернет магазин, распространенный кейс, спасибо Ulbi TV

[icetree]

вместо 10 книг посмотрел ролик и написал курсач.
Cпасибо <3

[xoxo]

Учусь по твоим курсам, твои 3 часа у меня занимают дней 5 в среднем по пару часов в день :) СПАСИБО!