Сообщение отправлено

x

СОЦИАЛЬНАЯ
СЕТЬ
"ТАКЖИВЕМ"

О проекте

О проекте:

  • Проект Такживем – прездназначен для пользователей выражающих свои мысли об обыденных социальных проблемах населения. Это место, где можно свободно обсудить вопросы с гражданской точки зрения.
Смотреть сайт

Задачи:

  • Разработать социальную сеть c максимально удобным и простым интерфейсом, способную выдерживать огромные нагрузки, при том работать максимально быстро, без падений.

Инструменты:

  • ReactJS
    Webpack
    Express
    Laravel

Этапы работ

Агрегация требований заказчика и анализ ЦА

Разработка ТЗ и прототипов страниц

Разработка фирменного стиля

Вёрстка/Программирование ReactJS/Laravel

Тестирование, Отладка, Финальный Релиз

01

Агрегация и анализ

  • Собрали в единое целое и составили список всех пожеланий и мыслей клиента. Превратили размытую идею в последовательность работ, сформировали конкретные цели.

    Провели анализ и разработали портрет целевого пользователя. Получилась весьма обширная аудитория: активные пользователи социальных сетей и форумов, зрелые мужчины и женщины в возрасте от 30 лет, с желанием выговориться и поделиться эмоциями о социальных проблемах, о наболевшем.
02

Разработка ТЗ

  • "НЕТ ТЗ - РЕЗУЛЬТАТ Х... непредсказуем!"

    К написанию технического задания необходимо было подойти особо тщательно. Продумать все связи, архитектуру будущего сайта. При визуальной простоте - функционал ожидался сложным, для стабильной работы которого требовалось подобрать эффективный инструментарий.

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

    Немного забегая вперёд: клиент остался доволен скоростью работы интерфейса, а мы оценкой Google Page Speed.
03

Фирменный стиль

  • В основе фирменного стиля лежат несколько базовых элементов: логотип, цвета, шрифт
Предложенные варианты
фирменного лого
В качестве фирменного шрифта был выбран шрифт
PT Sans с начертанием Regular & Bold
PT Sans
абвгдежзийклмнопрстуфхцчшщъыьэюя
АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
1234567890
PT Sans
абвгдежзийклмнопрстуфхцчшщъыьэюя
АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
1234567890
Фирменные цвета
004ecf
ff9000
cf0049
eeeeee
232323
002064
04

ВЁРСТКА/ПРОГРАММИРОВАНИЕ

  • Вёрстка

    Нашей команде было важно, чтобы пользователь ждал минимум времени и делал максимум действий на сайте - в этом помог React. Он загружает лишь то, что отличается от предыдущей страницы. Мы так же использовали все преимущества жизненных циклов компонентов, чтобы оптимизировать сайт: к примеру прекращать работу функций при удалении компонента или запрещать его обновление.

    React создает легковесное дерево из JavaScript-объектов для имитации DOM-дерева. Затем он создает из них HTML, который вставляется или добавляется к нужному DOM-элементу, что вызывает перерисовку страницы в браузере.


    Для хранения данных и взаимодействия элементов приложения вне связи родитель-ребенок была использована библиотека Redux. С ее помощью были реализованы, к примеру, системы авторизации и модальных окон.

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

    Также была разработана система кеширования основных используемых данных на клиенте. Так это позволило реже делать запросы к серверу, относительно не часто меняющихся данных, а также исключить нагрузку сервера при передвижениях вперед-назад по истории навигации.

    Раскрыть подробнее
  • Программирование

    В качестве Back-end фреймворка мы решили использовать Laravel. Нами был изучен удобный механизм маршрутизации. Route::group позволил задать общую часть для всех вложенных маршрутов, учитывая две группы в приведенном коде. Общий путь ко всем маршрутам — по маске /api/users/. Формирование конечных url проходило с помощью методов Route::get или Route::post, в зависимости от желаемого действия.

    Была освоена система объектно-реляционного отображения Eloquent ORM, она позволила нам работать с базой данных на более высоком уровне, освободив нас от деталей более низкого уровня — таких как синтаксис запросов и безопасность.


    Миграции схожи с системой контроля версий для базы данных, что позволило нашей команде менять структуру БД, в то же время оставаясь в курсе изменений всех участников команды. Миграции обычно идут рука об руку с построителем структур для более простой работы с архитектурой БД.

    Посредники предоставляют удобный механизм для фильтрации HTTP-запросов нашего приложения. Например, в нашем проекте есть посредник для проверки аутентификации пользователя. Если пользователь не аутентифицирован, посредник перенаправит его на экран входа в систему. Если же пользователь аутентифицирован, посредник позволит запросу пройти в приложение.

    Раскрыть подробнее
03
месяца
разработки
01
месяц
тестирования
02
технических
релиза
03
обморока
программистов
05

ФИНАЛЬНЫЙ РЕЛИЗ

  • Результат:

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

    В профиле пользователя можно отследить все оставленные комментарии в статьях сообщения и статьях. Мы проработали кажду деталь, чтобы пользователю было комфортно на сайте, а заказчик остался доволен выполненной работой.

    Наша команда получила бесценный опыт благодаря работе с библиотекой React и фреймворком Laravel, задействовала максимум потенциала. Получили мощный продукт, который удовлетворил потребности клиента и наши творческие амбиции.
06

Команда проекта

  • Аналитик-проектировщик
    Валентина Гурина
  • Дизайнер
    Виталий Головенко
  • Фронтенд-разработчик
    Андрей Глевчук
  • Фронтенд-разработчик
    Роман Плахов
  • Бэкенд-разработчик
    Роман Долженко
  • Менеджер проекта
    Герман Лышков
  • Креативный директор
    Александр Усталов
Стоимость аналогичного проекта от 400 000 рублей

Другие работы

Интернет-магазин «Варибаси»

View more

Социальный проект "Такживем.рф"

View more

Интернет-магазин косметики «Beloris»

View more

Бабулина Лавка

View more

вверх