Introduction

This course takes you from an empty directory to a web app, an API, and a database deployed to a production environment.

Svelte, SvelteKit and plain CSS is what we use for the web app. One step at a time, you are going to see how the app comes to life and learn the what and why of each line of code.

To communicate with the backend, you will develop a REST API with SvelteKit and learn how to connect the web app with the API.

To wrap up the course, a PostgreSQL database is going to keep track of individual todo items you create, update, and delete.

As part of the introduction, we also discuss the Webstone Education community, how you can get exclusive access and where to ask questions to make sure your learning journey is as smooth as possible.

Remember, Webstone Education courses are updated regularly and you will receive new content, bug fixes, etc. via pull requests to your own learning repository on GitHub.

Architecture

This course focuses on a standard 3-tier architecture:

1. A web frontend
2. A REST API
3. A PostgreSQL database

The following shows the data flow to persist data:

Web ---> REST API ---> Database

The reverse flow applies to fetch data and display it on the web frontend:

Web <--- REST API <--- Database

Web <-> REST API

This integration is based on JSON and HTTP requests. If JavaScript is disabled in the browser, it leverages HTML form submissions so that the web app works as expected.

REST API <-> Database

To interact with the database, Prisma is the go-to library of choice for this course. It generates a type-safe client which helps ensure we catch bugs before we even test the application.

Set up the project

Webstone Education provides a cloud-based developer environment with which you can get up and running quickly — no need to install anything on your local computer!

Alternatively, we provide you with instructions on how to set up your local developer environment should you prefer this. The trickiest part is going to be to set up a PostgreSQL instance locally. The rest of the project setup is automated and requires no work from you.

Develop the HTML structure

No styles, no JavaScript — only HTML.

While this is not going to win any awards, it let's us focus on the basics of a web application. We will discuss topics such as:

• What are appropriate HTML elements (other than div)?
• Where do we need <form> elements and why?
• How can we leverage components to write more maintainable code?

At the end of this lesson, you will have all the HTML in place. All that is left to do is add styles & functionality with JavaScript.

Style the application

With the HTML structure in place thanks to the previous lesson, it's time to apply CSS and make the app look better.

While this is not a CSS-basics or CSS-deepdive lesson, we cover everything necessary to align elements, apply conditional styles, and how Svelte directives help.

Develop CRUD functionality

CRUD:

• Create
• Read
• Update
• Delete

This is all you need to build anything from a Todo app to the most complex web interface you've ever seen. Sure, there are nuances in how exactly you develop your app's CRUD functionality, but the concepts are the same.

By the end of this lesson, you will be able to interact with the application and even persist data — as long as you don't restart the server :-).

Enhance HTML forms

Up until this point, we leveraged HTML form submissions to develop the web application's CRUD functionality. In other words, you can disable JavaScript in the browser and the app works perfectly fine — despite the fact we use a JavaScript framework!

In this lesson, we learn how to enhance HTML forms for people who do have JavaScript enabled. In that case, instead of a form submission, we will leverage AJAX calls to perform CRUD functionality.

Integrate with the database

Add a few todo items, restart your server and it's all gone. Well, we're going to fix exactly that in this lesson.

It is time to integrate with a database. This is where Prisma comes into play to simplify what used to be a complex challenge. No need to study all of Prisma's docs. You will learn everything there is to know to make this API <> database integration work.

Deploy the database

First things first: Let's deploy a database to a production environment.

We use Railway, but any database hosting provider does the job. Thanks to the fact that we used environment variables in the previous lesson, there are going to be minimal code changes to connect to the production database — yay!

Deploy the application

With the databaes already deployed, we now look at deploying the web application & API.

In this course, we use SvelteKit for the web app & API, which lets us deploy both pieces at the same time.

You will learn how to deploy to:

• Cloudflare Pages
• Netlify
• Vercel