Svelte And Firebase: The Full Course

Create 2 apps with Svelte - Twitter and Trello clones. Unleash Svelte reactivity and speed. Use Firebase as data store.

What you'll 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.

Requirements

Base Javascript knowledge

Description

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 HTMLDirectives & 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 dataLifecycle function - How to use onMount and onDestroyStores - More complex reactive dataTransitions - Fancy effects with SvelteAuth 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 StorageDeployment 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.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 How to get a help

Lecture 3 Github repo tricks

Section 2: P1: Init Project

Lecture 4 Init Project

Lecture 5 Coding Editor Setup

Lecture 6 Folder Structure

Lecture 7 Src Folder

Lecture 8 Layout

Lecture 9 Tailwind

Lecture 10 Tailwind Correction

Lecture 11 Additional CSS Improvements

Section 3: P1: Pages & Reactivity

Lecture 12 New Route

Lecture 13 More about layouts

Lecture 14 Sub Page

Lecture 15 Cleanup

Lecture 16 Svelte Reactivity

Lecture 17 Reactive statement

Lecture 18 Reactive declarations

Lecture 19 Tips

Section 4: P1: Task Item & List

Lecture 20 Copy/Paste Layout

Lecture 21 Task Item

Lecture 22 Task List

Lecture 23 Props

Lecture 24 Formatting Options

Lecture 25 Task List Data

Section 5: P1: Template Syntax

Lecture 26 Each Loop

Lecture 27 Iterate Tasks

Lecture 28 Editable Component

Lecture 29 If Block

Lecture 30 Button Formatting

Lecture 31 Editing Mode

Section 6: P1: Value binding and Events

Lecture 32 Value binding

Lecture 33 Default Value

Lecture 34 Bind to Component

Lecture 35 Dispatch Event

Lecture 36 Rename event

Lecture 37 Pass Data in Events

Section 7: P1: Stores

Lecture 38 Stores

Lecture 39 Sub to Store

Lecture 40 Update Store

Lecture 41 Unsub

Lecture 42 Auto Subscription

Lecture 43 Start Function

Lecture 44 Stop Function

Lecture 45 Readable Store

Lecture 46 Task List Store Data

Lecture 47 Event Forwarding

Section 8: P1: Task Update

Lecture 48 Revert Update Task

Lecture 49 Pass List Index

Lecture 50 Find Task Idx

Lecture 51 Update Task

Lecture 52 Return subscribe only

Lecture 53 Move update to store

Section 9: P1: Add List and Task

Lecture 54 Add List Prep

Lecture 55 Add new list

Lecture 56 Allow Y Scrolling

Lecture 57 Add Task

Lecture 58 Make list full height

Section 10: P1: Drag & Drop

Lecture 59 Drag Start

Lecture 60 Drop Item

Lecture 61 Event data transfer

Lecture 62 Move code to store

Lecture 63 Move Item

Lecture 64 Refactor Props

Lecture 65 List Hover Id

Lecture 66 Hovering Effect

Lecture 67 Script Module

Section 11: P1: Transitions

Lecture 68 Crossfade Transition

Lecture 69 Animate Flip

Lecture 70 More Transitions

Section 12: P1: Persistence

Lecture 71 Persistence

Lecture 72 Store Data

Section 13: P1: Finish Store API

Lecture 73 Remove item function

Lecture 74 Remove Task

Lecture 75 Remove List

Lecture 76 Editable List

Lecture 77 Update List Name

Section 14: P1: Rendering Options

Lecture 78 Load Function

Lecture 79 SSR + CSR

Lecture 80 Prerendering

Lecture 81 Fan with Scrollbar

Section 15: P2: Code Preparation

Lecture 82 Project 2 Layout

Lecture 83 Bottom Menu

Lecture 84 Home Page

Lecture 85 Format Document

Lecture 86 Sidebars Components

Section 16: P2: Static to dynamic data

Lecture 87 Trends data

Lecture 88 Each Loop Trend

Lecture 89 Nav Links Data

Lecture 90 Render Links

Lecture 91 Create Shared Layout

Lecture 92 Api Endpoint

Lecture 93 Provide data to Layout

Lecture 94 Create glide - simple

Lecture 95 Provide more data to Glide

Lecture 96 Glide post component

Section 17: P2: More Pages and Grouping

Lecture 97 Login and Register Page

Lecture 98 Route Grouping

Lecture 99 Auth layout component

Lecture 100 Error page

Section 18: P2: Dev Experience Improvements

Lecture 101 Path Alias

Lecture 102 Fix Intelisense

Section 19: P2: Popup

Lecture 103 Popup component

Lecture 104 Wrap bottom menu in popup

Lecture 105 Logout Menu

Lecture 106 Before Update and after update

Lecture 107 Close popup

Lecture 108 Clean event listener

Lecture 109 Popup Bottom Position

Lecture 110 Portal

Lecture 111 Adjust popup left position

Lecture 112 Adjust while resizing

Lecture 113 Close on outside click only

Lecture 114 Actions

Lecture 115 Handle popup close in action

Section 20: P2: UI Context

Lecture 116 UI Context

Lecture 117 Set context

Lecture 118 Get context abstraction

Lecture 119 Set screen size

Lecture 120 Helper size variables

Lecture 121 Svelte window component

Lecture 122 Simplify Ui context

Lecture 123 Display icon conditionally

Lecture 124 Check for loading UI

Lecture 125 CSR

Section 21: P2: Auth Context

Lecture 126 Auth Context

Lecture 127 Simulate Authentication

Lecture 128 Loader Component

Lecture 129 Conditional Auth

Lecture 130 Redirect if authenticated

Lecture 131 Main layout component

Lecture 132 Main pages redirect

Section 22: P2: Bind auth forms

Lecture 133 Move forms to components

Lecture 134 Bind login data

Lecture 135 Bind register data

Lecture 136 Validate action

Lecture 137 Add alias for actions and stores

Section 23: P2: Form Handling

Lecture 138 Form Handler Store

Lecture 139 Add state to form store

Lecture 140 Create store separately

Lecture 141 createStore lifecycle

Lecture 142 Input event handlers

Lecture 143 Check Validity Preparation

Lecture 144 Errors store

Lecture 145 Update Errors

Section 24: P2: Form Validators

Lecture 146 Random validator

Lecture 147 Max length validator

Lecture 148 Max length validator rework

Lecture 149 Detach validator

Lecture 150 Loop validators

Lecture 151 First uppercase validator

Lecture 152 Errors array

Lecture 153 Form Errors Component

Lecture 154 Pass errors as props

Lecture 155 More validators

Lecture 156 Pass custom values to validators

Section 25: P2: More Validation

Lecture 157 Nice name function

Lecture 158 Submit function

Lecture 159 Remove form store

Lecture 160 Validate on submit

Lecture 161 Submit only when valid

Lecture 162 Pass form to validator

Lecture 163 Compare with validator

Lecture 164 On Input validation

Lecture 165 Login form validation

Section 26: P2: Register User

Lecture 166 Firebase Intro

Lecture 167 Add firebase config

Lecture 168 Create Users in DB

Lecture 169 Register callback

Lecture 170 Api folder

Lecture 171 Register user firebase

Lecture 172 Create user in collection

Section 27: P2: Auth State

Lecture 173 Check auth state in callback

Lecture 174 Refactor auth state

Lecture 175 Logout user

Lecture 176 Login User

Lecture 177 Reactive redirects

Lecture 178 Auth Store

Lecture 179 Loading auth state

Lecture 180 Get user from Firestore

Lecture 181 Display user data in bottom menu

Lecture 182 Messenger component

Section 28: P2: Snackbar

Lecture 183 Snackbar Start

Lecture 184 Snackbar in context

Lecture 185 Snackbar Objects

Lecture 186 Add snackbar

Lecture 187 Remove snackbar

Lecture 188 Remove snackbar from store

Lecture 189 Auto hide snack

Lecture 190 Progress bar

Lecture 191 Snackbar transitions

Lecture 192 Snackbar on authentication

Section 29: P2: Create Glide

Lecture 193 Create glide store

Lecture 194 Create glide in Messenger

Lecture 195 Disable messenger when adding glide

Lecture 196 Glides API

Lecture 197 Try catch

Lecture 198 Store glide in FS

Lecture 199 Add new glide reactively

Section 30: P2: Fetch Glides

Lecture 200 Fetch glides prep

Lecture 201 Fetch glides

Lecture 202 Store glides

Lecture 203 Attach glide user to glide

Lecture 204 Data loader indicator

Lecture 205 Order data with constraints

Section 31: P2: Pagination

Lecture 206 Change glides to pages

Lecture 207 Display Pages

Lecture 208 Rework add glide

Lecture 209 Paginated glides component

Lecture 210 Add treshold to load glides

Lecture 211 Last glide doc

Lecture 212 Load more glides

Lecture 213 Loading stop condition

Section 32: P2: Profile Page

Lecture 214 Profile page

Lecture 215 Page store

Lecture 216 Load users

Lecture 217 Fetch users from firestore

Lecture 218 User item and loading

Lecture 219 Fetch all but logged in user

Section 33: P2: Follow User

Lecture 220 Follow user preparations

Lecture 221 Follow User Update in FS

Lecture 222 Filter out followed users

Lecture 223 Disable button while following

Lecture 224 Update auth user after follow

Lecture 225 Throw error if following user

Lecture 226 Remove following user from list

Lecture 227 Display message when no users

Lecture 228 Display glides from followed users

Section 34: P2: Subscribe to New Glides

Lecture 229 Subscribe to new glides

Lecture 230 Get glide raw data

Lecture 231 Get glides from documents

Lecture 232 Store fresh glides

Lecture 233 Button to display more glides

Lecture 234 Display glides - duplicate keys

Lecture 235 Resub to glides

Lecture 236 Autosize text area

Section 35: P2: Lookup and Detail Page

Lecture 237 Add Lookup

Lecture 238 Return lookup from extract function

Lecture 239 Glide detail screen

Lecture 240 Get route params

Lecture 241 Navigate to detail page

Lecture 242 Get glide lookup from user

Lecture 243 Get glide data

Section 36: P2: Glide ID Store

Lecture 244 Glide Id store

Lecture 245 Loading State in Detail

Lecture 246 Provide glide post and messenger

Lecture 247 Back Button

Lecture 248 Fetch subglides

Lecture 249 Pass glide lookup to messenger

Lecture 250 Add glide in correct collection

Lecture 251 Pass glide lookup to fetch subglides

Lecture 252 Fetch subglides from lookup

Section 37: P2: Pagination on Detail Page

Lecture 253 Add paginated to detail page

Lecture 254 Increment glide count in FS

Lecture 255 Update subglide count in real time

Lecture 256 Add glide to subglides list

Lecture 257 Handle refetch case

Lecture 258 Refetch glide

Lecture 259 On glide loaded callback

Lecture 260 Reset pagination

Lecture 261 Subglides pagination

Lecture 262 Check for no glides

Section 38: P2: Modal Feature

Lecture 263 Modal start

Lecture 264 Open modal conditionaly

Lecture 265 Named slot

Lecture 266 Opener slot

Lecture 267 Slot props

Lecture 268 Close on click outside

Lecture 269 Messenger and disable scroll

Lecture 270 Global Glide

Lecture 271 Global on glide posted callback.mov

Lecture 272 Close modal when glide posted

Section 39: P2: Image Upload

Lecture 273 Handle image selection

Lecture 274 Get image bytes

Lecture 275 Preview image

Lecture 276 Upload image function

Lecture 277 Upload image working

Lecture 278 Attach image to glide

Lecture 279 Fix issue with pagination

Section 40: P2: Finishing With Deployment

Lecture 280 Github Repo

Lecture 281 Deployment to Vercel

Lecture 282 Testing App & Finish

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.