HACKATHON Project - What We Built in 24 Hours...

hello everybody and welcome back now some of you might have noticed that wasn't super active the past couple of days on YouTube and that's because there was actually attending a hackathon now what I'm going to be doing in this video is discussing what I built at the hackathon why it was such an awesome event and kind of walking you guys through the story of how we ended up getting to where we went now if you haven't heard of a hackathon I'm gonna briefly introduce you to what kind of the concept an idea is but I would definitely highly recommend that any of you if you have the opportunity to go do attend one as it is a really cool experience so the hackathon that I went to is actually in Montreal at Concordia University now this was a really awesome event it was massive there was about 700 or 800 people actually there which broke down into about close to 150 teams of four people now essentially what hackathon is is a 24 hour or 36 or some duration long event where you just build a hack now a hack could be something Hardware related it could be something software related but they all follow a kind of theme now after this event I believe there was something around 25 different sponsors and there was about 12 different sponsored challenges now what these challenges are are large sponsors like we had sponsors like TD and Sun Life and a bunch of other massive tech companies like CGI and I'll name a few other ones later it will pick some something that they want you to build so let's say hey use our TD insurance API and build an app that you know does this with it or does that with it so you can decide to compete in these different challenges and then if you win you'll get different prizes so I think one of the better prizes I noticed was an oculus rift and that was given to every single person of the winning team and I believe that was from I don't actually know the company that sponsored it but it was like an augmented reality challenge where you had to build some AR game or some augmented reality application so there's a lot of cool stuff there I know what RS they had like a Unity game development one which is really interesting in the project we actually decided to build with something to do with called the octave music API now you probably haven't heard of this company as I haven't but their challenge was build something with our music API so that's what we decided to do so anyways that's enough about what hackathon is and kind of how they work now let's talk about my adventure to and from this hackathon and how we built the application that we did right so I'm just gonna kind of walk you guys through the itinerary for this hackathon what happened through it a little bit of story of how we built our application so I'm gonna start from actually midnight the day before the hackathon so this would have been I guess Friday night so since our bus actually left to go to Montreal at 3:30 in the morning we kind of decided that we weren't gonna go to bed the night before we're gonna sleep the entire day and then we were gonna stay up until the bus so maybe from like 9 p.m. until when the bus arrived and that would be fine so that's what we decided to do maybe a bit of a mistake but anyways we went to one of our other guys on the teams house and we stayed there and just kind of got to know each other a bit better because some of us hadn't worked together before like I didn't know to the teammates that were on our team and we looked at all of the sponsored prizes and all the different companies that were gonna be there so this is where we actually decided our idea which was gonna be to build this music player we had a whole bunch of features we wanted to add to it then we didn't get end up getting with our first initial concept was we wanted to use ml to detect your face and figure out what emotion you were and then based on that emotion so I guess mood vibe whatever you want to call it we would serve different music to you this didn't end up working I'll talk about that later but now I'm just gonna be looking at this itinerary and just kind of walking you through the hours of the hackathon and what happened so our bus left at 3:30 4:00 in the morning we got to Montreal around 6:00 there was breakfast at 7:00 a.m. in between 6:30 and 7:00 was where we got to find our workspace now this was like vitally important which we didn't really realize was finding a good workspace so there's a massive building is about 12 stories tall that just had a ton of rooms in it there were kind of like boardroom study room kind of things so we had to find one of those literally every room was taken when we got there we got lucky and we actually had the security guard open up a different room on one of the higher floors for us so I'll show you a photo we ended up getting a decent room and then between that time and 9:30 a.m. was kind of a time to continue planning and think about what idea we wanted now 9:30 a.m. was the opening ceremonies I'll show some clips of it here and they're essentially all the sponsors came out they announced you know what their challenges were and why they were you know sponsoring the events and that was pretty cool I got to hear about a lot of the cool stuff that some Canadian companies were doing to lift some sponsors I'm just gonna go to the back of the book here because I can't remember some of them there was a P unity tell us sap Zendesk sonlife octave group Shutterstock CGI and you know there's a ton more as like lenôtre Ubisoft matte rocks there I think there was like 30 sponsors or something for this event so after 9:30 at 10:45 the hacking period started now this is 24 hour hacking so literally between that time and 10:45 a.m. the next day is when you had time to build your projects we got started right away and you know built a ton of different stuff now in between there I believe there was lunch at 12:00 there was a career fair they had that I didn't end up going to that was in the main kind of Lobby where they had all the sponsored booth it's and you had an opportunity to go talk to the sponsors network you give your resumes if you wanted to and they actually gave us these badges which I'm holding right here that have a QR code on them that represent like this QR code is pretty much everything about you so when you applied to the event you gave in your resume and all this information so any of the sponsors if they wanted your info they could just scan this QR and I'm just wearing it so you guys so I remembered to talk about it and they'd get all that info which was pretty cool this was also how we got lunch we just scanned that and all the meals that they provided for free at the event so lunch was at 12:00 there was a midnight snack at 6:45 or not midnight sack sorry supper at 6:45 and then midnight snack obviously at midnight and then hacking ended 10:45 a.m. the next day so I'll kind of walk you through our sequence of events while hacking so once hacking started when you got a really good start for the first like two three hours everyone was just kind of learning all the modules we knew exactly what we were gonna do and then at kind of the three hour mark I had been trying to train this ml model to do your motion recognition it was like kind of working but it just was a huge headache and it was gonna take way longer and I knew I wouldn't have enough time to implement it so we scrapped that and then I started working on the music API now the guys the other guys on our team were just like learning front-end development and learning all the stuff they needed to do to make the website which I'm gonna show you guys later so the company's API that we use was called octave group and they do like all kinds of music delivery systems and stuff for companies and they have like apple music for business they're like partners with that so they had this API that they wrote custom for this event unfortunately this was the worst API I've ever worked with and it result to me taking about seven hours to actually get it fully functioning and part of those seven hours was me going down to the sponsored booth and sitting beside the guy who wrote the API who was actually there and I was texting with him on this little chat app like for like three hours before that so I went down sat with him we debug this API and eventually after like two hours of doing that we got it working while I was sitting down here I'll say about five or six groups actually came up and had the same issue was as us so anyways that was fun so after that we got the music part working we're already kind of behind cuz I figured I would have done that quicker and then I just started working on more back and more back and more back-end and you know I can't really walk you guys through everything that was happening but essentially I'll say that once we got to the 12 hour mark of hacking all of us had been up for at least I want to say 30 hours so we were pretty exhausted and it was starting to get a lot sloppier when it came to coding like at the beginning everything was beautiful I get commits we're wonderful and then you know all you guys can see the repository I'll put in the description things just kind of went to crap um and yeah so I was interesting so names we stopped hacking at 10:45 a.m. we had a functioning application with a few things kind of broken but as we expected and then it was time for project demos so project demos are essentially you bring all your stuff downstairs you set up your laptop and you just demo what you made now this was really cool cuz I got to see what everyone else was working on and I will say there was some groups that made some mind-boggling just amazing things some ones off the top of my head were like a sign language detector these guys made an augmented reality like clash of clans kind of like game there was one for like parking assistance there was just all these different apps I'm not gonna run you guys through all of them but really cool to see what people were able to come up with and some of these things looking at them like could have been full-on businesses what they made in 24 hours which makes me question if they really did it at during the hackathon if they did it beforehand but regardless and really cool so after that we had the closing ceremony so that demo was actually also known as the judging period where judges would go around and rank your kind of stuff and look at it unfortunately during the closing ceremonies we didn't win any awards that's just because as you guys will see when I demo the project it wasn't very fine-tuned the initial idea and concepts were there but a lot of things we wanted to add we couldn't execute on and you know looking back all of us probably would have changed our approach to what we decided to me if we were really going for awards but it was a great learning experience had a great time and at the end of the day I mean you know as much as some of the prizes were pretty meaningful that's not why we went to we went to have a good time create an app and that's exactly what we did so during the closing ceremonies they announced you know the winners that's where people got to got to go up and present what they maiden get the prizes from the sponsors then after that we took our bus back from Montreal back home and that was the event so that was kind of the story of my hackathon event really great time and again I would recommend to any of you if you'd like to go to those you don't do it just go even if you don't have a team go solo there was a ton of people that went solo there's actually someone who won I think like fifth place in the entire event of like 700 people alone which was really impressive and it was good for her so anyways that was my story now I'm gonna get into a demo and show you guys exactly what we built all right so I'm on my computer here and I'm gonna be showing you guys the website that we actually built now unfortunately there's quite a few errors with this website now because our API token that was used to access the API for the music was actually invalidated today so that means a lot of the kind of online and cooler features of this website don't work anymore so I've had to modify it to work offline but I still will be able to show you most of the functionality so this is our website it is called vibe now you can see this is running localhost right we haven't deployed this this is meant to run localhost it's not meant to run on an actual proper you know web server and this is run using flask now I'm just gonna show you guys some of the features of the website and I'll talk about the more technical details so obviously on the sidebar here you can choose your vibe so happy sad energetic or calm and that was kind of the selling point of our website was just really simple really easy we don't want all these custom features just simplistic you pick a vibe and it shows you some songs that are in that fight now I've manually added these songs to this playlist but the idea is you can search for songs at the top here this isn't currently working as I'll show you because we don't have access to the API anymore and then you can decide to add those songs to whatever playlist you want and you can kind of organize your songs into four different vibes so what we have here is you know the duration the artist and the song and if we want to go ahead and play some music we can press play now the idea here again would be that you would cue songs and then you know you view your cue and play the songs again I can't do that for you guys because the API is not working so we can't actually do that now I'll show you a little bit about how this communication actually happens from the websites so the API we're using actually runs on your computer it runs a music server locally so the way that you need to play music is by sending specific commands to this music server in the form of you know get requests work post request so in this case you can see all the different commands running on my web server which is on the right side here which runs the website and then you can see some commands on the left side which runs the music server so what we did was we had this website here send commands to the music server to play the sound so this is really just an interface for the music playing in the background of your computer and that's why again we can't make this work you know over the web on HTTP because that wouldn't work you need to have the music server running on your computer as well so I mean I'll just play a few songs for you guys to prove that this is indeed working so I'm just gonna fast forward and we see we'll play the next song in our playlist last fast-forward again and we get another song now unfortunately I can't play too much of the song otherwise YouTube is probably gonna take down this video for copyright but you get the point right so this is the web server here we can decide which songs to play and yeah that's pretty much what we were able to accomplish on this website so I'll walk you a little bit through the code here and just give you an idea of how much actually went into the site and why you know maybe it's not as amazing as you guys would have pictured in 24 hours keep in mind that this was created with pretty well absolutely no breaks so at the beginning the code was all nice and beautiful and then by the time we got to you know probably 12 hours we stopped really caring and just coded and tried to get it done as fast as possible so you'll notice that the entire front and I'm kind of looking at it right here with index is built with pretty well all custom HTML and CSS so almost everything we did here was custom we used a little bit of bootstrap but really only for those tables that you saw in the main page bootstrap was not a main part of this website and then we wrote all custom jQuery and JavaScript to handle some of the things like changing the vibe in the gradient based on the one that you could choose so notice this is the gradient for energetic if we go to happy we get a different gradient that gives us some different colors so that was kind of a cool feature of our website as well one of our other teammates managed to get those gradients working which was awesome and now I'm in kind of the main back end which is what I was responsible for for most of the event so I handled kind of setting up most of this flask backend although those guys did do some of it as well the other teammates and then I pretty much wrote everything in this models folder here which handles all the connection to the website are certain as the website to the music server that I showed you guys are running so we have a database we actually store all of the songs that people select and add to their playlist in a MySQL database that's local on the computer then we had this player module and you can see kind of some of the things that I was sending here so all of my different authorization you know you guys can copy this token if you want it's not working anymore we have playlist which just handles you know playlist object song pretty basic and then song library which actually searches through all the songs from the API but again this isn't working because we don't have access then we had a few other things we had to do so we had a setup script just to remove some old songs and to update the playlist manually so that this would work locally and then a start music and start website just as some shortcuts to actually get the music server and website running so that was pretty much what we did at the hackathon in 24 hours the people that we showed this to were pretty impressed just because they did understand how difficult it actually was to work with that API so I'm happy with it it was a cool event and definitely a great learning experience especially when it comes to front-end development as I had not very much experience with that before the event so no reason that has been it for this video if you guys enjoyed make sure you leave a like subscribe and I will see you guys in the next one

Channel: Tech With Tim

Views: 147,783

Keywords: tech with tim, hackathon projects, hackathon 2019, hackathon ideas, coding hackathon, hackathon coding competition, 24 hour coding

Id: 8gNTyr1DXc4

Length: 14min 56sec (896 seconds)

Published: Tue Jan 28 2020