TOKYO dance music
This is a guest case study by DotCat1985, .NET Consultant, who developed the site.
TOKYO, an exciting remix of technology, dance and Japanese vibes
Do you like dance music? If yes, we have some good news for you: you can now listen to original dance music on an Orchard Core-based platform! It's the website of TOKYO, hyper dance music artist from Italy (hyper dance is a new alternative to EDM for bringing you happiness and escape from a negative and aggressive everyday life). His music is deeply influenced by his journey experience in Japan, Electronic Dance Music (EDM), Japanese folk music and many more. TOKYO has gained recognition for unofficial remixes with thousands of views on YouTube (Depeche Mode, Ava Max, Miles Away).
Regarding the creation of the website, TOKYO asked me to build an easily installable website for:
- promoting music to potential fans
- obtaining collaborations with other artists for remixes, covers and original tracks
To meet the requirements above, I decided to build on Orchard Core, because the support from the open-source community, the video tutorials on YouTube and the countless features allowed me to develop a low cost and functional portal using .NET. Then, I started to develop and design the website in collaboration with Roxana Degiovanni, freelance web & brand designer from Argentina, Enza Branca, freelance copywriter from Italy, and a mother tongue English translator.
During the design process, we defined the following features on the basis of the artist's requirements:
- website auto installer
- pages in Italian and English optimized for SEO: home, biography, music and contact pages
- music page allows the users to listen to covers, remixes and original tracks through embedded and cookieless YouTube players
- contact page consists of an e-mail contact form for artistic collaboration and/or information requests
- user-friendly navigation menu
- social media links for keeping up to date with the artist’s news
- image lazy loading
- secure communication with HTTPS
- HTTP response compression with gzip
- contact form protection with Google reCAPTCHA
- GDPR compliance using:
- cookie and privacy policy banner
- archive of the messages sent from the e-mail contact form
- background task for deletion of old messages sent from the e-mail contact form
- gallery of testimonials shared by followers, fans and artists who collaborated with TOKYO
- responsive and customizable layout through the administration panel
- back-end logging
- log files manager
- integration with Web analytics platform
During the development process, we implemented the features above using the following technologies:
- Orchard Core, C#, ASP.NET Core (core)
- HTML 5, CSS 3, JavaScript, jQuery, Bootstrap 5, Liquid, and Razor (front-end)
- Gulp.js and NPM (front-end code minifying)
- Iubenda (privacy and cookie compliance)
- Matomo (Web analytics)
Regarding the website core, I decided to use the following modules:
- OrchardCore.AutoSetup, native module for website auto installer
- OrchardCore.AdminMenu, native module to create custom admin menu
- OrchardCore.Menu, native module to create the website navigation menu
- OrchardCore.Https, native module for forcing any communication with HTTPS
- OrchardCore.ResponseCompression, native module for HTTP response compression with gzip
- OrchardCore.BackgroundTasks, native module for deletion of old messages sent from the contact form
- OrchardCore.CustomSettings, native module for configuration of layout sections, like logo, favicon and social links
- OrchardCore.Layers, native module used to define and customize website sections, like header, footer, cookie and privacy policy banner
- OrchardCore.HealthCheck, native module for health checks
- OrchardCore.Seo, native module for SEO optimization
- Etch.OrchardCore.SEO.Redirects, module for creating permanent redirects
- OrchardCore.Workflows, native module used to visually implement the e-mail delivery from the contact form
Also, I had to develop:
- a custom module which embeds a YouTube player
- a custom module based on editor for trying Liquid scripts
- a custom module based on FileManager control by Syncfusion for log files management
- a custom module based on StatCan.OrchardCore.Matomo for integration with Matomo web analytics
- custom helpers for the setup recipe
After we finished the development and test processes, I launched the website of TOKYO in December 2021, which is accessible on the following URLs:
- https://www.tokyodancemusic.com/en/home (English)
- https://www.tokyodancemusic.com/it/home (Italian)
The website is the result of an accurate work to the artist’s requirements. In particular, Roxana Degiovanni designed the layout on the basis of a Bootstrap 4 Web template, later migrated by me to Bootstrap 5 for performance and support reasons. Enza wrote the Italian contents and SEO metadata, later translated in English by the mother tongue translator. All contents are optimized for clarity and conciseness.
In conclusion, Orchard Core gave me a lot of useful and well-thought-out features for the TOKYO website. The documentation needs to be improved a lot to help a newbie. Despite this, the good things are that Orchard Core is open-source and continuously updated, and the community supports it a lot. For these reasons, I believe there will be significant improvements for Orchard Core with a focus on enriching its features and documentation. I consider future developments of TOKYO website and other projects.
Perhaps, I would like to express sincere thanks to the community for their dedication and collaborative efforts, and I would like to remember Jean-Thierry Kéchichian (@jtkech), a person who offered invaluable support in the community and who has sadly passed away.
