Svelte and Firebase - The Complete Guide (2023) from Udemy

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, Snackbar and 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.

What's inside

Learning objectives

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.

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.

Syllabus

Introduction

How to get a help

Github repo tricks

P1: Init Project

Init Project

Coding Editor Setup

Folder Structure

Src Folder

Layout

Quiz

Tailwind

Tailwind Correction

Additional CSS Improvements

P1: Pages & Reactivity

New Route

More about layouts

Sub Page

Cleanup

Svelte Reactivity

Reactive statement

Reactive declarations

Tips

P1: Task Item & List

Copy/Paste Layout

Task Item

Task List

Props

Formatting Options

Task List Data

P1: Template Syntax

Each Loop

Iterate Tasks

Editable Component

If Block

Button Formatting

Editing Mode

P1: Value binding and Events

Value binding

Default Value

Bind to Component

Dispatch Event

Rename event

Pass Data in Events

P1: Stores

Stores

Sub to Store

Update Store

Unsub

Auto Subscription

Start Function

Stop Function

Readable Store

Task List Store Data

Event Forwarding

P1: Task Update

Revert Update Task

Pass List Index

Find Task Idx

Update Task

Return subscribe only

Move update to store

Code Exercise

P1: Add List and Task

Add List Prep

Add new list

Allow X Scrolling

Add Task

Make list full height

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

P1: Transitions

Crossfade Transition

Animate Flip

More Transitions

P1: Persistence

Persistence

Store Data

P1: Finish Store API

Remove item function

Remove Task

Remove List

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Helps learners develop essential skills in state management, transitions, and dynamic user interfaces

Offers hands-on practice in building two full-fledged web applications, providing practical experience and deeper understanding of Svelte

Covers modern concepts such as reactive data and component-based architecture, which are highly relevant in today's web development landscape

Taught by experienced instructors with a strong track record in web development, providing you with valuable insights and guidance

May require basic JavaScript knowledge to fully grasp the concepts and code examples presented in the course

The course's focus is primarily on coding and implementing Svelte, so learners with a desire to focus on UI design may need to supplement with additional resources

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Svelte and Firebase - The Complete Guide (2023) with these activities:

Complete the Svelte Tutorial from scratch

Show steps

Completing this full tutorial will ensure that you fully understand the basic concepts of Svelte

Show steps

Follow along with the Svelte tutorial from the provided link
Complete the tasks provided by the tutorial
Experiment with the code and try to create your own Svelte application

Join a Svelte study group or online community

Show steps

Joining a study group or online community will give you the opportunity to connect with other students and collaborate on projects

Show steps

Join a Svelte study group or online community
Participate in discussions and ask questions
Work on Svelte projects with other members of the group

Create a simple svelte application from scratch

Show steps

Creating this small project will ensure you understand all of the base Svelte syntax concepts

Show steps

Watch the first few Unreal Engine 5 video tutorials
Install and run Unreal Engine 5 on your machine
Create a small game level as instructed in the tutorial
Iterate on game level to apply more advanced features and customize it

Six other activities

Expand to see all activities and additional details

Show all nine activities

Attend a Svelte workshop or conference

Show steps

Workshops and conferences help you stay up to date on the latest Svelte trends and connect with other professionals

Show steps

Research Svelte workshops and conferences online
Register for and attend a workshop or conference
Participate in discussions and ask questions

Create a collection of Svelte resources

Show steps

This will help you organize and share your Svelte knowledge

Show steps

Gather resources such as tutorials, articles, and code snippets
Organize the resources into a collection
Share the collection with other Svelte learners

Create a Twitter clone with Svelte

Show steps

Creating this medium sized project will help you master Firebase integration and many other features of Svelte

Show steps

Utilize Firebase API documentation to connect your application with Firebase
Implement the database, storage, and authentication features into your application
Create reusable UI components to be used throughout your application
Design and implement the user interface for your application

Contribute to an open source Svelte project on GitHub

Show steps

This will help you apply your Svelte skills outside of the classroom

Show steps

Find an open source Svelte project on GitHub
Read the project's documentation and contribute to the code base
Submit a pull request with your changes and collaborate with other contributors

Write a blog post or article about Svelte

Show steps

This will help you solidify your understanding of Svelte and share your knowledge with others

Show steps

Choose a topic related to Svelte that you are passionate about
Research your topic and write an outline
Write a draft of your blog post or article
Edit and proofread your work
Publish your blog post or article online

Volunteer as a Svelte mentor or tutor

Show steps

This will help you solidify your understanding of Svelte and share your knowledge with others

Show steps

Find opportunities to volunteer as a Svelte mentor or tutor
Prepare materials and resources for your sessions
Meet with mentees or students and provide guidance and support

Career center

Learners who complete Svelte and Firebase - The Complete Guide (2023) will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Svelte and Firebase - The Complete Guide (2023)

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses