Published 3/2023MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHzLanguage: English | Size: 11.68 GB | Duration: 25h 21m
Create 2 apps with Svelte - Twitter and Trello clones. Unleash Svelte reactivity and speed. Use Firebase as data store. 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. Base javascript knowledge 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 sually 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 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 strats 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. 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 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: gfxtra__Svelte_and.part01.rar.html gfxtra__Svelte_and.part02.rar.html gfxtra__Svelte_and.part03.rar.html gfxtra__Svelte_and.part04.rar.html gfxtra__Svelte_and.part05.rar.html gfxtra__Svelte_and.part06.rar.html gfxtra__Svelte_and.part07.rar.html gfxtra__Svelte_and.part08.rar.html gfxtra__Svelte_and.part09.rar.html gfxtra__Svelte_and.part10.rar.html
TO MAC USERS: If RAR password doesn't work, use this archive program:
RAR Expander 0.8.5 Beta 4 and extract password protected files without error.
TO WIN USERS: If RAR password doesn't work, use this archive program:
Latest Winrar and extract password protected files without error.