316
Lectures
25
Hours

Is this course right for you?

This course covers creating two applications with Svelte and minimal 3rd party dependencies. Almost every feature is made from scratch without any dependency package. This covers - Form Validation, Pagination, Modal, Popups,  Snackbar, and more.

The course covers the explanation of  Svelte by working on actual projects. This course will give you the confidence and skills required to start any project.

Students should have basic javascript knowledge to start working on this course.


What is Svelte?

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.


What are you going to work on?

The first application explains base Svelte features by working on the real project - Trello clone application.

In the second application, students will build a Twitter-like app from scratch - the HTML layout part is not part of the course (This will be provided in the course materials to save time and focus purely on  Svelte). The focus of this course is coding and not writing HTML content. 

The course starts with the preparation of the base layout of the application. All designs - images, and content are provided by the instructor.

Content can be briefly summarized in these points:

  • Layout preparation - A few lectures to prepare the HTML for your application. Separation of layout into the Svelte components. 

  • Template syntax - Use special syntax inside of HTML

  • Directives & Events - Value binding of variables.

  • Svelte Kit Routing - This part explains creating a "multi-page" application. Students will learn how to create a routing with different routing strategies and navigation to the routes. 

  • Reactivity - Explains how to create and manage reactive data

  • Lifecycle function - How to use onMount and onDestroy

  • Stores - More complex reactive data

  • Transitions - Fancy effects with Svelte

  • Auth Forms - Students will learn how to create a reactive form and bind the data to form inputs.

  • Custom Form Validation - Covers creating a custom input/form validation and error handling from scratch.

  • Firebase/Firestore - Initialization of Firebase application (data storage)

  • Hook Functions - Important part of the projects. Allows the feature-related code to be separated into its context. 

  • Authentication - This part covers creating a login, register, and logout functionality. Students will learn how to authenticate a user upon the application visit.

  • Provider and Context - This creates a provider component, which can hold the data on the root level and provide them to underlying components. 

  • Snackbars - App-wise functionality created with Provider to display any message as a toast popup.

  • Glide Creation - Covers how to create a new glide and display it on the main page. From this point on, students will often work with Firebase/Firestore.

  • Follow Functionality - Follow functionality allows users to subscribe to other users. 

  • Display Glides from Following - Subscription (Following) to other users will allow seeing the Glides (messages) they post.

  • Paginate Glides - It would be inefficient to fetch/display all of the glides on the initial load. Students will learn how to implement their lazy loaded pagination when data are loaded as the users browse the application.

  • Create Sub-Glides - It's essential to have a way to respond to glides. This feature enables a user to create subglides, which is an answer to the glide.

  • Modal Messenger - Students will learn how to create a modal component from scratch. This will be used to display a messenger component on any page.

  • Image Upload - Deployment to Firebase Storage

  • Deployment to Vercel - Finally, the application will be live hosted on Vercel. Anybody on the internet will be able to visit your application.

While working on the features above, the students will learn and understand Svelte features. They will know how to architecture applications and will be able to create their applications with Svelte.

Requirements

  • Base Javascript knowledge

Course curriculum

  • 1

    Introduction

    • Early Promo

    • How to resolve issues

    • Github Repo Tricks
  • 2

    P1: Init Project

    • Init Project

    • Coding Editor Setup

    • Folder Structure

    • Src Folder

    • Quiz

    • Layout

    • Tailwind

    • Tailwind Correction

    • Additional CSS Improvements

    • Quiz
  • 3

    P1: Pages & Reactivity

    • New Route

    • More about layouts

    • Sub Page

    • Cleanup

    • Svelte Reactivity

    • Reactive statement

    • Reactive declarations

    • Quiz
  • 4

    P1: Task Item & List

    • Copy-Paste Layout

    • Task Item

    • Task List

    • Props

    • Formatting Options

    • Task List Data

    • Quiz
  • 5

    P1: Template Syntax

    • Each Loop

    • Iterate Tasks

    • Editable Component

    • If Block

    • Button Formatting

    • Editing Mode

    • Quiz
  • 6

    P1: Value binding and Events

    • Value binding

    • Default Value

    • Bind to Component

    • Dispatch Event

    • Rename event

    • Pass Data in Events

    • Quiz
  • 7

    P1: Stores

    • Stores

    • Sub to Store

    • Update Store

    • Unsub

    • Auto Subscription

    • Start Function

    • Stop Function

    • Readable Store

    • Task List Store Data

    • Event Forwarding

    • Quiz
  • 8

    P1: Task Update

    • Revert Update Task

    • Pass List Index

    • Find Task Idx

    • Update Task

    • Return subscribe only

    • Move update to store

    • Quiz
  • 9

    P1: Add List and Task

    • Add List Prep

    • Add new list

    • Allow Y Scrolling

    • Add Task

    • Make list full height
  • 10

    P1: Drag & Drop

    • Drag Start

    • Drop Item

    • Event data transfer

    • Move code to store

    • Move Item

    • Refactor Props

    • List Hover Id

    • Hovering Effect

    • Script Module

    • Quiz
  • 11

    P1: Transitions

    • Crossfade Transition

    • Animate Flip

    • More Transitions
  • 12

    P1: Persistence

    • Persistence

    • Store Data

    • Quiz
  • 13

    P1: Finish Store API

    • Remove item function

    • Remove Task

    • Remove List

    • Editable List

    • Update List Name
  • 14

    P1: Rendering Options

    • Load Function

    • SSR + CSR

    • Prerendering

    • Fan with Scrollbar

    • Quiz
  • 15

    P2: Code Preparation

    • Project 2 Layout

    • Bottom Menu

    • Home Page

    • Format Document

    • Sidebars Components

    • Quiz
  • 16

    P2: Static to dynamic data

    • Trends data

    • Each Loop Trend

    • Nav Links Data

    • Render Links

    • Quiz

    • Create Shared Layout

    • Api Endpoint

    • Provide data to Layout

    • Create glide - simple

    • Provide more data to Glide

    • Glide post component
  • 17

    P2: More Pages and Grouping

    • Login and Register Pages

    • Route Grouping

    • Auth layout component

    • Error page

    • Quiz
  • 18

    P2: Dev Experience Improvements

    • Path Alias

    • Fix Intelisense
  • 19

    P2: Popup

    • Popup component

    • Wrap botom menu in popup

    • Logout Menu

    • Before Update and after update

    • Close popup

    • Clean event listener

    • Popup Bottom Position

    • Portal

    • Adjust popup left position

    • Adjust while resizing

    • Close on outside click only

    • Actions

    • Handle popup close in action

    • Quiz
  • 20

    P2: UI Context

    • UI Context

    • Set context

    • Get context abstraction

    • Set screen size

    • Helper size variables

    • Svelte window component

    • Simplify Ui context

    • Display icon conditionaly

    • Check for loading UI

    • CSR

    • Quiz
  • 21

    P2: Auth Context

    • Auth Context

    • Simulate Authentication

    • Loader Component

    • Conditional Auth

    • Redirect if authenticated

    • Main layout component

    • Main pages redirect

    • Quiz
  • 22

    P2: Bind auth forms

    • Move forms to components

    • Bind login data

    • Bind register data

    • Validate action

    • Add alias for actions and stores
  • 23

    P2: Form Handling

    • Form Handler Store

    • Add state to form store

    • Create store separately

    • createStore lifecycle

    • Input event handlers

    • Check Validity Preparation

    • Errors store

    • Update Errors

    • Quiz
  • 24

    P2: Form Validators

    • Random validator

    • Max length validator

    • Max length validator rework

    • Detach validator

    • Loop validators

    • First uppercase validator

    • Errors array

    • Form Errors Component

    • Pass errors as props

    • More validators

    • Pass custom values to validators

    • Quiz
  • 25

    P2: More Validation

    • Nice name function

    • Submit function

    • Remove form store

    • Validate on submit

    • Submit only when valid

    • Pass form to validator

    • Compare with validator

    • On Input validation

    • Login form validation

    • Quiz
  • 26

    P2: Register User

    • Firebase Intro

    • Add firebase config

    • Create Users in DB

    • Register callback

    • Api folder

    • Register user firebase

    • Create user in collection

    • Quiz
  • 27

    P2: Auth State

    • Check auth state in callback

    • Refactor auth state

    • Logout user

    • Login User

    • Quiz

    • Reactive redirects

    • Auth Store

    • Loading auth state

    • Get user from Firestore

    • Display user data in bottom menu

    • Messenger component

    • Quiz
  • 28

    P2: Snackbar

    • Snackbar Start

    • Snackbar in context

    • Snackbar Objects

    • Add snackbar

    • Remove snackbar

    • Remove snackbar from store

    • Auto hide snack

    • Progress bar

    • Snackbar transitions

    • Snackbar on authentication

    • Quiz
  • 29

    P2: Create Glide

    • Create glide store

    • Create glide in Messenger

    • Disable messenger when adding glide

    • Glides API

    • Try catch

    • Store glide in FS

    • Add new glide reactively

    • Quiz
  • 30

    P2: Fetch Glides

    • Fetch glides prep

    • Fetch glides

    • Store glides

    • Attach glide user to glide

    • Data loader indicator

    • Order data with constraints

    • Quiz
  • 31

    P2: Pagination

    • Change glides to pages

    • Display Pages

    • Rework add glide

    • Paginated glides component

    • Add treshold to load glides

    • Last glide doc

    • Load more glides

    • Loading stop condition

    • Quiz
  • 32

    P2: Profile Page

    • Profile page

    • Page store

    • Load users

    • Fetch users from firestore

    • User item and loading

    • Fetch all but logged in user

    • Quiz
  • 33

    P2: Follow User

    • Follow user preparations

    • Follow User Update in FS

    • Filter out followed users

    • Disable button while following

    • Update auth user after follow

    • Throw error if following user

    • Remove following user from list

    • Display message when no users

    • Display glides from followed users

    • Quiz
  • 34

    P2: Subscribe to New Glides

    • Subscribe to new glides

    • Get glide raw data

    • Get glides from documents

    • Store fresh glides

    • Button to display more glides

    • Display glides - duplicate keys

    • Resub to glides

    • Autosize text area

    • Quiz
  • 35

    P2: Lookup and Detail Page

    • Add Lookup

    • Return lookup from extract function

    • Glide detail screen

    • Get route params

    • Navigate to detail page

    • Get glide lookup from user

    • Get glide data

    • Quiz
  • 36

    P2: Glide ID Store

    • Glide Id store

    • Loading State in Detail

    • Provide glide post and messenger

    • Back Button

    • Fetch subglides

    • Pass glide lookup to messenger

    • Add glide in correct collection

    • Pass glide lookup to fetch subglides

    • Fetch subglides from lookup

    • Quiz
  • 37

    P2: Pagination on Detail Page

    • Add paginated to detail page

    • Increment glide count in FS

    • Update subglide count in real time

    • Add glide to subglides list

    • Handle refetch case

    • Refetch glide

    • On glide loaded callback

    • Reset pagination

    • Subglides pagination

    • Check for no glides

    • Quiz
  • 38

    P2: Modal Feature

    • Modal start

    • Open modal conditionally

    • Named slot

    • Opener slot

    • Slot props

    • Close on click outside

    • Messenger and disable scroll

    • Global Glide

    • Global on glide posted callback

    • Close modal when glide posted

    • Quiz
  • 39

    P2: Image Upload

    • Handle image selection

    • Get image bytes

    • Preview image

    • Upload image function

    • Upload image working

    • Attach image to glide

    • Quiz
  • 40

    P2: Deployment & Finish

    • Fix issue with pagination

    • Github Repo

    • Deployment to Vercel

    • Last testing and finish

Instructor(s)

Software Engineer

Filip Jerga

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular. Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.

FAQ

  • How to get help when I am stuck with the course?

    Every video contains a discussion where you can create a post describing an issue. The instructor usually responds within 1 business day.

  • What to do when I am unhappy with the course ?

    Within 30 days of the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.

  • Do I need to watch every lecture of really extensive course?

    Of course not! Every lecture is committed (explained in the introduction section). You can start watching any lecture. Just download the correct project version attached to the lecture resources.

Eincode Access Options

  • Single Course Access

    • Lifetime and unlimited Access to "Svelte and Firebase - The Complete Course"

    $29.00

    Access to this course only.

    Get started now

  • Monthly Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $19.00 / month

    Cancel Anytime!

    Get started now

  • Annual Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $190.00 / year

    Cancel Anytime!

    Get started now