Fullstack Svelte Course Overview

Introduction

Setting up your local development environment

Setting Up a Svelte Local Development Environment

How to Initialize a Boilerplate Svelte Project

Setting Up a Formatter and Linter for Svelte Development

Setting Up A Development Environment

Setting up a Single Page Application Router

An Introduction to Svelte Routing for Single Page Applications

Creating a Front End Layout for Admin Pages

Front End Layouts - Creating Reusable Parent Components

Front End Routing

Using Front End Component Libraries for Svelte Development

Learn Svelte - How to Create a Basic Landing Page

Using Svelte to handle DOM events and bind inputs

A Guide to Handling DOM Events and Input Binding with Svelte

User Interface Styles and Interactions

Initialize an Express Node.js Project for Svelte Development

Creating REST API GET, POST, PUT, and DELETE Requests

School Lunch Data Model

Creating the Backend Application

Fetching Data from the Frontend with Axios

How to Use Axios to Fetch Data From APIs for Svelte Apps

Using Svelte Each Blocks to Iterate a List

Svelte 'each' Blocks - Loop Through an Array and Update a DOM

Using Svelte to Show and Hide Loading Spinner Icons

Externalizing Frontend Configuration

Fetching Data in the Frontend

Installing PostgreSQL Locally to Add Persistence to a Svelte App

Configuring Knex js Migrations for Database Management Scripts

How to Use Knex js in an Express Backend App

Adding Post, Put and Delete Endpoints to the Backend

Sveltekit Endpoints - How to Use Post, Put, and Delete

Adding Persistence with PostgreSQL

Cleaning Up the Front End of a Single Page Application in Svelte

Building a Form in Svelte That Lets Users Create Data Entities

The Lunch Week Details Component

Creating, Updating and Deleting Data in the Frontend

Securing the application with JSON Web Tokens

Securing a Svelte Application with JSON Web Tokens

Evolving the App to a Multi Tenant Architecture

Get Started Creating a Multi Tenant Application in Svelte

Creating a User Signup Flow for a Multi Tenant Svelte App

Securing the Application

Public Lunch Week Page

Public Lunch Menu View

Building Svelte Single Page Applications and Serving Static Files

Production Deployment

This course teaches all the major concepts you need to build a production ready SaaS application by step by step _building a fully functional application_. The course is divided into two main parts - the _frontend_, which uses Svelte to build an interactive, rich user interface and the _backend_, which uses Express and PostgreSQL to build a server that handles data management.

Svelte is an exciting new frontend UI framework that offers a very developer friendly workflow and easy to learn syntax. Express and PostgreSQL are tried-and-true technologies that provide a rock solid backend.

Across about 7 hours of video instruction with full source code, this course covers everything from setting up your development environment to securing your application with a multi-tenant architecture and ultimately deploying the application to production.

Build a Svelte app with Node.js, Express, and Postgresql

In this course, we'll be creating a full stack SaaS application with Svelte, Express and PostgreSQL

Fullstack Svelte

Persistence with a relational PostgreSQL database

Frontend create, read, update and delete operations

How to integrate Auth0 for JWT authentication

We are excited to have you join us in building a working SaaS application using Svelte, Express and PostgreSQL. It is wonderful to have another awesome JavaScript user interface framework and we hope you will enjoy working with Svelte as much as we do.

The next few sections will give you an overview of the project organization and architecture. The project will be separated into two main parts:

We will add features incrementally, with lots of small successes along our way to building a fully functional end-to-end web application.

👩‍💻 Download the complete set of code for this course 

To demonstrate the capabilities of Svelte, we are going to build a 

school lunch menu content management system

 that school administrators can use to publish a weekly menu for parents and students. The application will consist of a public landing page with a sign-up feature, a secured data administration page and public lunch menu pages for a given school and week.

Here are a few high-level user stories that we will be working on:

---
title: Fullstack Svelte Course Overview
description: Fullstack Svelte Course Overview
role: 'INTRODUCTION'
privateVideoUrl: https://fullstack.wistia.com/medias/xe7odbsq4j
isPublicLesson: false
---

### Welcome to Fullstack Svelte!

We are excited to have you join us in building a working SaaS application using Svelte, Express and PostgreSQL. It is wonderful to have another awesome JavaScript user interface framework and we hope you will enjoy working with Svelte as much as we do.

The next few sections will give you an overview of the project organization and architecture. The project will be separated into two main parts:

-   The **front end**, where we will use Svelte to create a reactive web-based user interface
-   The **back end**, where we will use Express to create, read, update and delete data used by the application.

We will add features incrementally, with lots of small successes along our way to building a fully functional end-to-end web application.

## Code Downloads

I> 👩‍💻 Download the complete set of code for this course [here](https://api.newline.co/assets/protected/courses/fullstack-svelte/downloads/course-full.zip)
I>
I> 🎳 Join us over at the `#svelte` channel in our Discord server - [here](https://newline.co/discord).

### What we are Building

To demonstrate the capabilities of Svelte, we are going to build a **school lunch menu content management system** that school administrators can use to publish a weekly menu for parents and students. The application will consist of a public landing page with a sign-up feature, a secured data administration page and public lunch menu pages for a given school and week.

Here are a few high-level user stories that we will be working on:

-   A school administrator should be able to register their school and create a username and password for the application
-   A school administrator should be able to publish a weekly school lunch menu consisting of the lunch items for each day
-   An unauthenticated user, such as a parent, should be able to view a public, mobile-friendly page showing the school's lunch menu for a given week
-   The application should have a multi-tenant architecture so that many schools can use the application independently

freeman-g

Welcome to Fullstack Svelte. We are very excited to have you join us in

fullstack SAS application with Svelte JS, Express JS and Postgres. A little bit

the author. I'm Blair Gujour. I'm a Fullstack web developer. I'm a certified

owner. So I've done some team lead work as well. I've contributed to the Vue JS

I'm really excited about JavaScript these days between React, Vue, Svelte and

other really cool stuff going on in the space. And you can find me at github.

What we are building? To demonstrate the capabilities of Svelte, we're building

menu content management system. So the idea is that we'll build an app that

can use to publish a weekly school lunch menu. And then parents and students

menu and see what kind of food would be served. So the application will have a

page with a sign up feature and then some secured data administration pages

would use. And then another public page for the non-registered users to view

So it's not too complicated of an application, but it hits a lot of concepts

important. So things on the front end like input binding, reactivity,

and then things on the back end like rest endpoints, persistence with Postgres.

And then in order to make it secured, we'll integrate it with Auth0 to have a

And we'll use JSON web tokens, aka JWTs to accomplish that. So the application

two main parts. We'll have the front end where we use Svelte to create a

And then we'll have the back end where we use Express to create read, update,

that's used by the front end. And here's a look at the high level application

So on the browser side, we've got our Svelte front end. And we'll make rest API

with a library called Axios. And so our Svelte front end will talk to the

that'll host that API. And then the Express back end will use next to run SQL

read and delete data, etc. from our Postgres database. In addition to those

we'll also use NPM for package management and Auth0 for JWT authentication. So

start building the application that we can look at are the front end routes. So

different front end routes and each of these will be a page that will let a

some sort of functionality. So imagine that we own the domain school lunch.com.

base route route that'll be our public marketing landing page. And it will

and contain a call to action for a registration function. And then for

have a couple of routes under slash admin, where they can view a list of weeks.

new weeks. And then they can click on those weeks and drill down into a

management page, where they can actually set the menu details for that given

we'll have a nice looking route that shows the menu for that for a given school

And so that's the one that non registered users will use. So I'll give you a

final product. So we've got our landing page here, with a little bit of

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

log in with auth zero, we get redirected back to the app. And so here's the

And so from here, you can add lunch weeks. You can click on an existing lunch

details. And so for example, here, we populated the daily details for this week

page, you can save the details, you can publish them if they're not already

get a link to the public page where viewers can view those details. So that's

the high level. Like I said, we'll hit a lot of these different concepts. We'll

We'll kind of build incrementally and get a lot of really good wins along the

And we're really excited to have you. So welcome on.