Ukraine Developers Network

Соціальна мережа і портал новин на основі архітектури React / Redux.

Відео огляд

Опис

Соціальна мережа і портал новин на основі архітектури React / Redux. Часто нас надихають речі інших людей .. В дитинстві мріяв створити соціальну мережу, спробував реалізувати цю мрію). Буду вдячний за будь-які коментарі та поради щодо поліпшення коду.

Стек технологій

• Архітектура

  UI(React), BLL(Redux), DAL(Axios, Thunk).

• Збірка

  Для створення проекту використовував CRA. Частина додатку написана на класах, частина переписана з використанням хуків.

• Дизайн

  Дизайн робив самостійно, черпаючи натхнення з bexance, apple і facebook. Стиль вибрав мінімалізм, metro, flat, частково з елементами сковоморфізму.

• Розмітка і стилі

  Стилі. Використав:

  • css modules - вирішує проблему глобальності
  • sass(scss) - для використання змінних, міксинів і вложеності
  • BEМ - в даному випадку так як частину його функцій приймають на себе модулі, дозволяє розкрити scss і зручно створювати вложеність, ділити компонент на підблоки.
  • Для кастомізації скролбара використовував react-perfect-scrollbar.
  • Для зручного комбінування класів підключив бібліотеку classnames.
  • Для стилізації select використав react-select.

  Сітка.За основу взяв flex, в деяких місцях юзав grid. Boootstrap з Materialize вирішив не використовувати, так як все одно готові компоненти потрібно трансформувати і перебивати своїми стилями, а побудова сітки з приходом flex не займає багато часу.

  Анімації.Всі анімації писав вручну, без підключення бібліотек. Щоб звязати анімації переходів з життєвим циклом компонентів в деяких місцях використав бібліотеку react-transition-group.

  Адаптив.Використав стандартний responsive підхід, резинова + адаптивна верстка. Для відключення рендерингу незаюзаних компонентів в залежності від ширини використав бібліотку react-responsive(моніторить resize, innerWidth)

• Зберігання даних

  Для зберігання глобального стану додатка спочатку писав спрощений аналог redux щоб зрозуміти його будову і проблеми які він вирішує, далі використовував традиційно redux, react-redux, щоб зручно використовувати redux всередині react(connect).

• Маршрутизація

  Для реалізації роутинга використав бібліотеку react-router-dom

• Інтерфейс взаємодії

  Для роботи з REST API використовав бібліотеку axios. Для того щоб мати можливість створювати асинхронні action, сайд ефекти, підключив redux-thunk.

• Форми

  Підключив redux-form, але не дуже подобається що redux-form створює свою гілку в глобальному сторі редакса. Всетаки дані мають оброблятись на локальному рівні. Частина написана без використання бібліотеки.

• Селектори

  Для кешування селекторів використав react-select.

Функціонал додатку

• Хедер

  • Відображення даних авторизованого користувача (Логін/Фото)
  • LogIN/LogOut в залежності від авторизації з перенаправленням на сторінку логінізації.

• Сторінка логінізації

  • Форма введення авторизаційних даних (логін/пароль) з валідацію на стороні клієнта та сервера.
  • Капча, з кнопкою оновлення (спрацьовує, коли більше 4 разів введено невірний пароль).
  • Перенаправлення на профайл при успішній логінізації, перенаправлення з інших сторінок якщо користувач не авторизований.

• Сторінка профілю

  • Зміна режиму (авторизований користувач/перегляд профілей користувачів)
  • Відображення та зміна основного фото користувача.
  • Відображення та редагування статусу.
  • Відображення даних About user, Looking for a job, Website, Contacts (facebook, twitter, instagram, github, website).
  • Кнопка редагування профілю з перенаправленням на сторінку налаштувань/кнопка відправлення повідомлення, якщо профайл в режимі перегляду.
  • Створення та видалення постів (зміни на даний час зберігаються локально)

• Сторінка діалогів

  • Cписки діалогів і повідомлень (оновлюється кожних 15 секунд)
  • Форма відправки повідомлення з валідацією
  • Функціонал переключення між активними діалогами
  • Функціонал відправки і отримання повідомлень
  • Відображення кількості нових повідомлень для кожного діалогу

• Сторінка користувачів

  • Список користувачів
  • Зміна кількості користувачів на сторінці
  • Пагінація
  • Підписка/відписка на користувача
  • Створення діалогу з користувачем
  • Перегляд профіля вибраного користувача

• Портал новин

  • Список новин
  • Зміна кількості новин на сторінці
  • Вибір категорії
  • Пагінація
  • Кількість знайдених результатів
  • Зміна вигляду(tablet/list/large)

• Налаштування користувача

  • Зміна фото користувача, імені, статусу, статусу активного пошуку, опису, детального опису, контактів.

• Сайдбари

  • Панель навігації
  • Панель активних діалогів з автооновленням
  • Панель відображення останніх новин з автооновленням
  • Панель кількості зареєстрованих користувачів/версії додатка.
  • Аудіоплеэр для фону з переключенням стану Грати/Пауза.

• Система сповіщень

  • Система відображення очікування відповіді від серверу.
  • Система відображення повідомлень.
  • Обробка і виведення помилок.

Github

Контакти

• Якщо у вас є питання або пропозиції по співпраці, будь ласка напишіть мені 🙂.