Fullstack Svelte Course Overview

[00:00 - 00:40] Welcome to Fullstack Svelte. We are very excited to have you join us in building a fullstack SAS application with Svelte JS, Express JS and Postgres. A little bit about the author. I'm Blair Gujour. I'm a Fullstack web developer. I'm a certified scrum product owner. So I've done some team lead work as well. I've contributed to the Vue JS docs. I'm really excited about JavaScript these days between React, Vue, Svelte and all the other really cool stuff going on in the space. And you can find me at github.

[00:41 - 01:41] com/freemang. What we are building? To demonstrate the capabilities of Svelte, we're building a school lunch menu content management system. So the idea is that we'll build an app that school administrators can use to publish a weekly school lunch menu. And then parents and students could view that menu and see what kind of food would be served. So the application will have a public landing page with a sign up feature and then some secured data administration pages that registered users would use. And then another public page for the non-registered users to view the lunch menus. So it's not too complicated of an application, but it hits a lot of concepts that are really important. So things on the front end like input binding, reactivity, conditional rendering, and then things on the back end like rest endpoints, persistence with Postgres.

[01:42 - 02:05] And then in order to make it secured, we'll integrate it with Auth0 to have a security layer. And we'll use JSON web tokens, aka JWTs to accomplish that. So the application will be separated into two main parts. We'll have the front end where we use Svelte to create a reactive web-based UI.

[02:06 - 03:12] And then we'll have the back end where we use Express to create read, update, and delete data that's used by the front end. And here's a look at the high level application architecture. So on the browser side, we've got our Svelte front end. And we'll make rest API network calls with a library called Axios. And so our Svelte front end will talk to the Express back end that'll host that API. And then the Express back end will use next to run SQL queries to insert and read and delete data, etc. from our Postgres database. In addition to those main technologies, we'll also use NPM for package management and Auth0 for JWT authentication. So one thing before we start building the application that we can look at are the front end routes. So we'll have just a few different front end routes and each of these will be a page that will let a user accomplish some sort of functionality. So imagine that we own the domain school lunch.com.

[03:13 - 03:56] So we'll have a base route route that'll be our public marketing landing page. And it will describe the service and contain a call to action for a registration function. And then for registered users, we'll have a couple of routes under slash admin, where they can view a list of weeks. And it can create new weeks. And then they can click on those weeks and drill down into a detailed weekly management page, where they can actually set the menu details for that given week. And then lastly, we'll have a nice looking route that shows the menu for that for a given school for a given week.

[03:57 - 04:33] And so that's the one that non registered users will use. So I'll give you a quick look here at the final product. So we've got our landing page here, with a little bit of description about the service and registration features. So once you're a registered user, you can log in. And we integrate with auth zero. So we get sent over to an auth zero log in page. And then once we log in with auth zero, we get redirected back to the app. And so here's the kind of the admin section.

[04:34 - 05:13] And so from here, you can add lunch weeks. You can click on an existing lunch week and view the details. And so for example, here, we populated the daily details for this week . And then from this page, you can save the details, you can publish them if they're not already published, and then get a link to the public page where viewers can view those details. So that's pretty much it for the high level. Like I said, we'll hit a lot of these different concepts. We'll take things slow. We'll kind of build incrementally and get a lot of really good wins along the way.

[05:14 - 05:23] And we're really excited to have you. So welcome on.