Thread by @leemartin

Alright, brand new web app for the lovely fellows @FutureIslands and their incredible new release "As Long As You Are." Invite people close to you to unlock a stream of the new record and listen together. aslongasyouare.com #alayalisteningparty

I knew from the beginning that I wanted to create a frictionless global album premiere so the only requirement of the app is to simply visit the link. Upon arrival, we use @maxmind to turn your ip address into a pair of coordinates.

Those coordinates are then used to query the @Mapbox Geocoding API so we know where in the world you are and in what region (state, province, prefecture.)

If for some reason our system doesn't position you correctly, you can always click the GPS location button to allow access to your device location.

The core question is "How many fans does it take to unlock an album stream?" 🤔

Well, as it turns out, @Mapbox also provides the @wikidata entity id of each region. Using this ID, we can get the latest population of that location.

We then need to take a percentage of that population but what percentage? An easy starting point: total @Spotify monthly listeners / total population of earth. 😅

All of this data is being managed and transported using a cocktail of @goserverless @dynamodb @awscloud and @pusher.

Naturally, the app was developed using @vuejs @nuxt_js and is hosted on @netlify. I *really* focused on the performance of it. For all its functionality, it is really tiny and mostly made of pure Javascript.

This is my 3rd @tailwindcss powered client project and I really enjoyed exploring the responsiveness of the app. I added both xxl and xxxl breakpoints. 🥵 Had to really consider how to fit all the components (including the chat room) on tiny screens.

Here's the early wireframes I put together in @figmadesign

Thanks to everyone who participated in the @FutureIslands album premiere! I'm finishing up the case study now. 🙏🏻

I'm never crazy about my design work but I feel like I did a decent job here. @figmadesign @tailwindcss

It must be said that I never jumped on a single zoom/phone call about this project. We (@4AD_Official & @beggarsgroup) just built the damn thing. Amazing client!