Companies Home Search Profile

SvelteKit Framework by Example: Full-Stack Ecommerce Website

Focused View

Armin Sarajlic

2:54:17

21 View
  • 1. Introduction.mp4
    01:28
  • 2. Branching strategy.mp4
    02:01
  • 3. What is Svelte and SvelteKit.mp4
    01:47
  • 4. What is Server Side Rendering (SSR).mp4
    02:27
  • 5. What is a payment gateway.mp4
    01:49
  • 1. Stripe account setup.mp4
    01:20
  • 2. Adding products on Stripe.mp4
    04:22
  • 3. Creating all the shop products on Stripe.mp4
    01:51
  • 1. SvelteKit project setup.mp4
    02:10
  • 2. SvelteKit project structure.mp4
    01:58
  • 3. What is Vite.mp4
    01:54
  • 1. What is TailwindCSS.mp4
    01:55
  • 2. Installing TailwindCSS in a SvelteKit project.mp4
    02:44
  • 1. PostgreSQL database setup.mp4
    01:56
  • 2. What is Prisma ORM.mp4
    01:17
  • 3. Installing Prisma in a SvelteKit project.mp4
    01:21
  • 4. Connecting Prisma to a PostgreSQL database.mp4
    02:56
  • 5. Creating the product model.mp4
    04:59
  • 6. Relationships between Prisma models.mp4
    05:32
  • 7. Creating the Category model.mp4
    02:21
  • 8. Populating the Category table.mp4
    01:21
  • 9.1 Zipped Static Folder.html
  • 9. Populating the Products table.mp4
    03:06
  • 1. Components in SvelteKit.mp4
    03:47
  • 2. Creating the Header component.mp4
    04:17
  • 3. Creating the CartButton component.mp4
    02:01
  • 4. Creating the Footer component.mp4
    02:36
  • 1. Introduction to routing in SvelteKit.mp4
    02:06
  • 2. Page files in SvelteKits router.mp4
    03:34
  • 3. Creating the E-Commerce pages.mp4
    04:39
  • 4. Error files in SvelteKits router.mp4
    01:28
  • 5. SvelteKit API routes.mp4
    02:37
  • 6. Reading data with Prisma.mp4
    03:13
  • 7. Creating the GET products API endpoint.mp4
    03:17
  • 8. Layouts in SvelteKit.mp4
    04:09
  • 9. Creating a layout and styling the pages.mp4
    03:36
  • 10. Loading the products in the index page.mp4
    02:57
  • 1. Conditional Rendering in SvelteKit.mp4
    02:27
  • 2. No products found - Fallback message.mp4
    02:02
  • 3. Rendering Loops in SvelteKit (#each logic block).mp4
    02:01
  • 4. Looping the products.mp4
    01:27
  • 5. Creating the ShopCard component.mp4
    06:54
  • 1. Creating the GET categories API endpoint.mp4
    03:05
  • 2. Creating the CategoryItem component.mp4
    03:45
  • 3. Categories index page.mp4
    04:14
  • 4. Creating the categories layout.mp4
    04:52
  • 5. Create the GET products by category API endpoint.mp4
    04:11
  • 6. Reactivity in Svelte.mp4
    02:03
  • 7. Dynamic category pages.mp4
    03:13
  • 1. Creating the GET product by ID API endpoint.mp4
    03:14
  • 2. Product page markup and styling.mp4
    03:34
  • 3. Loading the product details data.mp4
    02:53
  • 1. Cart page markup and styling.mp4
    03:48
  • 2. Creating the CartItem component.mp4
    03:34
  • 3. The cart system.mp4
    07:00
  • 4. CartButton component improvements.mp4
    02:53
  • 1. Payment status pages markup and styling.mp4
    01:35
  • 2. Creating the Checkout API endpoint.mp4
    05:08
  • 3. Invoking the Stripe checkout from the Cart page.mp4
    01:46
  • 4. Testing the Stripe payment.mp4
    01:46
  • Description


    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

    Who is this for?


  • 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
  • What You Need to Know?


  • Basic HTML knowledge
  • Basic JavaScript knowledge
  • No previous Svelte experience required
  • More details


    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.

    Who this course is for:

    • 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

    User Reviews
    Rating
    0
    0
    0
    0
    0
    average 0
    Total votes0
    Focused display
    Armin Sarajlic
    Armin Sarajlic
    Instructor's Courses
    Hi, I'm Armin, a Senior Software Engineer with a passion for web and mobile application development. My love for coding started at a very young age, beginning with game development and exploring the different career paths that programming had to offer. Currently, I specialize in Frontend Development using primarily React and React Native, along with other associated frameworks such as Next.js and Gatsby. Lately I've also been working with Svelte and SvelteKit a lot.In 2017, I started teaching online and have been on Udemy for more than 6 years. I have developed a process to ensure my students receive the best possible value for their money. This includes professionally recorded and edited audio/video, engaging animations and illustrations, and most importantly, clear explanations. Additionally, all my students can reach me through various platforms and have access to lesson-specific source code.My approach to teaching programming is practical and real-world focused. My goal is to help you become a confident developer who is ready to take on any challenge. I believe that programming and the IT industry offer amazing benefits such as remote work, flexible hours, and great work-life balance, making it a great career path for anyone who is interested.Whether you're a beginner or an experienced developer, I'm here to help you reach your goals. So, what are you waiting for? Join my courses today and start your journey to becoming a skilled and successful developer.
    Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.
    • language english
    • Training sessions 59
    • duration 2:54:17
    • Release Date 2023/12/16