Социальная сеть на JavaScript [constcode]

Складчина: Социальная сеть на JavaScript [constcode]

На курсе вы найдете практику по работе на чистом JavaScript, закрепите ООП и процедурное программирование. Вы научитесь использовать fetch запросы с JSON и FormData, websocket'ом через socket.io и напишите всю frontend часть программы шаг за шагом (самостоятельно и с помощью мастер-классов)

В феврале продажа остановится!​

О чем этот проект-практика?

Тем кто изучает JavaScript зачастую не хватает банальной практики. На работу не берут без практики, а практику без работы не получишь. Чтобы разорвать этот порочный круг и нужна проект-практика.
В этом проекте в режим step-by-step студент напишем код к социальной сеть с нуля (но только frontend часть, backend выдается готовый). С нуля и на чистом JavaScript - ведь навык работы с основой любого фреймворка и библиотеке именно в понимание конструкция JavaScritp.

Чего в проекте нет!

В проекте не верстаем, не разрабатываем интерфейс - он уже готов.
В проекте не пишем backend и не создаем БД - они уже готовы.
В проекте не изучаем JavaScript - в проекте мы его практикуем и используем. Подразумевается, что базовые конструкции JavaScript студенту уже известны.

Спойлер: Программа

• Обзор проекта
  Проведем обзор исходников, зависимостей и вспомогательных инструментов проекта. (18 мин)
• Регистрации
  Начнем с формы на странице регистрации, фильтрации и валидации разных типов полей. Научимся отправлять данные на backend с помощью async/await fetch конструкции. (34 мин)
• Авторизация
  Проведем фильтрацию формы авторизации, отправку данных на backend и проверку текущий сессии чтобы при перезагрузке страницы сессия не терялась. Научимся определять данные авторизованного пользователя. (19 мин)
• Пользователи
  Запроси у backend список всех имеющихся пользователей, чтобы вывести кликабельный список. Сгенерируем список с JS API через document. (12 мин)
• Общие функции
  Подготовка util.js файла со вспомогательными функциями для других страниц. Запрограммируем отображение кнопки выход и меню для постоянного актуально состояния. (28 мин)
• Профиль (инициализиаця)
  На странице профиля запросим данные этого пользователя у backend. Определим на чьей мы странице (авторизованного пользователя или другого). Выведем личные данные в шаблон страницы через дата-флаги. (33 мин)
• Друзья
  У авторизованного пользователя есть друзья и заявки в друзья. А значит их нужно запросить, обработать, создать на каждого друга и запрос по карточки вывести в соответствующие сегменты на страницы. В этом нам помогут как дата-флаги, так и template-ы. (28 мин)
• Профиль (стена)
  Кроме персональных данных у пользователя на странице есть посты. Короткие публичные сообщения от самого пользователя или от его друзей. Посты можно лайкать и редактировать. По крайней мере после того как мы их на это запрограммируем. (66 мин)
• Настройки
  Пользователь должен уметь изменить себе аватарку и статус. А еще имя, фамилию, почту, пароль. Он вообще может все изменить в себе если захочет. А мы ему поможем запрограммировав страницу с настройками аккаунта. (85 мин)
• Чат
  Друзья нужны чтобы с ними общаться. Можно в живую, а можно, если мы воспользуемся ООП, websocket и socket.io библиотекой, в нашей социальной сети. Если раньше работали только с fetch запросами, то с постоянным открытым каналом. (64 мин)
• Шлифовка и Деплой
  Когда все готово нужно садиться и доделывать. Так поступим и мы уточнив некоторые фрагменты кода, проведя рефакторинг сложных решений и доработав пользовательские сценрации до уровня современных социальных сетей. А потом купим VDS/VPS и опубликуем нашу социальную сеть в интернете. (43 мин)
• Отзыв
  Тут можно высказать благодарность и финальную конструктивную критику.