Sveltekit Framework By Example: Full-Stack Ecommerce Website

Learn the foundamentals of SvelteKit (Svelte Framework) by creating a real E-Commerce website from scratch

What you'll learn

Master the foundamentals of Svelte and SvelteKit (Svelte Framework)

Create a Full-Stack E-Commerce web application

Accepting payments on your web shop using Stripe as a payment gateway

Connecting SvelteKit projects to a database

Manipulating the database using Prisma ORM

Requirements

Basic HTML knowledge

Basic JavaScript knowledge

No previous Svelte experience required

Description

SvelteKit is a modern web application framework that simplifies frontend development by enabling developers to build highly efficient and reactive web apps using a component architecture.SvelteKit is known for its exceptional speed primarily due to its compilation-based approach. Unlike traditional JavaScript frameworks, SvelteKit compiles the components at build time, generating highly optimized and minimal JavaScript code. This results in faster load times and improved runtime performance, as there is no need for a virtual DOM or runtime framework to manage component updates. Additionally, SvelteKit leverages fine-grained reactivity, only updating the parts of the DOM that actually change, reducing unnecessary work and improving performance.SvelteKit uses its own built-in compiler to transform Svelte components into highly optimized JavaScript code during the build process. This custom compiler is a fundamental part of the Svelte framework's approach to generating efficient and minimal JavaScript for web applications.In this comprehensive course, you will gain a clear understanding of SvelteKit's core principles, providing you with the essential knowledge to effectively work with this cutting-edge framework. Learning by example is an effective approach, and throughout this course, we will explore SvelteKit's extensive feature set by building a fully-fledged e-commerce web store from the ground up. You will learn how to use key technologies such as Svelte, SvelteKit, Prisma ORM, PostgreSQL, TailwindCSS, and the integration of the Stripe payment gateway.With over six years of experience working extensively with React and completing numerous projects, my initial exposure to SvelteKit was both fun and exciting. What sets SvelteKit apart and what I personally appreciate is its simplicity, avoiding complex, framework-specific intricacies that can often be time-consuming. Instead, SvelteKit encourages the application of fundamental web development principles you already possess. Learning Svelte not only equips you with framework-specific skills but also enhances your overall web development capabilities.This course welcomes participants with a basic understanding of JavaScript, making prior experience with Svelte unnecessary. While familiarity with other frontend frameworks and libraries like React, NextJS, or Vue can help with comprehension of certain concepts, it is by no means a prerequisite for successful completion of this course.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Branching strategy

Lecture 3 What is Svelte and SvelteKit?

Lecture 4 What is Server Side Rendering (SSR)?

Lecture 5 What is a payment gateway?

Section 2: Setting up Stripe

Lecture 6 Stripe account setup

Lecture 7 Adding products on Stripe

Lecture 8 Creating all the shop products on Stripe

Section 3: Getting started with SvelteKit

Lecture 9 SvelteKit project setup

Lecture 10 SvelteKit project structure

Lecture 11 What is Vite?

Section 4: Setting up TailwindCSS

Lecture 12 What is TailwindCSS?

Lecture 13 Installing TailwindCSS in a SvelteKit project

Section 5: PostgreSQL database and Prisma ORM setup

Lecture 14 PostgreSQL database setup

Lecture 15 What is Prisma ORM?

Lecture 16 Installing Prisma in a SvelteKit project

Lecture 17 Connecting Prisma to a PostgreSQL database

Lecture 18 Creating the product model

Lecture 19 Relationships between Prisma models

Lecture 20 Creating the Category model

Lecture 21 Populating the Category table

Lecture 22 Populating the Products table

Section 6: Introduction to components in SvelteKit

Lecture 23 Components in SvelteKit

Lecture 24 Creating the Header component

Lecture 25 Creating the CartButton component

Lecture 26 Creating the Footer component

Section 7: Routing in SvelteKit

Lecture 27 Introduction to routing in SvelteKit

Lecture 28 Page files in SvelteKit's router

Lecture 29 Creating the E-Commerce pages

Lecture 30 Error files in SvelteKit's router

Lecture 31 SvelteKit API routes

Lecture 32 Reading data with Prisma

Lecture 33 Creating the GET products API endpoint

Lecture 34 Layouts in SvelteKit

Lecture 35 Creating a layout and styling the pages

Lecture 36 Loading the products in the index page

Section 8: Implementing the home page

Lecture 37 Conditional Rendering in SvelteKit

Lecture 38 No products found - Fallback message

Lecture 39 Rendering Loops in SvelteKit (#each logic block)

Lecture 40 Looping the products

Lecture 41 Creating the ShopCard component

Section 9: Implementing the shop categories

Lecture 42 Creating the GET categories API endpoint

Lecture 43 Creating the CategoryItem component

Lecture 44 Categories index page

Lecture 45 Creating the categories layout

Lecture 46 Create the GET products by category API endpoint

Lecture 47 Reactivity in Svelte

Lecture 48 Dynamic category pages

Section 10: Implementing the product pages

Lecture 49 Creating the GET product by ID API endpoint

Lecture 50 Product page markup and styling

Lecture 51 Loading the product details data

Section 11: The cart system

Lecture 52 Cart page markup and styling

Lecture 53 Creating the CartItem component

Lecture 54 The cart system

Lecture 55 CartButton component improvements

Section 12: Stripe integration

Lecture 56 Payment status pages markup and styling

Lecture 57 Creating the Checkout API endpoint

Lecture 58 Invoking the Stripe checkout from the Cart page

Lecture 59 Testing the Stripe payment

Web developers who are new to Svelte and SvelteKit,People who are looking to add a new skill and framework to their portfolio,Developers who want to create a full-stack e-commerce store with a payment gateway