# Immersive Wayne Shorter Catalog

![](https://2406269469-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMOhg65isuwOTBW026H%2F-LMPKndVCWxNTRTfiCal%2F-LMPKp3xRz3_DjXew0sd%2Fwayne_shorter_01-1.jpg?generation=1536966481100152\&alt=media)

## **Build an immersive catalog experience using the Wayne Shorter collection**

Use Blue Note’s extensive, career-spanning collection of music, photos, and film to build an immersive catalog experience for living jazz legend Wayne Shorter.

Engage users with beautiful visualizations of the music audio and video tracks. Showcase each video using our [HTML5 Video Player](https://cloudinary.gitbook.io/milwaukee-startup-week-hackathon-guide/cloudinary/html5-video-player). Display beautiful layouts of artist photos, album art and fan photos in [rich and responsive layouts](https://cloudinary.gitbook.io/milwaukee-startup-week-hackathon-guide/cloudinary/image-optimization-i) that are [sized perfectly ](https://cloudinary.gitbook.io/milwaukee-startup-week-hackathon-guide/cloudinary/image-optimization-ii)for users’ devices.

Contextualize and [visualize](https://cloudinary.gitbook.io/cil-hackathon-guide/~/edit/primary/cloudinary/audio-to-waveform-images) Wayne Shorter’s music using photos, [reviews](http://prod-doc.rovicorp.com/mashery/index.php/Data/music-api/v1.1/song/review), a [timeline](https://github.com/luyilin/vue-cute-timeline), or [unique visualizations](https://pudding.cool/2017/03/miles/) which pull in [related](https://github.com/guoguo12/billboard-charts) [data](http://prod-doc.rovicorp.com/mashery/index.php/Data/Name-API/V1.1). Let users share their favorite photos or films/music exceprts using social sharing.

{% hint style="success" %}
BONUS POINTS FOR THIS CHALLENGE
{% endhint %}

### Choose a Serverless Stack

Resist the urge to create an Express app from scratch and deploy a server for this one! Instead, focus on extending our[ Blueprint starter application](https://cloudinary.gitbook.io/cil-hackathon-guide/~/edit/primary/thought-starters/immersive-wayne-shorter-catalog) built on Auth0 extend's FaaS serverless stack. You'll be able to quickly use our API's example endpoints or extend it further with other APIs. Then call each API directly within a Single Page App (SPA) to take advantage of the responsive design possibilities.

Cloudinary's APIs work elegantly with Auth0 [Webtasks](https://webtask.io) and other serverless platforms. We support many languages, including JavaScript and [Node.js](https://cloudinary.com/documentation/node_integration).

### Use This Guide to Get Started

We've organized the Cloudinary resources in this guide by functionality so you can quickly add a feature to your application. Each article is a short and concise walkthrough, so you won't have to comb too deep through our extensive [documentation](https://cloudinary.com/documentation), unless you want to.

### Tweet/Share your Experience

We know your Hackathon experience will be fun and engaging. Don't forget to share that with your friends on social media. ***In fact, we've added links at the top of this guide to make sharing easy.***. Learning about visualizing an audio waveform? Show the world what you are working on and let them learn about these cool technologies, right along with you.

## Tell us About your Cool Hack

We'd love to hear what you built at the hackathon, we may even showcase it, so [drop us a line](mailto:Dan.Gilmore@cloudinary.com).
