Small logo
Small logo 2
Project Screenshot

What-Song

It is a convenient application for searching for your favorite tracks from TV shows and movies and listening to them online. Currently there are more than 150,000 tracks for various series and films in the database. It is worth noting that during peak loads, the site has more than 1000 active online users

  • The story behind WhatSong

    WhatSong is an online service that helps users to find popular tracks from their favorite movies and TV shows! Whatsong was launched back in 2008 when company manager Tom heard a lot of great movie and television music. He could not find a resource to learn what it was. Tom suggested that he was not the only one, so he decided to start developing this portal. In 2016, Tom personally contacted us and offered to participate in rebranding and optimization of the portal and admin panel!

  • Analysis

    It was necessary to carry out a sufficient amount of research work. The task was to think through the admin interface in order to optimize the moderators’ work. Another task was to automate the process of searching for new episodes and songs for them. It was significant to develop the server part of the application and API competently to cope with the increasingly growing server loads up to several thousand requests per minute, with the number of songs more than 150k. So it was necessary to optimize the database structure and all calls to it!

  • Our solutions

    We developed and implemented a convenient user interface. We implemented the architecture of the server part and API competently, that is why the server response time remains less than 300ms even in peak loads. We implemented the caching of the most important data in RAM, as the access time to it is significantly lower than to the hard drive. We developed automatic services that work autonomously in the background to synchronize information with Youtube, Spotify, Itunes, and Amazon. It is worth mentioning, that server-side workers dynamically suspend their work during peak loads on our server.

Results

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

Our task was to update the original WhatSong website design. Our client wanted us to make it modern and attractive, but the most important thing was a convenience for the end-user and assistance for quick and easy site navigation. We have developed a perfect open website, which is adapted for mobile devices as well.

Developed the backend
Developed the backend

We chose the REST API for the backend because this architecture is flexible, simple, and extensible. We implemented an automated search for YouTube song clips, music search for Apple Music and Spotify. This script works automatically without the participation of a moderator. This allows us to save project costs tremendously! One more important part is the development of the script to search for and add seasons and episodes to existing series automatically! We implemented the caching of the static part of the responses to optimize server response speed! The implemented module for a clever comparison of search words in search and words in our database made it possible to develop a flexible content search functionality taking into account typos!A statistics formation on the popularity of songs, films, and series for a certain period is considered as an important feature because it allowed us to improve the ranking of songs issued to the user!

Developed the frontend
Developed the frontend

We created the interface using SPA technology (single-page application). The application handles client-side navigation and user interface visualization. Besides, SPA gives us quick interfaces. Another important point of the project was the development of server page pre-rendering because ranking for search results and optimization of SEO positions is significant for the application.

Implemented features

There are about 2k requests per minute at peak site load. Some requests demand calling database queries (such as obtaining information about likes of the particular song by a specific user, etc.), while the others can be cached, updated as the content changes, and distributed like static. This accelerates the speed of the site incredibly and reduces the load on the database significantly, and as a result, it shortened the server response time

Thanks to the experimentally collecting the history of queries on our website, it was revealed that approximately one in every fifteen search queries contains a typo. So we developed a flexible module for query correction by comparing patterns and regular expressions on our database of English words and movie / TV series names. As a result, the number of incorrectly processed requests decreased by almost 5 times

The site contains more than 150k songs and more than 2k films, so it was necessary to develop stable services, working in the background to ensure that information is received and updated (availability of existing links, search for new songs, films, and episodes of the series).

Since server-side rendering is critical for search engine optimization and, therefore, for promoting WhatSong, we have laid down the project architecture so that all important content is rendered on the server and correctly indexed by search engines.

We collect all the important information on behavioral factors for each song and film, such as the time spent on the page, the number of open and listened songs, reading comments, etc. This helps us to categorize users and to offer the most interesting content for each category of users. The system works automatically and it is based on constantly updated statistics.

We have implemented scoring - a flexible system of privileges for user rights, i.e. initially, the user can only comment and suggest new songs, after an app moderator the user rating increases As the user rating increases, new opportunities open up for him, such as suggesting changes in names, descriptions, etc.

If the user likes the application, he can share it with his family and best friends, it can be done easily and conveniently in our application. A link in the App Store or to a website can be sent through all the most popular messengers.

Technology Stack

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