This course has been updated! We now recommend you take the Svelte Fundamentals course.
Transcript from the "Building an Application Frame" Lesson
[00:00:00]
>> So we're gonna take everything that we learned previously in the course and we're gonna apply it to building a game. And the game that we're gonna build is based on data from a website that I absolutely love called cameo.com. Now Cameo is a wonderful website, it's a place where celebrities including a bunch of people that you've heard of, will in exchange for money record a 30 second personalized clip for you the Cameo user.
[00:00:32] So you can get the Insane Clown Posse to roast your friends or wish your spouse a happy anniversary. And once I discovered this site, I became obsessed with the idea that if enough celebrities join this platform, then because they're all kind of adjusting their prices and responding to market pressure, then we finally have a way to form a definitive star power ranking across all different kinds of industries.
[00:01:03] We've got movie stars, rock stars, NBA stars, wrestling stars, every kind of star, they're all in here. And they're all waiting for you to go and ask them to make a personalized video. Now, unfortunately, there is no official Cameo API. So we're gonna have to use some scraped data that I've made available this URL cameoexplorer.netlify.app.
[00:01:33] This is just a very simple app that I built for exploring this data and exposing it. And so you can see that Dennis Rodman is in here. Susie Essman from Curb Your Enthusiasm. In addition to the the data that is available through these celebrities' Cameo profiles, we've also got this most similar to.
[00:02:00] So what this API has done is it's compared all of the little tag lines, like HBO Curb Your Enthusiasm. It's compared those with everyone else's to try and find the phrases that are most similar. So if we flick on Saverio Guerra, for example, it's Mocha Joe. And he's also related to this guy Ryan Vasquez who's also in Curb Your Enthusiasm.
[00:02:27] And this works pretty well, and this means that when we build our game, we're gonna be able to take people who have been in the same shows and put them against each other and you can see which member of the Office cast is worth the most, for example.
[00:02:45] So here's Dean Norris, who is Hank from Breaking Bad. And he is most similar to Steven Michael Quezada, who is Gummy who was Hank's partner in the DEA and best friend for many years. And yet can only charge a fifth, $40, of what Dean Norris can charge, which is outrageous.
[00:03:10] Okay, so all of this data is available at celebs.json. And this is what we're gonna be using to build our game. So we're gonna begin by cloning the starter repo. There's a link on the spelt workshop website. Again, if you're not on that website right now, I recommend that you go to it.
[00:03:32] It contains all of the useful links spelled-workshop.netdefy.app. And we're currently on the building a game section, and it contains a link here to the starter repo which is github.com/RichHarris, my name, /kamiyaparisonstarter, Kamiya Parison is the name of the game. So grab that, And then just clone that repo CD into it.
[00:04:18] And while it's installing dependencies, I'm gonna show you what the final version of this game that we're gonna build together is gonna look like. So we have two screens, we have this welcome screen where you can pick one of seven categories, actors, athletes, comedians, creators, models, musicians, and reality TV.
[00:04:39] And then, oops, failed to load data, that's not a good start. Then it will present ten pairs of celebrities, and your job when you're playing the game is to decide which of these you think is worth the most money. In this case, I'm going to go with Oscar.
[00:04:57] And I was right. And we'll just go through that one at a time. I've started to get pretty good at this. And I'm gonna go with Duncan. No, bad guess. And once you've completed all ten, it'll tell you the results and take you back to the welcome screen.
[00:05:17] So it's pretty simple, but you can see there's a few different things going on here. We've got some transitions happening, we've got some asynchronous data loading happening. And various little bits of motion, we've got one of those crossfade transitions so that when you click on a face and the big result icon appears, it then sort of goes down into the results row there.
[00:05:46] And we're gonna be building all of this in the next section of this workshop. So dependencies are installed, let's get started. NPM run dev is going to launch our development server. In fact, you know what, I'm going to launch this from the terminal inside VS code because that way we'll be able to see everything all in one go.
[00:06:10] Just bring that open. Open my terminal. Do MPM run dev. Okay app is ready and running on local host 5,000. Right, and this is basically what you would get if you were to claim the spelt default starter template. There's just a couple of small additions, which is that I've replaced the fav icon with a logo for Kamiya Parison.
[00:06:49] And I've added some little utilities here that we're gonna use when building the game. And I've added some icons for, The green check and the red cross. But other than that, it's just the default starter template.