Svelte And Firebase The Full Course

Free Download 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.


Homepage