Project Screenshot

What-Song

Удобное приложения для поиска и прослушивания любимых треков к сериалам и фильмам онлайн. На текущий момент в базе находится более 150.000 треков к различным сериалам и фильмам. В период пиковых нагрузках на сайте находится более 1000 активных пользователей онлнай

  • The story behind WhatSong

    WhatSong - онлайн сервис, помогающий пользователям находить популярные треки к любимым фильмам и сериалам! Whatsong был запущен еще в 2008 году, когда руководитель компании Том слышал много отличной музыки из кино и телевидения. Он не мог найти ресурса, чтобы найти то, что это было. Том предположил, что он не единственный, поэтому решил заняться разработкой этого портала. В 2016 году Том лично связался с нами и предложил поучаствовать в ребрендинге и оптимизации работы портала и админской панели!

  • Analysis

    Необходимо было провести достаточный объем исследовательской работы. Задача состояла в продумывание админского интерфейса для оптимизации работы модераторов. Также стояла задача автоматизации процесса поиска новых эпизодово и песен к ним, а также что, не мало важно, необходимо было грамотно разработать серверную часть приложения и API чтобы справляться со все более растущими нагрузками на сервер вплость до нескольких тысяч запросов в минуту, при количестве песен более 150k необходимо было оптимизировать и структуру базы данных и все обращения к ней!

  • Our solutions

    Мы разработали и реализовали удобный пользовательский интерфейс, Мы грамотно реализовали архитектуру серверной части и АПИ, что позволило даже в пиковых нагрузках время ответа сервера остается менее 300ms. Мы реализовали кэширование самых важных данных в оперативной памяти, время доступа к которой существенно ниже, чем к жесткому диску Были разработаны автоматические сервисы, автономно работающие в фоне для синхронизации информации с youtube, spotify, itunes и amazon Одним из достоинств мы считаем, что серверные воркеры динамически приостанавливают свою работу при пиковых нагрузках на наш сервер

Results

Duration:
May 2016 - December 2016
Team:
Backend - 1 Frontend - 3 PM - 1
Designed the UI/UX

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

Developed the backend

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

Developed the frontend

Мы создали интерфейс, используя технологию SPA (одностраничное приложение). Приложение обрабатывает навигацию на стороне клиента и визуализацию пользовательского интерфейса. SPA дает нам быстрые интерфейсы. Также важной фичей проекта являлась разработка серверного пре-рендера страниц, потому что для приложение очень важно ранжирование в поисковой выдаче и оптимизация SEO позиций

Implemented features

При пиковой нагрузке к сайту было около 2k обращений в минуту. Часть обращений обязывает вызывать запросы к базе данных (такие как получение информации о лайке конкретной песни конкретным пользователем и т.д.) Но часть запросов может быть закэширована, обновляться по мере изменения контента и раздаваться как статика. Что невероятно ускоряет скорость работы сайта и significantly уменьшает нагрузку к базе данных, и как следствие время ответа сервера

Экспериментальным путем сбора истории запросов на нашем сайте было выявлено, что примерно в каждом пятнадцатом поисковом запросе существует опечатка, то мы разработали гибкий модуль корректирования запроса путем сравнения паттернов и регулярных выражений по нашей базе данных английских слов и названий фильмов / сериалов В результате количество некорректно обработанных запросов уменьшилось почти в 5 раз

Т.к. на сайте уже сейчас более 150к песен и более 2к фильмов очень важно было разработать стабильные сервисы, работающие в фоновом режиме для обеспечения получения и актуализации информации (доступность уже существующих ссылок, поиск новых песен, фильмов и эпизодов сериала)

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

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

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

Если пользователю нравится приложением, то он может поделиться им со своей семьей и лучшими друзьями. В нашем приложении сделать это может легко и удобно. Ссылку в App Store или на веб сайт можно отправить через все самые популярные меседжеры.

Technology Stack

HTML5 icon
HTML5
CSS3
React icon
ReactJS
Redux icon
Redux
Node icon
NodeJS
PostreSQL icon
MongoDB
Redis icon
Redis
Nginx icon
Nginx