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

In this lesson, we are going to create new 

 endpoint. Here's the plan for enabling this feature in the front end:

Let's get started by adding some state variables and functions to the script section in 

let showCreateModal = false
let createWeekOfDate = null

const openCreateModal = () => {
  showCreateModal = true
}

const createLunchWeek = async () => {
  showCreateModal = false
  let newLunchWeek = {
    weekOf: createWeekOfDate, // createWeekOfDate will contain the input from the user
    isPublished: false,
  }
  try {
    loading = true

    // since this is a POST, we need to send a lunchWeek object as the body of the request
    const response = await axios.post(`${process.env.API_ROOT}/api/lunch-week`, newLunchWeek)
    const lunchWeekId = response.data.lunchWeekId
    
    // populate the newLunchWeek with the id from the server response
    newLunchWeek.lunchWeekId = lunchWeekId

    // push the result into lunchWeek list, so that
    // Svelte will update the table
    lunchWeekList.push(newLunchWeek)
    loading = false
  } catch (e) {
    loading = false
    console.error(e)
  }
}

---
title: Building a Form in Svelte That Lets Users Create Data Entities
description: Creating Data with the Frontend
privateVideoUrl: https://fullstack.wistia.com/medias/aea6nkk25i
isPublicLesson: false
code: https://gitlab.com/fullstackio/books/newline-course-apps/blair-googer-fullstack-svelte-app/-/tree/main/code/module_07/lesson_02/App?ref_type=heads
---

### Creating Lunch Week Data

In this lesson, we are going to create new `lunchWeek` entities using the backend `POST /lunch-week` endpoint. Here's the plan for enabling this feature in the front end:

1.  Add a New Lunch Week button to the `LunchMenuAdmin` component
2.  The button will open a Create Lunch Week modal that will contain a date input for the `weekOf` date
3.  Once the user confirms the Create Lunch Week modal, the front end will call the POST lunch week endpoint
4.  The endpoint will return a payload with the new `lunchWeekId`. We'll use that response payload to add a row to the `lunch_week` table.

Let's get started by adding some state variables and functions to the script section in `LunchMenuAdmin.svelte`.

We need a variable called `showCreateModal` and one called `createWeekOfDate`, and we will need `openCreateModal` and `createLunchWeek` functions:



```js
let showCreateModal = false
let createWeekOfDate = null

const openCreateModal = () => {
  showCreateModal = true
}

const createLunchWeek = async () => {
  showCreateModal = false
  let newLunchWeek = {
    weekOf: createWeekOfDate, // createWeekOfDate will contain the input from the user
    isPublished: false,
  }
  try {
    loading = true

    // since this is a POST, we need to send a lunchWeek object as the body of the request
    const response = await axios.post(`${process.env.API_ROOT}/api/lunch-week`, newLunchWeek)
    const lunchWeekId = response.data.lunchWeekId
    
    // populate the newLunchWeek with the id from the server response
    newLunchWeek.lunchWeekId = lunchWeekId