How to build a live-voting experience with Hygraph, Nuxt and Supabase

[Music] we are here we are here we are always the funnest intro and I know we say this every time but yes will will it get old I don't know I'm not sure it has not gotten old yet not yet and so this time I actually um put a message that we're live in a few slack channels that I never posted just some friends of mine that who knows they might show up that would be fun it would be fun and and this is this is by far we were just talking before we went live the the nerdiest of these that we've done and we've done some nerdy stuff right we did you and low did multi-tenancy I went hardcore into page Nation spec this is the nerdiest it's been but you pair that with the fact that you built a rock and roll app to do an Alive and Kicking presentation at one of the cooler stages uh in in the developer conference world yeah and they told me this is it's an 8K screen but it's wider rather than high and so it's like three IMAX screens into one and they need five 6K projectors to to kind of merge it together it's very intense it's a good stage to be on yep especially for a presentation like this like everyone else right they had like their their kind of like here's my code here's my you know my Google Slides or whatever no no not Tim bennox right Tim benex that's not that's not what you're doing this was a 2.0 presentation almost how do you say that because also I asked them like guys I know this screen is like super wide right but everybody just gets like a little square in the middle can I just not get more and they're like but of course nobody ever asked and so I had three picture in picture on the huge screen and I'm not sure let me let me see if I can find you in little image so people get a bit of a gist of you had that uh that LinkedIn post in that Twitter post where you compiled multiple images that people were taking right yeah let me quickly find that because it gives you a bit of a Vibe of what this was let's see I wish I had this before but there we go we're alive I me know you want me to put put you up on the screen let's see let's see yes here you can put me on I wish I could show this a bit bigger and so this is H this is not even half of the screen you're so small so small compared to your to your screens you see so here it goes all the way back so people actually have to look all the way on the left or the right to find the whole screen essentially and so I you can see the 500 error popping off here nobody needs to know that I just said it but you know what it is yeah and so that was super fun to be on the stage and there were about it they changed the the seat Arrangement quite often but I think they had probably 1100 people on stage or on the stage against the stage I don't know yeah and they've had it for years where they had 1,400 but it was like a little dangerous and so there's all these different setups because it's made for like um oh how do you call those things I I always forget this word it's like what do you have on Broadway in New York musical musicals it's made for musicals so the the the the big screen can open up and there's a huge dat behind and there's like all these cool things they can do so next year they need they need to make it so it opens and then we'll do a full musical behind behind it who knows I might be no it's too much oh I I'm already sharing my screen again and so maybe before I show this let's take this off for a sec y maybe now you've seen a bit of a few pictures let's talk about why I did this talk and what the do actually was because just guitar doesn't do anything for Tech folks it's just fun y so I had to like kind of add a little bit to it because this conference is really it's one of the coolest conferences if you're in the fugs world there's one fuon US excellent there's one in London that's excellent and then there's the one in Amsterdam is Gen tends to be the biggest one and so it's lots of the same speakers we're almost like a family everybody knows everyone and talks tend to be an expert on stage and people listening it's almost like being in college and then it's it's just because it's like that like these folks that speak there are really knowledgeable and they come up with like new software and new death tools and new ways to run fuggs and then they talk about it but it's kind of it so there's no interaction back or not much and so by lunchtime people want to go for lunch even though they just had one of the best Talks Of The Year you know that's just the way this Vibes and I felt like I kind of need to change it up and definitely not to be better than others but it us to be different like wake people up say this is the vibe of this conference and so what I felt like I wanted to do is like if I played guitar and I played it loudly and I played it relatively well people would enjoy it but now how does that fit my job how does that fit fugs how does that fit anything because just guitarist is not interesting and so I thought why not make like a karaoke but for guitar not singing because she don't want to hear me sing I have a lot of proof of that but I won't give it to you like just don't ask me to sing maybe in in in our internal slack you can you can send me an example I have examples where I would record with fellow musicians an album and I would have to sing backing tracks and then they had to really remove my tracks because it was horrible or speed it up or like slow it down so I could reach the pitch and then speed it up again like all the things this was before autot tune right yeah and so um I decided let's play guitar in front of this audience but using only my laptop and the guitar no amplifiers no buttons no nothing let's use as much of the browser and fugs to actually make this happen and so to actually get a really good sound we cannot rely only on the browser like there are some audio processing in a browser but it's really not close to anything real sounding and I know a few folks have done some of this work to kind of like hey you want an echo on your sound you can do it in the browser but it's really really rudimentary so I did decide to use a virtualized amplifier so I plug my guitar into something that makes an on analog signal digital it comes into the computer and then that thing would process it and then sends it back out through the speakers and it sounds like an actual guitar and this has been around for a few years but it's so good now that you start to see these things like people bring their own apps to a studio plug in play and go away again you don't need a fan anymore with all your speakers and all the crap of course you will want that you don't really need it if it's in a mix you don't hear it so I used Studio grade professional stuff and it's like 110 bucks it's it's crazy I come from the time when you had you know amps like that yep the yeah Stacks we call them stacks and we love it right the thing is though that was too much so the whole idea is put this in a browser and see what you can do and so to make the audience participating I thought why not have them vote on which song I play and when they vote they see themselves bounce around on the screen and so maybe it's time to you know share my screen a little bit to show because we have a bunch of new folks coming in um uh you know watching us here and I'll say uh if you are interested in any specific pieces as we go through make sure you put it in in the various chats wherever you are to let us know what you want us to dive into because when we get into the code of this Tim and I were looking at it uh before the stream there's so much interesting there that we're not going to cover at all in in the Stream today so if you want to help guide us along our path let us know it's a little intense but we can we can do it so what I came up with for this year because I've done it a few times last year almost like a test run this year I wanted extra stuff and I came up with the with the thing to make a matly and then when I spoke to my peers about doing a matly they didn't know what matly mean meant and so I was like okay I'm gonna have to change this up because the idea that what I wanted to do is I wanted to play a bunch of songs but I wanted the audience to choose which songs and also in which order to make one mesh up of multiple songs or a matley generally matley are very nice because what happens is that they actually move from one song to the next really smoothly with a few chords and Rhythm I couldn't really do that because I didn't know which song would come next because the audience would vote and so the point is you can see here this is what the people would see and of course they would probably be on their mobiles not not only were there the three big screens behind Tim but there's also a screen where you take your QR code select the QR code and get the ability to vote and the audience was actually able to do that at the time yeah so there's so much to this talk that I actually forgot the most important part what you see on the screen here can I zoom that in just a little I think so this is what you would see on your phone when you scan the QR code you log in with Twitter LinkedIn or whatever you have and I'm using super base to do the login it's literally one line of coding ridiculously awesome you come here and so we are going to do a mashup and so I sold it in the way okay you're going to be your own DJ right because DJs tends to have like a a 30 minute set where they have a few songs that just go flow into each other it's one big performance sometimes it's their own song Sometimes It's other people's songs you know stuff like that and so I thought well I recorded eight songs so I can just select spot number one what song do I like as an audience member number for song number one well maybe let's say I want to go for Bon Joi or maybe I want a DC for number two and I want Metallica and then I want Michael Jackson and so now you can see a bunch of things happening on the screen here because you can also then share whatever your mesh up was or whatever song is like one of your favorites right so you could potentially do this and then it would make you a share URL let me just show you what that looks like so this is the meshup that I just made and so you could share this and so there's a whole bunch of stuff going on behind the scenes that we'll explore now because now when I actually go to what you would see on the screen behind me while you are voting you can constantly change these things right and so when now I I'm just doing it on Local Host because why not behind me you see this screen and you see there's one phote on these four songs and so um if I I would change bonjovi or remove it and then let's see let's what let's do green day and like things would oh that's not it too many tabs too many tabs oh and so now oh I I made a boo boo you hit the play Buton it I clicked on play and then things happen it's also important to note uh when you're doing things like this even if it looks ugly like what Tim just showed having an admin panel of some sort to control thingses super clutch when you're presenting oh yeah I I've used that a few times actually so let me just quickly show you what happens like just like this see I cannot really make it smaller but when I select a song you see that there's like a little face bubble of me bouncing around and then every time I change the song you can see directly that the interface updates and then when I have four of them I can it now makes a cloudinary image that I can share but every time I change you'll see a bouncing bubble off my face because I was logged in with in this case I think it's Twitter so so real fast there's a lot of things happening here and a lot of data on the screen right so we have artists and song information we have live votes we have authentication with users where are those pieces coming from and and how how are they getting to the screen before I dive into that okay let me show you one more thing which is when we play right so this is this so if like we had like 1100 people on the screen or in the conference voting right and they were constantly all of them were like going oh let's let's get to song number two I want another one I want to change it or and then so there were like a thousand bubbles on the screen at one point it was so much I couldn't see the interface anymore that's how many people were voting which is super fun right and so while people were voting um at one point I had to decide okay there's I'm going to play start playing song number one and while I play number one they can still vote for two three and four to change so I wouldn't know what song would come and so when I actually go here and you can see here there spot number one and you see the four songs that were voted on and now this is the active one and so this you would also see behind me um before I go into what happens here when you actually go to yet another URL that is actually on the side of the screen because remember it's this huge screen right you can actually see that it's now showing you aosmith the band information on the screen while I'm actually playing Aerosmith but when I now go into Guns and Roses this will then change into guns and roses and it's all live connected so I don't have to refresh this browser because it just it kind of just looks at um whatever is in the database of the active song and it will just change and then there's also on the other side of the screen we have the statistics and of course it's still the 500 error because I didn't solve it after the conference okay this is one of those moments where I'm just not going to show you that anyways what happens here is when I start playing this I don't think you'll hear this over the stream I heard the music here though I can just turn it off um so there's a lot happening here while you're fing you can still see the face bubbles so I can actually do that if I wanted to you see there's my little bubble going down the bottom I can change it to another one and so you can still vote but what you've now probably noticed is the moment I started playing this song I can now I my spot one is locked I can no longer vote on Aerosmith because imagine you could vote for spot one and that song gets a lot of votes it could also go to spot number two test here defensive programming oh yeah this is like full force Ahad defensive programming here okay so a few things of note we'll go into those a little later but you can see there's actually guitar tone here Joe's funky tone and that's connected to my virtual guitar amplifier but when I now go at one point and it becomes um guitar solo time this interface will change because the browser is talking to my friend virtual amplifier to make sure it um changes sound because from the chorus to the bridge to the solo I need guitar sounds to change to make it you know sound real and I'm not sure um when this will this let's see if there's solo around here somewhere oh yeah here now it went to Tim solo and it anyways doesn't really matter for now we'll go into how that connects in a sec but what I wanted to show you is when I'm near the end here there is a countdown time and so people can still fote on this one and so when it actually goes to zero it will refresh go to another one directly start playing and then number two here is locked for everyone in the audience and just to build that it's pretty ridiculous but it kind of works and so this thing is just going on its own and people keep voting right and so these spots keep changing and then when this hits the end there's no a countdown and I'm better look at the screen to know what song is coming up and while this was happening of course there was less and less fotes towards the end and so now just goes to the next and you can see here that spot three is now locked and so all that stuff kind of talks together through super base and so maybe this is the time to talk how things are connected and then after that maybe we can talk about how does this audio player work how do you talk to your guitar amplifier because what the heck is that um and that audio player is just one giant view component right it's all few components it's all fjs and I use fugs because I know it but this you could have built this with any framework because in the end it's just lots of features that come together but it's not that complex once you know what's happening right there's no higher science here there's just the usage of MEC allance Tech that works so well to together if you just connect it in the right way and then suddenly magic happens and so um where do we start Ryan maybe the CMS where all these song so let's outline the types of data right we have semistatic data we have live data and we have user data so let's start with the semistatic data right that would be our CMS data that's a good move so of course the data lives in high graph because that's where we work that that's what like hgraph is a really really good system to be able to save data and make it well like properly structured and this content wasn't too crazy but I was pretty happy that it was in HRA and so um I have basically only one schema maybe we start with the schema I have a song schema so I have an ID for a song the song title its length um the MP3 um location this is an interesting one if I added the MP3 in high graph or in cloud andar or like some external surface not on the server where the website is hosted the server where it's hosted would decide how to stream that file in chunks or directly or like a whole bunch of things like loading two seconds first and then maybe the rest I had so many issues serving this file from different places that in the end what I did this just pulls a string and so I just grab it from my own code base and then it works perfectly it's important to note right like those those chunking and all those different mechanisms they're super important for like a really good user experience for just like hey I'm watching a movie or I'm listening to a song Maybe not so much when you're trying to play along with a song on stage right yeah because I need the timing to be perfect I need the whole thing to be downloaded I need a bit rate to be the same I need to be all the things because I'm depending on the audio player to send me events every so many milliseconds of I am playing this is the play hand because I have to do a lot of things based on that play hand right so that's how that works then the cover image of the artist comes from a cloudinary integration into high graph because historically I am a cloudinary user and all my stuff is basically always there like my Management console is full of stuff there's a dog then we have things like artwork and presets I'll show you those in a second because these are actually components in high graph and artist the logo of the artist the biography when they were formed in their Hometown because I kind of wanted a little bit of extra fun stuff so I I I want take a quick pause here real fast because I imagine you're about to dive into the presets right yes and this is you got you've got a blog post written that's not live yet but it's either Live this week or next about um volatile data versus domain data or like the idea of like visual building versus datadriven CMS work and the fact that you are building this song and it's got this data stored but also has like the presets for your amp stored in it so it's not a page builder you're not building the page out of it you're storing important data for multiple applications uh inside of one schema in hgraph and that's like I think I feel like that's very much that domain driven data kind of situation yeah the whole idea of the way I use the CMS in this talk is just for each song I have a bunch of metad dat right and that needs to live there and it never changes unless I decide to change a sound for something or maybe a naming of something but it's not like a design related thing of the images left or images right there's none of that in here so what I've chosen to do is all the metadata and the data and the assets and imagery or in one schema that I can then put in an iPhone app if I want to in a year probably won't but I could and so this is not page builder related you're not going to see a preview of this data anywhere because it's literally used as a database and so I let I'm just here in the trooper by Iron Maiden um I never played songs like that in my life but the audience demands Rock like this is so funny every time I talk to folks about this thing like more metal give us the things so this is a pretty iconic song to add right so you can see here my mp3 for my public folder I just put it like that because that was the only way I got it to work Y and this is not to say that high graph streaming server is not working for audio it's just in this application I needed to do it differently it's working its specific way to do most use cases just not exactly so each song has these amp presets right so this amplifier I have here this is a virtualized amp and you can see it actually has different models inside of it and different speaker cabinets it's really really magical you can even choose what speaker but also what microphone and how far is it away from the speaker like you can do all the things in here and so what I needed is to make a few different ones like I have a metal preset that looks like this then I have a punk preset you see it's slightly different again and so there's all these different presets and so they all come with like different knobs I'm turning and normally I would do this in person like all this stuff that you see here it's behind me I have the real stuff you actually hit the push the buttons and yes I didn't want to do that because the whole point was let's use Mac technology and virtualized stuff at this things so what I've done here is for Iron Maiden the first preset that I want is called up the irons that's what a lot of Iron Maiden fans call say you know when some when Iron Maiden plays that's what they say and I want to have preset number four at second number zero then when I go to the next next bit at second 14 I want preset number five and it's called the troops and then when I go and then it just continues like that right so you essentially make chapters from zero from second 0 to 14 it sounds like that from second 14 to 39 it sounds like that so you you chapiz your your audio essentially and so while the thing is playing my code actually speaks to the amplifier to change the sound and so when it's time for the solo it will probably find me the heavy solo preset and so after the solo it probably just goes back to the clean or whatever something like that and that's all set up in the CMS here and what I could have done but I haven't done that's a little nerdy but I made these components so these components are an instance of data that's connected to my um song but what I could have done is maybe make them their own schema because what I could have like this heavy solo sound also works in a Fan Halen song or in a Metallica song so I could have made that a thing on its own that I would link to also but for now it's so specific and so detailed with like the names and stuff that I just connected it as components to my um schema here since last week when you were gone Lo and I talked about content modeling a decent bit uh and one the things to think about here right like you could do that but this is actually one of those pieces that I would almost consider it's the audio equivalent of page building right you actually want this to be volatile you want it to be like you could you could certainly set up those numbers as a model and maybe you might want the name of it but preset 4 you call up and irons here because Iron Maiden fans think of it in this way so also it's at second 39 of this song yep so how do I store that specific thing if it's if it's a thing on its own so no matter what you'd be in a component right because you would still need these the only thing would be you could abstract the name and maybe the preset number out or if you got really nerdy you could bring all of the signals in somehow and send like each of the individual items into the pre instead of having a preset you can actually have it do the presets in high yeah super nerdy this works and I probably like personally this is how I would have set it up if you wanted to and I'll I'll I'll go in like for one second I could put a bunch of fields here right now it's only pc4 right so when we look at this amp it has like this interface here when it says if it's PC number four go to the preset Thim metal you can see that here I I'm afraid I cannot make this any larger yeah the thing is though there are some magic in here because look there's a lot of different things from values to toggles to button presses to zero to 10 things so what I could potentially do is have five more Fields here and each field would actually say have this button go here have this button go here have this button turn on so I could make well let me just not save that because then I screw up my sound but what you could potentially do is with high graph create a whole sound through this API directly into your amp so maybe next year I will have the audience make my sound because every button here I can control from JavaScript yeah and VJ amst keep inviting you back to do it you got you gotta up your game every single year yeah exactly that's that's problematic isn't it anyways um that's what the presets do and then I have artwork because artwork is fun and so if you go back to one of those songs you see that that like every I think 10 seconds it goes to another piece of artwork this it's just fun to to make that look good right so we have the the specific um song art and then there's like you see here there's there's another image and you can see it's like a little bit um seethrough and that's just because I use it with cloud inary and just give it an opacity of 30% and so with a black background it just looks decent and so all of that how this all looks I just put it in here select it in cloud andary and I I also this is a little page buildy right so I can say the X percentage needs to be 10 so it moves to the site a little so I could do that here if I wanted to and so there's some cloudinary specific transforms I could add here too that we don't we we could potentially do that in the cloudinary um interface that we have but I chose to keep it a bit more simple and then do it like this y um so that's the data side of things because like the little logo and the artist and so sorry so that's the static data side of things there's other types of data too so all this stuff all the data you see here also the amp preset all the stuff this all comes from high ground and so just before I'm not sure everybody was was here yet but sharing this image so this is a share URL that will have this as an OG image so it will show up on your LinkedIn in your Twitter all this information also obviously comes from high graph and it's then put into an image by cloud andary and this is the user itself like I have a few users that did this right and so this is their user icon that comes from their login so that that also comes from hgraph and this page as well all right static data done by the way I see we have a bunch of people watching if you have any questions like as geeky as they get from guitar tones to whatever feel free to ask also there's there's quite a few people on on watching and there's not really an easy way to interact with this on Twitter so you can also come on over to the to the YouTube channel or or LinkedIn uh to to join the actual chat or hey you know what you could also head on over I'm I'm gonna do this instead at the end you could head on over right and you could ask have a new sticker I like it uh yeah oh and you changed that yesterday I for to change it back but yes that's so fancy yeah so if you head over there right you can ask your questions and we'll get it there as well exactly all right now I think it's time to have a look at how this more Dynamic data is actually happening and so for that I use super base and super base for the folks that don't know because they're not in the Mac Alliance actually um they are basically like an open source and much cheaper alternative to Firebase that was built by Google a few years ago but I think they have deviated a little bit I don't think they would like me saying that it's like Firebase because it's it's it's kind of wide ranging it's super awesome and so what they do is they give you login and registration capabilities for your app or users they give you um storage for media they give you a postgress database they give you serverless functions and Edge functions real time a whole bunch of amazing things and you can literally build um a SAS application in like a weekend with them because all the things you would normally build yourself they'll just give it to you and they have a great SDK you plug it in and you go I've used it for many projects and it's just fun and they have these like memes on Twitter where they their boss would say oh you worked so hard for four weeks it's amazing and then turns out someone just did it in like two days because super Bas did everything this is true it's incredible so um I use their authentication you can oh let's not show people's emails um I just went away from that fast um so we have authentication but then they also have a bunch of database things that I use right so um for example I have a photes database where I store you can see how many photes I've seen already there's like 35,7 3 so lots of photes have happened and so I just clean it every time so you can see the user you can see the song The user's Avatar and uh um you can see their email in this case it's mine so you're you're fine you can see this and then here which mes meshup spot did this song go to like ACDC went to spot number two by this user and so this is incredibly fast storage because I don't do joints it's just this and so I made a little um postgress few to see how many photes per song There are which is basically a super super super duper optimized version of querying this thing but build on postgress that's where postgress starts to be so amazing they can do so many things and then I also have like what song was played in the mashup so I can lock your screen so you cannot fote again and then we have um all the shares so you see th these are the shares that people did during maybe the last conference I did and so it's with user their Avatar in the fact it was was it a meshup or just a song and then the song ID or all the IDS and then based on this I query this get the specific data for these song ideas from hgraph buildy image share and then I have a little convic which is super clean it's like am I in mashup mode or not and what is my currently active song based on what I'm playing and let me quickly show you what um mashup mode actually means mashup mode is that we vot for these four songs right and so when I go to my quick config that is extra secret that nobody's supposed to say if I reset all these things now when we go back to super base um the photes are gone the songs plays are gone all that and now when I set it to normal mode you can now see in super base that my config says okay I have no active song My mhup mode is false and then when you actually go and vote um you can just vote on any song song without making it um you know a mashup if if they if they had wanted an encore Tim could have set this up and said what I did everyone vote I did that last time because they gave me 45 minutes instead of 25 so I was like oh crap I have four more songs to play let me just put it in normal mode so people can just vote on whatever and I like this live screen that I was behind me just shows you all the songs in their photes and they just click one and start playing no countdowns and then so this is just a different mode and I decided to put that in the database so I can just quickly change things up all right so you see those photes right so every time you hit do a phote it will actually update something in this table and I think didn't I just vote oh I removed the phote again I think let me just vote for this there's my phot and you see that um they themselves also use real real time because it just Updates this interface immediately so in real time what you can do you can actually yeah they I didn't know this existed but what you could do is actually when you are doing the real-time thing you can see all the things happening here yeah and so what I've built now when you hit a phote or remove a phote there's a so there's a real-time Channel listening in superbase to this this fact that I'm voting now and based on that I can do a whole bunch of different things right um let me just put it back to the mashup mode because that's what most people actually have seen um now when we go back to live and then when I actually click on this and we start playing this now in super base when we go back to the database it say actually that the the active song is the trooper because that's what we have here and because of that this page is listening to that on the realtime Channel and directly it shows you Iron Maiden but if I just open this in another Tab and we go back to another song uh let's say bonjovi this is now bonjovi the image is not there yet because I didn't want it to flip quickly so it's the next animation that it would do now it's bonjovi there it is and then it says bonjovi and so every time I go to another song this is now updated immediately and and real fast right this is this is a connection technically it's not a connection right but it's a it's a combination of two databases that work at the same time you've got your real time databased in super base and you've got all your content stored in high graph and they're working together to build these screens exactly and this will just literally query High graph give me that thing I might have optimized it that this thing because it's not a refresh of this page I might have queried all songs put them in a state somewhere and then just play flip the data to the other one also that is way way safer when when doing this live as a presentation than if like what happens at the internet goes down well you've got all the data stored other than the live data so exactly and if you look at there's only been 2K of calls so it's it only did 2,000 gos to to high graph so I was quite optimized yep and so um what's interesting here is it's a websocket connection and that websocket connection only says give me an event that says if something has changed not what the change was so if there was an update to a database or a a new field or a removal you can choose then I would just requery so the information over the wire of the change is just the fact that something got added removed or updated and then I would actually fire something um in my app to requery and so when you see people pH voting and their their face bubbles move around the bouncing stuff that's the same thing every time somebody votes there's a new row in this voting database and so the the websocket would tell my code there's a new thing and I would just query the last phote that somebody made doesn't matter who it was I just query the last vote and push it out and the bubble shows and the interesting thing is maybe now it becomes quite real and complex how you that in code because I'm using um few next with few and if you look at this I need to find a nice real time example real time okay so I have this real time Channel creation thing um let's see where I fire this one yeah so when yeah here so this one is may be interesting so I create a real-time Channel and this is the band page that's the one with um this one this so this screen so this is listening to a change on a certain database of what song is active at that moment right and so I make a real-time chall Channel and it says okay from the config database Wait no that's not the thing where is it here it is so it's called conict changes for the a config and only on an update and once that happens do this call back and it's called refresh song and this is where n comes in it's so freaking awesome because njs has this use async data hook can I call it a hook take time to call it a composable but it's a hook different uh different Frameworks right but it's all the same kind of idea exactly and so what this does is normally this when it runs this thing is like like I'm going to query this this is my my cach key I'm going to do this I'm going to query my super based client from the config get me everything with where the key is active song and it just returns a single field and then um I query that song from high graph which is like this is like a nice optimized way of doing a a graphql query in N so I'm actually querying the song live I don't have them all like we just said I actually query it and so living on the edge you should play that song next year oh yeah I can do that and then it just returns all the data how it needs it but the cool thing is with n it has this refresh property for the fetch so the moment an update happens from the realtime channel that you subscribe to it fires the refresh song it will query again and return it and if it's the same it's just a cash call and so this makes this incredibly easy and fast and so if you want to see how I do this um when playing song updates happen like I have this I in this case I made two real-time channels one for the photes with an insert and one which which songs are played for every type of thing update removal uh insert and the call back in this case would be just gra grab refetch me all the phot for the songs and get me the latest phot back please update my um Global State and then things happen in the app and then here if um for the table songs plate something happens just grab me all like requery that thing and set up the state of my app and so what I'm doing with all these real-time channels I'm constantly quering things retching things and setting it in my store and so I have a store here that is a global state of the app and so in the store I can ask it get me all the songs this does a query to high graph get me the photes for these songs it grabs the songs from here and then queries um super base updates all the fot information for all these songs and then just sets that into the state and then give me all the songs that have been played before and then give me all the convict value so I'm just basically on setup of the song page I'm getting just as much of data as possible that I'm saying well I'm on the song page right and the song page is this one me just oh too many views too many different views oh yeah this is the song page so in here I'm setting the active song to be ACDC and so um you get a whole bunch of information from that song store you're setting a few things I'm setting up this real time thing of listening to certain stuff and so when a phot is happening I just update the store and then um things that listen to the fotes again from the store show certain stuff like if I hit a phot here uh yeah it's locked now but if I phot here and you see the face Bubble Bounce Around that's because the store had an update for a phot and so it's this whole publish subscribe kind of thing that's going on and the more complex your app the happier you are that this is happening because you don't want to code all that complexity with ifs and elses and stuff and you see there's not even that much going on and then it just goes into the song player and so that's the key right there's not a huge amount going on there what's the song player look like Tim and and where for all that come in okay so let's let's go into the player so um let's see where are you with this one okay so this song player has a bunch of different things going on um so this song player is literally this whole thing that you see here so not the sidebar but this here and so the song player holds the information about ACDC Back in Black how long is the song what is my preset what are the background images and actually the player itself that gives you all this lovely EQ thing and the virtu virtualization and visualization all the words and so this actually has a background slider based on the song that I received from my Global State then it has a live votes component that has the bouncing faces in it then it shows you the song details which is this bit here ACDC song name things like that then we have the the audio player itself if in meshup mode it's slightly different because on song and we have to find the next song with 10c countdown if it's not mashup mode it's just a normal song without countdown without going to the next and then um here we actually have the up next thing which is here on the sidebar so it it is in here so as you can see this is not a big one again but it's all put in like smaller components and so perhaps the most interesting one is let's go into the live votes one and then let's go into the player because the player itself has a bunch of things okay let let's go to live votes so the live votes has a bunch of things in it to make this animation of the bouncing faces that we just saw right and so um there's lots of content based on that but the most important thing to know about the data is I'm grabbing my store again the global state of all the fotes are in here and the store is called paa that's something that is built for few and n and it's it's an incredible thing it's it's super powerful and super easy to use I I can sh well let me just show you one second what that store looks like it has lots of things we we don't want to go too deep but it has like these async actions you can do to get certain things to save a share in a database or and it has all these Getters like give me all the songs give me the plate song for a specific song ID or give me the lat votes that's what we're looking at now so the latest vote is something that's set in the store based on that real-time Channel saying hey something changed update the latest vote and then if the latest vote is updated there's a getter in my Global state to get this thing directly and when you get it it's also reactive just like you have in react in few you have something called RAF which is a reactive property and that updates the moment the store updates so here I get my latest vote from the store and there's a whole bunch of things going on here in the client side like when this component mounts it actually creates a canvas and I'm setting gravity to be 0.99 don't ask me why but the bubbles bounced nicest this way real real fast Tim what is canvas oh boy yeah we have to go back one two sentence piece on that right yeah let let me just show you here so this is an HTML canvas tag and a canvas tag is essentially something that you can paint with pixels in JavaScript that might be the simplest way of saying it like in the browser you have HTML dumb notes styling with CSS sometimes you just want to paint a picture or do something crazy that you might be able to do with the Dom but it's not performant enough because every HTML tag that you see let's say like a div has a whole bunch of properties against it in Java JavaScript and in CSS and there's a whole bunch of stuff so that has memory what if I want to do a thousand bouncing face balls based on a certain gravity in craziness you you could in theory do a few bouncing face balls in in the Dom like I I can even visualize the code there right but the amount repainting going on for that would be just it would destroy a browser yeah it would just completely destroy it and the cool thing is this thing needs to run at 6 frames per second while I play music while it visualizes the audio while bounces balls are bouncing and while it listens to the the play hat right because based on the time it needs to change the audio and there's all these things going on the canvas is so performant what you can do with a canvas just as a quick example you can actually get a video source of a video player in the browser that's 4K put it into the canvas by reference and it can analyze every pixel for rgba live and give you the the the numbers of the RGB and of every pixel while it plays live that's how fast the canvases so it's painting with pixels and so that's what we're doing and so I'm literally just I made um a a class called ball and the ball has an image and that image is actually the image of you as a user when you logged in or if you don't have an image I just give you a a little basics or gradient Circle and it has a radius of 25 and it does a whole bunch of Marth thing that I will not go into now because we're 50 minutes in yep and every time it hits an update with a request animation frame and request animation frame refreshes a function as fast as it the the the browser C or your computer CPU allows you to so generally this will go to 60 frames per second and every so every 60th of a second it will fire this animate function it will clear the canvas and then redraw your ball with all these different kind of little randomized things and that that's why you see it moving because it's like every 60th of a second you will repaint it paint paint paint paint paint paint paint and then it does that for a thousand balls without breaking a sweat and so what I'm doing I'm looking at the latest phot when a new phot comes in I do some magic that you don't want to know I actually remove um the how do you call this I remove the reactivity by fugs from my phot because I don't need all that information I just need to push like a little just the user Avatar field from that so I I kind of just clean it up and so sometimes there it's so fast with the voting that there might be five new photes so I Loop over the photes and I push a new ball with the user Avatar and then run and then every 5 seconds I remove the last one in the list and that's how that bounces around and all that fun happens and I glossed over how crappy this was to code but I had a lot of fun with it to be fair animations like this are timec consuming to make and not exactly fun to listen to how they were made no so we don't we won't go into it but if you're Keen this is open source you can just find it on my GitHub and play with it all right so now the next thing we should have a look at is actually this player so let's have a look at the audio player and this might be my biggest achievement in this Co in this code base because doing an audio player or a video player seems kind of simple right you might say just oh just do a video tag and listen to the events the thing is this thing needs to be able to do a lot of different stuff it needs to have a big play button in the middle but I might want to change that over time or it needs to have an audio EQ that listens to the file it's playing and shows you something in a canvas or it might need a 10-second countdown to go to the next song or it has a play hat and it it needs to know the different chapters that we have to change the audio for the guitar you see it needs all these features so rather than me building one big monolithic piece of code that does all that with ifs and else's I made a very simple player that you can extend with something new that you want and then listen to the events so as you can see there's a bunch of events that happen in audio players right play pause my data is loaded I'm waiting I'm playing I have a Time update and time update happens every 10 milliseconds I think or something like that and so what I've done is I created an audio player and I bind these events so I Loop over the events and I said just bind this event and then send it through that player and bubble it upwards and I don't want to go too deep in how this is done because there's a few fugs related things and a few JavaScript related things but everything that happens in the player is basically stand out with an defent listener and sometimes I just do any event all of them but there's also specific ones like if it's loaded data if that event is fired only then I can figure out the duration of the audio file so I just like this if thing like oh the data is loaded now let me quickly set the duration because otherwise you cannot make the little bar that goes from zero to 100% playing because I need the duration and so when it's a Time update one I quickly also let me just do the percentage plate like zero to 100 because then my bar is very easy to to build right it's just a percentage of how wide the bar needs to be versus the container and when it's a volume change I like so there's a few things that I do specifically and the rest I just pipe it through and so it's the event also and also a bunch of little functions that I'm sending and what this is an emit this is a thing in fugs that you have in other languages too I basically emit an event from a component to another place either upwards well in this case it's upwards or to something we call a slot and so what I have here so now we go to the player like this is the player implementation right you see there's a only a few things like set playing through toggle play if it's playing pause it like there's simple functions in here like convert time to duration how far are we along like there's all these like basic things in here and then there's my audio tag and that this is where the magic happens there's this thing called a slot in fugs and I know it's an Astro and I don't think it exists like this in rea but it's just the children thing you put a child somewhere and then it has the context of the stuff that's above it that's what you do in react and in few you can just call it a slot and you can name it so these are specific slots for the controls and you can see I bind a bunch of information of all the things we've just figured out in this player to that slot so when I now write some code inside the child of this play as a child of this player and get all this information right there scoped to me which is super nice so now when we go to the player itself without looking at this for a sec you see there's my audio player and this at play is just listens to one of those emits so when it starts playing I can do some stuff with that play state or when it's ended well I need that ended because then I can just go to the next video the next audio clip if I want to and there's a Time update and there's a volume change and I can do a bunch of stuff with the interface based on these functions like when I do on player time update I set the time based on the current time of this audio player and this is a reactive variable inside my component here now in the interest of time Tim since we we're running up against it let's talk about you have your amp and the amp needs to know when to change presets so how's that work we saw how it worked in high graph right we saw the time codes but how's that work here yeah so this actually a perfect Bridge because I was talking about this slot controls right just now and it's getting all this information and also you can see on time update it was setting this time dot value thing right and this is now where the magic happens to do something with this guitar amplifier I have a medy component and that gets which song it is and it gets that time and so that time is constantly updating when it's playing so this component knows exactly every time the time updates what that time is so let's now go to that midi um component so let me just talk one minute about what midi is because I think this might be one of our oldest apis ever yeah we're talking 40 years here maybe longer I think they maybe have had beginnings of midi in like the 80s yeah so so what midi is is a way to for for devices to talk to each other right so this thing and talk to this thing VI a midi so when I press a key here the output of that is a midi signal and this one receives it and can do something with it this one can press a button it's a midi signal that goes here and so most modern keyboardists will have a midi controller in their keyboard because every midi can do a lot of different things but the cool thing is even though it was meant for only you know how do you call these things like actual devices you hold in your hand it is also working virtually now so I made a midi receiver in my Mac you can just set that up it's really easy and then this amplifier listens to that midi receiver when I go to the settings my IAC driver for Alive and Kicking this is a midi input device so this one is listening to something like this however there's something like this in my case is the browser because the browser has also implemented midi now so over this device I can send on a certain output something called PC2 and this one is listening to that preset here so long story short we have web midi and um um let's see where did I do all that stuff I'm getting the song and the time and yeah here we go so the time updates all the time right every 10 milliseconds the time updates and So based on that time I'm finding the preset from high graph for my amp based on that specific time so when we look at that function I'm just going to check okay I just need to the index of that preset because I have them all in a list right so I'm looping over all my presets and then it just looks at the at value and the at Value we see here in high graph to my preset I know we have time but I need to explain it otherwise it's completely crazy the ad here is zero then the ad here is 14 this is the second number so if the time currently is higher than the preset number of where it needs to start then okay this is the index of the preset I need and then it just just figures out what that name is and sends it back and so then I have that information and then I can set the preset here um so when I set the preset if it's already existing I don't set it because it would every 10 milliseconds change the audio of my amp to the same thing and there's like a um half a second delay that's horrible so I don't do that but the moment that's not the case I go to my output which is our IAC driver Alive and Kicking and that's like the web midi output where that which is the input to this bad boy the input is that driver and here for the browser the output is that driver so I say oh for that output grab channel number one and send the program change that you find in high graph and that program TR [Music] change is one of those program change PC2 31 whatever and that comes out of high graph like this PC 4 pc5 and so essentially these have become chapters and it just listens to you know where where where am I in the song have has it currently been set yes I do nothing if not send the change and go so it's all listening to that publish of the audio player and honestly like just listening to this and like translating to other types of use cases right if you were using the sort of idea you said chapters right like I think about chapters a lot right that's we optimize the videos to have chapters and all that like it's the same kind of thing you could put the number of seconds or whatever it is and if you had a custom video player do a very similar thing to mimic and like clone the YouTube functionality maybe one thing quickly because it's just pure pure fun for me when you hit play you see this thing here right but when I turn down the track volume you don't see it anymore yeah we just discovered that earlier right yeah and the this means this is like a real audio check so I'm making an audio context in um the browser and there's a media element audio Source note and an analyzer note is very interesting so I'm grabbing the player as an HTML audio element I'm making another canvas that we just talked about and then what I do I make a new audio context I connect my player to that context through an element source and I create an analyzer it's all connecting business basically let's not go too deep and then there's a whole bunch of amazingly huge data that's why I need a u8 array to grab that buffer of whatever is coming in and then I'm rendering 60 times a second again and it does a bunch of information I won't talk about now but it basically fills a little bit of a bar for each of those those um analyzer arrays and that's what you see here so this is the base and this is the Heights and this is everything in between and like all these like you see the little squares right that's just a PNG that I um put on on a texture that was normally like a little white diff that goes up and down well not a diff it's pixels it's but this stuff is so fun to Canvas not the Dom anymore it's canvas exactly my old brain cannot deal with that but like you see all these little like this is not a lot of code but inside this there's just magic because this audio analyzer is just a lot of fun and so there's a ton of those kind of things I even did it for my guitar but you see I commented it out because I'm not using it but yeah there's a ton of things going on and we haven't even talked about the sharing of the the asset let me just I know we're over time let me show you how this looks maybe that's that's the last thing okay it's not the last thing but I promise so when you open this is a new tab you see a lot of things going on this is crazy as heck so let me show you the code and then that's the last thing I this so let's see how did I build this is there any specific thing for that URL you'll have a I'm actually really hoping that you like hardcode it like that that you put like the query parameters in for the URL and then use some sort of component for it but probably you wish right you wish all right so let's do let's do the create mashup image so I'm grabbing from super base all these these these songs right so when I go to shares you see there's Basket Case Walk This Way beat it things like that so I'm grabbing those as an array and all songs is the query I get from hgraph so I just filter which ones I need and then I map them to the artwork I need the cover the artist name and what song it is and then goes something crazy so I have cloudinary options here and so I have this is the fer alive in kicking I have a background jpack which is just black and this is the width and the height and it's crops it to fill you have to do that to set it and then the format is jpack so I now made a black jpack and then you can add overlays and so you can just say the song the first song that we want the art of that song so that's like in this case Johnny Be Good and you put that Northwest with a gravity of minus 50 with an opacity of 30 and this is the width and height so now it goes to the left top and adds that image which is left top so it adds this background image here and so I go on the next song is going to be nor Northeast which is this one and so all the backgrounds are built like that then I take the cof of the song and I put it in the Middle with a 3px solid white border which is this and that is done like that it's all repetitive stuff yeah and then in the center I actually put the Avatar of the user which is me in this case and then I have like a specific overlay which does my mashup and fugs Amsterdam and this my logo and stuff and then I just make a cloud and era URL with these options for my cloud name and that's it and this wasn't that hard it's just configuration there there's a lot of typing that goes into it and occasionally you got to tweak things to figure it out but once once you get it not occasionally I I almost died doing it but this is the result it's pretty cool right nice yeah anyway I never and and and I apologize right I never noticed that there were different images in the background if I'm if I'm being honest like I knew that there were the forground images I thought there was just like a collage in the background that just was one static image not if you do look there's Michael Jackson behind there's AC DC like this is real the work that you went I wouldn't notice Tim good job yeah but if nobody notices maybe I shouldn't do it if you hadn't done it it wouldn't look as good that's one of those things where it's like I just I didn't notice didn't mean that the feel of it didn't do the right thing exactly and so what I did with this when I shared this this share link of course this is the OG image but I also added like the hashtag of the the conference in it and so this is just free marketing for a conference where people just share their phot the hashtag of the conference is in there they have made something fun because it's their their mashup and so we had a ton of people actually sharing these and so that that was good fun y so we are eight minutes over Tim um and that's pretty good I have four more hours I know so so here's here's the the challenge for both people watching live right now uh but also if you're seeing this on you know on the YouTube You Know video on demand later on if you want Tim to talk more about anything specific in here and if you want us to dedicate another stream to things that you saw that you want more details on I need to know over our community right so come in join the community at slack. hyra.com and say I want to see Tim talk more about canvas and how he set up those ridiculous numbers to make the things bounce or I want to see Tim talk about how superbase communicated with high graph in a meaningful way let us know there and we'll dedicate another one of these to this later if you don't then we're good and we'll just have this on YouTube Forever and it'll be amazing exactly or you might be a guitar player and you want to know what it sounds like yeah there's a lot of nerdery that we can actually go into on the guitar side of things also or if you come and and join that community and let us know maybe we can convince Tim to do a we'll have to do a close session because actually VJs Amsterdam had a dmca take yes but maybe if we hide it behind a wall and maybe do it through streamyard we could do a a virtual version it wouldn't sound as good but maybe maybe if you come and join us in the community we can convince Tim to do it the thing is um this is a part that we didn't even talk about because yes I have four hours here but it's quite important there's always DRM D DMC copyright stuff going on on YouTube right so what I did with these songs I made them all two minutes rather than their normal four five minutes because they're like 90 songs and so what I did I used Ai and I extracted all the things the drums the focals whatever and then I cut it back like remove all the bells and whistles make it a simple song two minutes and I played all the guitars myself all the backing tracks and everything first of all that's fun as a musician second of all the songs are only two minutes then and no copyright strikes because it's so different because I'm playing the guitar myself but there was one song I just could not play and so I decided to keep the original guitars in and I also decided to keep it the original length and this is Basket Case by Green Day and you would think it's just a little punk song right you can just play that thing holy crap no you cannot like this thing is sophisticated as heck so I just I tried for three weeks to play that song like and to do my own guitar part right no way like I had it even in a way I played the thing it was out of time so I went into my editor and I just put it on the timeline like I cut and pasted my whole guitar I let my wife listen to it being same age as me she knows that song but inside out she's like what the heck is that that's not it like but it's really on time it's exactly what he's playing no it's not so the the trooper by Iron Maiden didn't give me much sweat but the simplest song of the bunch I could not play and so there easy no exactly I kept it in and that's why we have the copyright strike on the stream because it's a full song and I just played over it and then it's too similar yeah there you go all right uh other other quick uh call outs uh we do have comprehensive docs for hgraph so if there's anything that you're curious about in the way that Tim set up those components or the way he's quering that stuff in graphql all of that can be found uh at hyra.com and of course we do also have free accounts uh everything that Tim did for this was done on a free account uh no special account for Tim even though he is a devil and you can get that at app. hyra.com uh and also I'll point out in a couple weeks uh starting on March 20th I don't have a banner for this uh we are launching a beta for our new experience hgraph studio for working with hgraph and we'll be doing multiple events uh around why we're doing it how we're doing it and all the new features that are both in the beta and coming to the beta soon uh so something to watch out for follow us on socials come join the community at slack. hyra.com and get up toate on that uh in in the near near near future it's very near now we better very I I know this because uh devell is doing a lot of the uh the launch events and uh and all the we're testing the beta right now actually we're something um you will get the same features as you had before and also Brian and I can both do our full jobs as devell without having a paid account or any update exactly which is pretty important because we've seen lots of companies around now we won't name names that remove their free tier and suddenly this complicated things happen that's not the case at High Ground like you can make this thing that didn't even break a sweat with a thousand people voting 50,000 queries all the craziness and it just just works and honestly it's great because not not only is is the high graph uh version free for how you did it but super base right you're in the free version of superbase to power that exactly I did have their CTO in my chat wondering are we gonna have to upgrade it it's did you figure out that like go live checklist but it was fine Y and the only thing that might have been a paid account is my cloud and area because I've been a very longtime user and they gave me an upgrade yeah I think I could have probably done it without the one thing that actually went wrong which you don't expect is that we rate limited the GitHub all El login which is crazy there's a lot turns out developers when presented the option to choose GitHub to log into something choose GitHub to log exactly so we could have had a lot more users I think if GitHub didn't B out but all the other things stood the test of this thing which makes me very happy yep awesome well Tim thanks for giving us the tour of this uh it's a huge application that that you've written couple years in a row now and and updated in huge ways um anything you wanna you want to sign off with this week uh my brain is broken after like explaining this for an hour and 15 so not so much I would say we would love it if you come into our um community and chat with us about all things HRA I think that's that's the one thing I would like to say and maybe one other thing is that I will be doing this talk on a few conferences even overseas in the US and so isn't it crazy that I stopped going to school back in the day to play guitar I made no money it was horrible I played in the smallest cafes week after week then I became a developer lost myar a little bit and now I play guitar in front of thousands of people while being sorry you're touring I'm literally touring like last year I did like seven of these um throughout like I did London a few times I did in Paris in Amsterdam Athens almost worked out so this year it will be also in us but if you have a conference that you like and you want this to be like a lovely wakeup call for people to start a conference or talk super nerdy but like I've done this one also at a cloudinary event where they only had customers there was no Tech involved at all and it still works you don't have to talk te as much yep so yeah I'm on tour with my guitar as a Deval who would have thought I'm very excited yeah cool so maybe that's the the right bombshell to end on right I think so yeah why don't you why don't you take us home Tim by clicking end stream you yeah see see youall next week it's the only one cheers all right the button was oh now it's