Создание социальной сети на JavaScript - Frontend на React и Redux

В этом видео я покажу как сделать социальную сеть на JavaScript (JS), а точнее её Фронтенд (Frontend), то есть клиентскую часть приложения на React и Redux. В свою очередь Бекенд (Backend) на Node.js и Koa.js был создан в прошлом видео. При этом разработка на приложений на React очень многогранна и в следующем видео я расскажу о хуках ( ReactHooks API) и контексте (React Context API) на примере рефакторинга проекта из данного видео и создания своего клона Redux.
Репозиторий на GitHub: github.com/egorguru/evergloam
Boosty: boosty.to/egorguru
Telegram: t.me/egor_guru
VK: egor.guru
Github: github.com/egorguru
Музыка из видео:
c152 - Night In California
Anamnez - Шаги пустоты
GoSoundtrack - See You Tomorrow
Alexander Nakarada - One Destination Two Journeys
Anamnez - Intro
diabolus o. - the yearning.
Anamnez - Свет
Anamnez - Пока бьется сердце
Anamnez - Выход есть
Arthur Vyncke - Homeworld Collapse
The Real Folk Blues (Instrumental Cover feat. Shirou Novaleinn)

[@Imurat55]

Не смотри на то, что мало просмотров, продолжай делать контент. Контент очень качественно преподносишь, атмосферно и приятно наблюдать. Думаю просмотры потихоньку, органически будут набираться👍

[@SlavaCh]

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

[@den_ph]

Огромное спасибо, Егор! Прям то, что нужно. Четко, быстро, без воды. Приятно смотреть!

[@user-kv9pj3kq7i]

Для финального проекта самое то, что требовалось. Молодец!! Спасибо!

[@aleksandrandreiev6577]

Спасибо большое за урок. У вас очень хорошо получается. Не останавливайтесь.

[@user-ot1vy6nz9p]

Очень качественно! Желаю успехов в развитии канала ☝🏼

[@user-in7wu6sb5r]

Вот это пушка, Егор, продолжай, ты охуенен! Контент ОГОНЬ

[@scorp9838]

впечатляет видео, всё по сути и без лишней "воды"...просмотрел и многое понял, хотя уже почти год не писал код

[@harmincerol9266]

Привет, не забрасывай!!!!!! Очень круто, все разложилось по полочкам благодаря тебе. Огромное спасибо!)

[@muratov7953]

Привет можешь подсказать что за прога в начале этого видео?

[@user-qg7bj6kr4t]

Очень помогло при написании диплома. Спасибо!

[@user-bs3pq8ms6z]

Спасибо, очень круто!!!

[@yuramarinenkov8697]

Ставлю лайк ещё и за металл. Первого металюгу-фронтендере на ютубе встретил)) удачи тебе, алюминиевый человек !!! 🤘🏻

[@Polite_person_]

Круто! лайка+подписка

[@ilnurryazhapov9377]

Блин так атмосферно)

[@jonturnik]

гони продолжение, быстр! лайк

[@zloyspb]

класс!

[@user-lc3nj1yh9n]

Hey Bro, nice channel !

[@sergei_sergeevu4]

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

[@winged_channel]

Будет продолжение? Хотелось бы посмотреть про реализацию с сокетами

[@latipmagomedov3405]

Можно переделать этот проект в мобильное приложение для этого есть react native. Было бы очень интересно

[@crawd9296]

сделай продолжение пж

[@kylpord]

Спасибо, ваши видео очень помогли разобраться на практике, но не подскажите, что делать, если при тестах выдает "error": "Illegal arguments: undefined, string"

[@user-lc3nj1yh9n]

Пили ещё

[@Alex-scc]

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

[@shmatkoplus]

Похоже видосы рассчитаны только на то, чтобы показать что можно сделать на реакте. Курсов на ютубе хватает, но параллельно с ними курить документацию. Посмотри курсы от ... ща автор наверное забанит ... от димыча it-kamasutra react с нуля 1.0

[@mikhailreznichenko8035]

крутые у тебя видосы ! а что лучше saga or thunk?

[@egorguru]

Однозначно ответить не могу - оба варианта нормальные

[@user-th2ij9hm7o]

Отличный контент! Но есть пара вопросов. 1. Обработка лайка длится от 1s до 2.5s (400 B), если в посте есть картинка, то доходит до 15s (450 KB) Вывод 10 постов занимает 7s (тоже не быстро). 2. При переходе на страницу пользователя, сначала подгружаются все старые посты, через 2 секунды остаются нужные (только пользователя).

[@egorguru]

Честно говоря, не замерял и корректно ответить не могу. 1. 10 постов за 7 секунд - это, если последовательно, асинхронно - вероятно, примерно столько же и выйдет. 2. Этот пункт не совсем понял, но учти человеческий фактор: я хоть и проверял показанный код в видео, но мог и напортачить)

[@user-th2ij9hm7o]

@@egorguru по 2 пункту пропсы не успевают обновляться (напримпр при переходе с главной на юзера), сначала идет рендер постов с главной, а после получения новых данных из бд, идет повторный рендер. Нужна доп проверка? Подача инфы 🔥, не зная React (основная деятельность - строительство), 3 минуты видео, занимают день изучения. За очень много лет, впервые подписался 😁👍

[@user-vo9gg5oh7f]

Егор возможно повзаимодействовать с тобой в разработке соцсети? Напиши почту, или любую социальную сеть.

[@fantaizer4199]

что с тобой случилось? вернись пожалуйста на ютуб....🥲

[@Mikhail_Ivanovich]

Как это можно понимать, какая-то абра кадабра

[@rva3674]

Подскажи пожалуйста... Я тоже делаю что то подобное, но больше на площадку похожее. Как сделать так, что я, как залогиненный пользователь захожу на страничку другого пользователя и я могу ее только смотреть... ну как во все сетях... у меня идет ссылка на апи: "localhost:9999/api/profile/12345" - цифры - id пользователя. Запрос на такой эндпоинт идет и при запросе моей странички и странички любого человека из списка... у меня идея такая: у меня в jwt зашит id залогиненого пользователя. На бэке (экспресс) проверять id из параметров запроса и из jwt и если они не равны, то в возвращаемом объекте ставить флаг типа админ или просто страничка для просмотра... блин... и сижу туплю уже неделю, не знаю или это правильный подход... может есть какой то элегантный... буду благодарен за подсказку.

[@rva3674]

Проблема в том, что я не знаю как запретить действия админа на странице пользователя которую я посещаю...

[@egorguru]

Привет, насколько я понял, у тебя также SPA + API на бекенде. Тогда нужно на фронтенде проверять роль пользователя. Если делать по твоему варианту, когда приходит с бека флаг тип админ, то просто в зависимости от значения (true/false) отображаешь лишь нужные для пользователя данные. Регулируешь это дело, естественно, простыми if'ами

[@rva3674]

@@egorguru спасибо! Я так и делаю,)))

[@egorguru]

@@rva3674 Это я писал по поводу твоего варианта, а вообще это делается так: у юзера есть роли (admin, user, moderator и тд), а потом в зависимости от роли отображаешь то, что нужно.

[@rva3674]

@@egorguru я понимаю... просто не мог понять алгоритма проверки, как это делать... именно когда залогиненный чувак заходит на страничку к другому чуваку...но я уже разобрался, сделал