Svelte and Firebase The Complete Guide (2023)

Svelte and Firebase – The Complete Guide (2023), available at $84.99, has an average rating of 4.75, with 282 lectures, 39 quizzes, based on 69 reviews, and has 898 subscribers.

You will learn about Learn to program with Svelte and create two amazing Web Apps. Get an understanding of how to create a web app – explained practically. Use Firebase services – Firestore storage, Authentication and more. Establish yourself in the field of the Web Development. This course is ideal for individuals who are Anybody interested in how to create Web Apps with modern JS libraries/frameworks or People looking for a practical web development guide. or This course is for everyone eager to understand how to build an app from scratch. It is particularly useful for Anybody interested in how to create Web Apps with modern JS libraries/frameworks or People looking for a practical web development guide. or This course is for everyone eager to understand how to build an app from scratch.

Enroll now: Svelte and Firebase – The Complete Guide (2023)

Summary

Title: Svelte and Firebase – The Complete Guide (2023)

Price: $84.99

Average Rating: 4.75

Number of Lectures: 282

Number of Quizzes: 39

Number of Published Lectures: 282

Number of Published Quizzes: 39

Number of Curriculum Items: 321

Number of Published Curriculum Objects: 321

Original Price: $129.99

Quality Status: approved

Status: Live

What You Will Learn

Learn to program with Svelte and create two amazing Web Apps.

Get an understanding of how to create a web app – explained practically.

Use Firebase services – Firestore storage, Authentication and more.

Establish yourself in the field of the Web Development.

Who Should Attend

Anybody interested in how to create Web Apps with modern JS libraries/frameworks

People looking for a practical web development guide.

This course is for everyone eager to understand how to build an app from scratch.

Target Audiences

Anybody interested in how to create Web Apps with modern JS libraries/frameworks

People looking for a practical web development guide.

This course is for everyone eager to understand how to build an app from scratch.

Is this course right for you?

This course covers creating two applications with Svelte. Most of the features are made from scratch without any dependency package. This covers – Form Validation, Pagination, Modal, Popups,  Snackbarand many others. You will learn how to create everything from the ground up.

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, a simple task management 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)

Store 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.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: How to get a help

Lecture 3: Github repo tricks

Chapter 2: P1: Init Project

Lecture 1: Init Project

Lecture 2: Coding Editor Setup

Lecture 3: Folder Structure

Lecture 4: Src Folder

Lecture 5: Layout

Lecture 6: Tailwind

Lecture 7: Tailwind Correction

Lecture 8: Additional CSS Improvements

Chapter 3: P1: Pages & Reactivity

Lecture 1: New Route

Lecture 2: More about layouts

Lecture 3: Sub Page

Lecture 4: Cleanup

Lecture 5: Svelte Reactivity

Lecture 6: Reactive statement

Lecture 7: Reactive declarations

Lecture 8: Tips

Chapter 4: P1: Task Item & List

Lecture 1: Copy/Paste Layout

Lecture 2: Task Item

Lecture 3: Task List

Lecture 4: Props

Lecture 5: Formatting Options

Lecture 6: Task List Data

Chapter 5: P1: Template Syntax

Lecture 1: Each Loop

Lecture 2: Iterate Tasks

Lecture 3: Editable Component

Lecture 4: If Block

Lecture 5: Button Formatting

Lecture 6: Editing Mode

Chapter 6: P1: Value binding and Events

Lecture 1: Value binding

Lecture 2: Default Value

Lecture 3: Bind to Component

Lecture 4: Dispatch Event

Lecture 5: Rename event

Lecture 6: Pass Data in Events

Chapter 7: P1: Stores

Lecture 1: Stores

Lecture 2: Sub to Store

Lecture 3: Update Store

Lecture 4: Unsub

Lecture 5: Auto Subscription

Lecture 6: Start Function

Lecture 7: Stop Function

Lecture 8: Readable Store

Lecture 9: Task List Store Data

Lecture 10: Event Forwarding

Chapter 8: P1: Task Update

Lecture 1: Revert Update Task

Lecture 2: Pass List Index

Lecture 3: Find Task Idx

Lecture 4: Update Task

Lecture 5: Return subscribe only

Lecture 6: Move update to store

Chapter 9: P1: Add List and Task

Lecture 1: Add List Prep

Lecture 2: Add new list

Lecture 3: Allow X Scrolling

Lecture 4: Add Task

Lecture 5: Make list full height

Chapter 10: P1: Drag & Drop

Lecture 1: Drag Start

Lecture 2: Drop Item

Lecture 3: Event data transfer

Lecture 4: Move code to store

Lecture 5: Move Item

Lecture 6: Refactor Props

Lecture 7: List Hover Id

Lecture 8: Hovering Effect

Lecture 9: Script Module

Chapter 11: P1: Transitions

Lecture 1: Crossfade Transition

Lecture 2: Animate Flip

Lecture 3: More Transitions

Chapter 12: P1: Persistence

Lecture 1: Persistence

Lecture 2: Store Data

Chapter 13: P1: Finish Store API

Lecture 1: Remove item function

Lecture 2: Remove Task

Lecture 3: Remove List

Instructors

Eincode by Filip Jerga
Online Education

Filip Jerga
Software Engineer

Rating Distribution

1 stars: 1 votes

2 stars: 1 votes

3 stars: 3 votes

4 stars: 24 votes

5 stars: 40 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!