Fullstack Svelte Course Overview

Introduction

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

An Introduction to Svelte Routing for Single Page Applications

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

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

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

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

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 a Svelte Application with JSON Web Tokens

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:

We will be using Svelte for the front end of our application. Svelte will be responsible for the interactive parts of the application such as user input forms. The Express back end will handle server-side operations like saving data and retrieving stored data. Lastly, we will use PostgreSQL as a relational database to store data persistently.

We will use Node Package Manager (NPM) to install some open-source libraries like Axios for API network calls and Knex for talking to the database.

Once we have the basic application working, we'll integrate Auth0 to secure the application using JSON Web Tokens (JWTs).

Here is a high-level architecture diagram of our application:

Let's cover one more design item before we get started building the application. We need to think a little bit about organizing our 

. Frontend routes are the pages in an application, e.g., the URLs a user can navigate to and the corresponding functions a user can do on those pages.

Since our application is relatively simple, we won't need too many routes.

For the purposes of our project, let's imagine we own the domain name 

. A good route should be human-understandable and should make hierarchical sense. Here are some examples of routes we will need:

We've covered a few high-level parts of the application design and architecture, but not in too much detail. At this point, we know enough to start building and can let the lower-level design details emerge as we work.

In the next module, we will initialize a Svelte frontend project and set up a local Svelte development environment.

---
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

### High-Level Application Architecture

We will be using Svelte for the front end of our application. Svelte will be responsible for the interactive parts of the application such as user input forms. The Express back end will handle server-side operations like saving data and retrieving stored data. Lastly, we will use PostgreSQL as a relational database to store data persistently.

We will use Node Package Manager (NPM) to install some open-source libraries like Axios for API network calls and Knex for talking to the database.

Once we have the basic application working, we'll integrate Auth0 to secure the application using JSON Web Tokens (JWTs).

Here is a high-level architecture diagram of our application:

![High Level Architecture](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_01/lesson_01.01/public/highlevel-architecture.jpg)

### Frontend Route Examples

Let's cover one more design item before we get started building the application. We need to think a little bit about organizing our **routes**. Frontend routes are the pages in an application, e.g., the URLs a user can navigate to and the corresponding functions a user can do on those pages.

Since our application is relatively simple, we won't need too many routes.

For the purposes of our project, let's imagine we own the domain name `schoollunch.com`. A good route should be human-understandable and should make hierarchical sense. Here are some examples of routes we will need:

-   <https://www.schoollunch.com/> - our public marketing landing page describing our service and containing a call to action button for users to register
-   <https://www.schoollunch.com/admin/manage-menus> - a secured page where the admin can view lunch weeks and drilldown into the week-details page
-   <https://www.schoollunch.com/admin/manage-menus/week-details/:id> - a secured page where the admin can manage menu details for each week
-   <https://www.schoollunch.com/lunch-menu/pinewood-elementary/2020-01-01> - a public page that will display the weekly lunch menu for the school and week specified in the route

### Module Review

We've covered a few high-level parts of the application design and architecture, but not in too much detail. At this point, we know enough to start building and can let the lower-level design details emerge as we work.

In the next module, we will initialize a Svelte frontend project and set up a local Svelte development environment.


@freeman-g when I download the code bundle, I see Keynote slides and images of the code-slides but not the code itself. Is there any plans to make that available in some GIT repository? or a downloadable zip? Even if you're still in the middle of it it would be great if you can share the git code somewhere. Thank you.

Venkatt Guhesan

Hi, I went ahead and pushed the code to a github repo at https://github.com/freeman-g/fullstack-svelte-code

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Fullstack Svelte

Module 1: Introduction

Introduction:

Start Here

Introduction: (5:24)

Fullstack Svelte Course Overview

Module 2: Setting Up A Development Environment

Lesson 1: (4:12)

Setting Up a Svelte Local Development Environment

Lesson 2: (7:04)

How to Initialize a Boilerplate Svelte Project

Lesson 3: (9:25)

Setting Up a Formatter and Linter for Svelte Development

Module 3: Front End Routing

Lesson 1: (20:16)

An Introduction to Svelte Routing for Single Page Applications

Lesson 2: (11:36)

Front End Layouts - Creating Reusable Parent Components

Module 4: User Interface Styles and Interactions

Lesson 1: (6:15)

Using Front End Component Libraries for Svelte Development

Lesson 2: (6:38)

Learn Svelte - How to Create a Basic Landing Page

Lesson 3: (13:47)

A Guide to Handling DOM Events and Input Binding with Svelte

Module 5: Creating the Backend Application

Lesson 1: (16:48)

Initialize an Express Node.js Project for Svelte Development

Lesson 2: (10:52)

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

Lesson 3: (13:47)

School Lunch Data Model

Module 6: Fetching Data in the Frontend

Lesson 1: (14:34)

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

Lesson 2: (10:59)

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

Lesson 3: (6:36)

Using Svelte to Show and Hide Loading Spinner Icons

Lesson 4: (5:31)

Externalizing Frontend Configuration

Module 7: Adding Persistence with PostgreSQL

Lesson 1: (7:18)

Installing PostgreSQL Locally to Add Persistence to a Svelte App

Lesson 2: (12:37)

Configuring Knex js Migrations for Database Management Scripts

Lesson 3: (15:32)

How to Use Knex js in an Express Backend App

Lesson 4: (21:57)

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

Module 8: Creating, Updating and Deleting Data in the Frontend

Lesson 1:

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

Lesson 2:

Building a Form in Svelte That Lets Users Create Data Entities

Lesson 3: (28:42)

The Lunch Week Details Component

Module 9: Securing the Application

Lesson 1: (37:19)

Securing a Svelte Application with JSON Web Tokens

Lesson 2:

Get Started Creating a Multi Tenant Application in Svelte

Lesson 3: (36:25)

Creating a User Signup Flow for a Multi Tenant Svelte App

Module 10: Public Lunch Menu View

Lesson 1: (20:35)

Public Lunch Week Page

Module 11: Production Deployment

Lesson 1: (13:35)

Building Svelte Single Page Applications and Serving Static Files

Fullstack Svelte Course Overview