What’s HÖR about?
The HÖR project was created to bring quality DJ sets to the masses. So, the primary purpose of the HÖR web platform is to get people who appreciate music and DJs together. Besides, the platform had to be easy to manage. Thus, when designing it, we focused on simplicity, efficiency, scalability, and accessibility.
Setting
We chose the following tech stack:
- frontend:JavaScript, jQuery.js, CSS, SCSS, CSS Modules, ESLint;
- backend: PHP 7, MySQL.
Compatible browsers: Chrome, Mozilla Firefox, Safari, Opera, Edge.
The platform is correctly displayed and functioning on mobile devices and TouchScreen technology (adaptive version).
How the platform works
The site uses CMS WordPress with several plugins and has an admin panel to add, edit, delete, and manage DJ sets, pages, artists, and form submissions:
- WooCommerce – eCommerce toolkit. We used it for product management and membership payments processing (we will talk about the HÖR shop and subscriptions soon);
- Stripe WooCommerce for payments by credit cards, Google Pay, Apple Pay, ACH, Klarna, and more;
- Rank Math SEO – for all SEO settings;
- Contact Form 7 – to create DJ sets form;
- We used Flamingo for saving and managing Contact Form 7 messages.
- We also used Advanced Custom Fields PRO for creating additional text areas and fields, constructing home and product sections, editing a header and a footer;
- We added Classic Editor for working with texts and images;
- W3 Total Cache – a plugin to boost optimization;
- WooCommerce Social Login to allow signing up via various social networks.
Features
Users with different access levels :
- An administrator has full access to managing pages, products, categories, users, site, and shop settings.
- A moderator can’t change settings and doesn’t have access to important parts of the site. This user type is made for working with content and comments.
- Free registered users have access to account pages.
- Premium users have no access to the admin panel but have a personal zone, membership info, favorites, id search, and more features. Paid subscription.
HÖR is about listening to and spreading music. Thus, we created authentic tabs for the library, artists, styles, and picks, where users can explore, access, and share videos.
We’ve also made live Search as fast and smooth as possible. Users can find DJ sets by mood, genres, and artists, add tags and use them to create and customize new library pages. Personal libraries are generated based on the selected tags or categories. A default library page is customized manually by an administrator.
There are also essential social network features. People who bought a Premium membership can chat, add clips to favs, comment, share, and tag them. Saved content is accessible in separate tabs for tracks and full sets.
To strengthen the community even more, we have embedded Shopify to allow the 0-promotion of products. Product thumbnails include titles, descriptions, prices, Add to cart, Share, and Wishlist buttons. Users can choose payment and delivery options, add and change addresses, and more using Woocommerce plugin.
Results
One thing we always kept in mind is that HÖR is a project for musicians by musicians. Thus, we tried to implement the features and elements this audience needs most. As a result, the soft launch turned out to be a success. The platform already has excellent feedback from early users – they admit that HÖR perfectly suits their needs, being fast and efficient on both desktops and mobiles.