Introducing SvelteFlix

[00:00:00]
>> Okay, welcome to the final part of the SvelteKit workshop. We're gonna take everything that we've learned in the preceding sections and we're going to use it to build a full stack application. Specifically we're gonna build this application SvelteFlix, which is an app for finding the most popular movies of the day and adding them to a personalized watch list.

[00:00:22]
So I'll give you a quick rundown of the features that this app includes before we try and clone it. On the home page we can see the top trending movie which somehow is Shazam today, followed by a list of all of the trending movies, and the now playing movies, and the upcoming movies.

[00:00:38]
And if we click into one of these, we see a page for each of these and if we log in to the app, Then we're gonna be able to add movies to our watchlist. In my case Cocaine Bear is already on my watchlist. Along with John Wick, Avatar and 65.

[00:01:03]
We can search for movies. And we can look at these trending pages and we've got a nice little infinite scroll going on where it's gonna load more data without paginating. We're gonna begin by creating a brand new project using create svelte. So in here I'm gonna say npm create svelte@latest and I'm gonna give it a name of svelteflix.

[00:01:34]
That's gonna scaffold a brand new project for us. I'm gonna use a skeleton project, so down arrows like that. We're gonna use TypeScript in this app. I'm gonna add prettier and we're probably not gonna get to testing but I will add Playwright anyway, just so that we can see where are tests would go if we're gonna add tests.

[00:01:58]
Right, so it's created our app and now we need to open it in our code editor, I'm gonna be using VS Code. And if you have the option to use VS Code I recommend doing so. VS code has a really good Svelte editor extension which you can install from the extensions pane here.

[00:02:17]
I already have it installed but if you search for Svelte, you can find Svelte for VS Code here, install that and that will give you out of the box language support. All right, I'm gonna bring open my in-editor terminal and install all my dependencies I'm gonna use pnpm, but you can obviously use npm or Yarn if that's your thing.

[00:02:43]
And now that we've got our dependencies, we'll start the development server with pnpm dev or npm run dev. I'm gonna move this over to the left hand side of the screen and open our development server in the browser. All right, so first thing we're gonna do is just get rid of that placeholder content, which we don't want anymore.

[00:03:14]
All I want to do before we do anything else is scaffold out our layout. So we have a navigation bar up here and then at the bottom of the page, we have a footer giving information about where the data for this app is coming from. So let's build our layout first of all, create a new file, +layout.svelte.

[00:03:38]
And then inside that file, we're gonna first create a nav bar. We'll add a link to the home page. And then inside, we'll put the SvelteFlix logo in a moment, but for now, we'll just spell it out. And then further down, we're gonna have a set of links that all belong together div class = links.

[00:04:11]
And we're gonna have a link for our search page. We'll have one for the watch list. And finally, we'll have one for logging in. Eventually we'll want to only show this if the user is not already logged in, but for now we're just gonna rough it in like that.

[00:04:44]
Obviously this doesn't look a whole lot like what we have over here. So we're gonna add some CSS to this page to make it look a little bit nicer. I'm gonna create a new file styles.css inside my source directory. And then here I'm just going to add some universal CSS that I want to apply throughout the app.

[00:05:16]
First, we're gonna apply position: relative, and box-sizing: border-box, to everything, this is the first thing that I add to any CSS file because I never want elements that have default values other than these. And then I'm gonna get rid of the default margin on the body, cuz we're not gonna need that.

[00:05:50]
And I'm gonna make the body flex element, With the flex direction of column. Right, this app has a dark theme, it only has a dark theme, you don't have a light and a dark theme in this app. So we're gonna add a background to the HTML element. And it's gonna be a subtle radial gradient that looks almost like a silver screen when a movie isn't playing on it.

[00:06:29]
We had a radial gradient that begins at the middle of the screen, at the top of the screen, so that's circle at 50%, 0%, 50%, across 0% down. And the center of that gradient is gonna be hsl 0, 0, 8% which is a dark gray and it's gonna radiate out to hsl 0, 0, 2% at the end, which is a darker grey.

[00:07:09]
If I save that, nothing happens because I haven't yet imported it into my app. So in the layout.svelte, we're gonna add a script tag. And we're gonna import the styles.css file that we just created. And that didn't work, and I'm not sure why. Let's take a look, it might be because I got the syntax for the radial gradient wrong.

[00:07:35]
If we open DevTools, we can get a better look at that. We can see that indeed there is an alert arrow next to that CSS declaration. So let's see if we can figure out what's going wrong with our radial gradient. It might be because I didn't specify a starting position for that value.

[00:07:58]
Okay, we need to add the the percent to the saturation value of our HSL value. And we're gonna make the the background attachment fixed. So that it doesn't scroll when we scroll the page. And we're gonna make it fill the screen. And then we're gonna need to add a color that's slightly off white, otherwise it's not gonna be visible against the black background.

[00:08:34]
So we'll add that too. Okay, so we've got the basics of our global CSS added, let's add some styles to the navigation bar itself. Now, so in our layout .svelte component, we're gonna add some navigation styles, we're gonna make this a flex element With display flex I'm gonna give it a height of 3rems.

[00:09:10]
I'm gonna align everything in the center. We want the links to be on the right-hand side and the homepage logo to be on the left-hand side. We can achieve that with justify-content space-between. And we wanna set a color for the links, and we also wanna set a maximum width.

[00:09:31]
It's gonna be slightly constrained because otherwise, when we get to really big screens, it'll start to look a bit silly. So in this app, it actually maxes out at 80 rems and we're gonna be using these values a bunch in the app. So I'm gonna add them in the global stylesheet so that they can be referenced as CSS custom properties.

[00:09:51]
So up here, I'm gonna add an accent color. Which is gonna be the color of the logo, which I stole from the Netflix logo. And to be precise, that color is hsl 1, 59% saturation, 50% luminosity. And the column size is 80 rems. And we're gonna add a custom property that defines the padding on the page as well.

[00:10:27]
We'll call that side and it'll default to 1 rem. So we'll set a max width here of var -- column, and we'll set some padding, 0 on the top and that side value on the sides. And the color is gonna be the accent color that we defined before.

[00:11:01]
Okay, so it's starting to resemble the one that we've published online already a little bit more closely. But we wanna get the and that accent color onto these anchor elements, so we'll do color: inherit there, and I'm just gonna disable the underline. Okay, great, we need to get a better typeface though cuz Times New Roman is a sin.

[00:11:26]
And we're gonna use the system UI font for the default font because that way, It will load without loading a web font from somewhere. And it'll look nice on everyone's platform.