The complete SVELTE V5 course. Inc SvelteKit SSR & Firebase

Compare svelte as a library with sveltekit as a framework, covering server and client rendering and routing, then master svelte basics before building a sveltekit server app.

Install svelte with vite, using the VS code svelte plugin. Create or use a project, run npm install, then npm run dev to view the default template at localhost:5173.

Explore the Svelte project structure, including Svelte and Vite configs, package scripts (dev, build, preview), and the dist directory; learn how index.html, main.js, and app.svelte mount to the app div.

Learn to build and reuse Svelte components with Vite, import them in the app, render header and users, and enforce capitalized component names to avoid treating them as html tags.

Explore the svelte script tag in a component, write JavaScript with variables and functions, and render reactive results in the template using curly braces in a version five single-page app.

Learn how Svelte v5 uses runes to declare reactive state, replacing v4's implicit reactivity, and how to migrate—covering state runes, compatibility, and practical examples.

Style svelte components with the style tag; it scopes by default. Use :global or imported css for global styles, import global.css at top level, or link public styles.css in index.html.

Learn how props enable data sharing between parent and child components in a Svelte app, including defaults, fallbacks, renaming props, and reactive props in single page applications.

Explore how to pass and manage multiple props in Svelte, using objects, the rest operator, and reactive updates that trigger child re-renders, preparing for the bindable pattern.

Learn how to properly bind props in Svelte v5, preventing mutation of parent state from child. Use bind and Bindable for two-way binding to share and update values.

learn to handle dom events in Svelte v5 using on click, on input, and on submit, while noting the deprecation of v4 modifiers and using prevent default in handlers.

Explore conditional rendering in Svelte templates with if, else, and else if blocks to gate access by age and authentication, while binding inputs for reactive state updates.

Explore how to use svelte's if and else and each blocks to render lists from arrays and objects. Bind inputs to properties, add names, and use keys to prevent duplicates.

Explore the Svelte await block by fetching posts from JSON Placeholder, wiring async functions in the template, handling loading states, and catching errors with then and catch blocks.

Learn how derived state works in svelte v5 with a reactive name and a non-reactive message. Wrap the message with derived to keep it updated as the name changes.

Learn to call a parent function from a child using props in Svelte, replacing version four's event emitter with a simple props-based approach.

Explore snippets, a powerful replacement for slots in Svelte v5, as function-like templates you render, pass arguments, loop over data, and nest for reusable, interactive UI.

Explore how to use slots to share data between parent and child components in Svelte V5, render header and footer snippets, and pass props to create reusable templates.

Explore svelte's onMount and onDestroy lifecycle by mounting and unmounting a users component, using a returned cleanup function and console logs to observe when the component mounts and unmounts.

Explore the effect rune in svelte v5, which listens to reactive dependencies, runs on mount and updates, and avoids updating the same dependency inside the effect.

Explore the effect rune in Svelte v5, replacing onupdate and before update, and use the cleanup effect to see previous values before each update.

Discover how svelte actions attach to elements and access the dom. Change styles and innerHTML, and subscribe to events with cleanup on destroy.

Master forms in a fresh Svelte project by building input fields with two-way binding and on input handling, then explore Bootstrap styling and the inspect rune for live updates.

Learn to implement radio and checkbox inputs in Svelte with form check input styling, bind groups for radios, and bind checked for checkboxes, using terms and newsletter examples.

In the complete svelte v5 course, create a select bound to a country value with a default option and country options, demonstrating form binding and validation prep.

Explore manual form validation in Svelte v5 by building a validation function, validating inputs on input, preventing default submit, and using a form data object, before introducing the Felt library.

Discover felt, an extensible form library for svelte, by installing it and creating a form instance. Link inputs with use: form, implement onsubmit, and validate with an errors object.

Explore how felt integrates with Yup to implement form validation via a schema. Define validation rules for strings and numbers, including required and min age checks.

Explore stores in svelte v5 and how any component can tap a writable store to share data beyond parent‑child props. Create a clean project and set up a store directory.

Learn to create a writable store in Svelte, export it as count, share this centralized store across components, and use set, update, and subscribe for reactive updates.

learn how to refactor a svelte writable store by exporting only the parts you need, and create dedicated add one and minus one functions to avoid copy-paste across components.

Explore the readable store in Svelte, a read-only store that starts at zero and updates via a subscription, with cleanup stopping on unmount.

Learn how derived stores in Svelte derive values from other stores. Build a derived store from a writeable count and modify, multiplying by ten and updating reactively.

Learn to create and bind Svelte stores, including a writable brand, to inputs for two-way updates, and read values with get and derived stores.

Install and set up a Svelte v5 app, resolve vite 7 issues by downgrading, install fonts, build a two-screen who pays the bill app with name validation and loser logic.

Learn to create an input and add button in Svelte v5, bind the input to a store, push names to the list, and render the names below.

Implement name validation in a Svelte app by checking for empty input and ensuring unique names, using a validate function, a store with error and show error, and template display.

Remove a name by clicking its delete button, pass the item's index, and use the store's update method to splice the names array and refresh the UI.

Click the loser button only after validating at least two names; if valid, navigate to the results screen and reset or restart, otherwise display errors from the store.

Fetch a random name from a names store on mount, display the result, and reset or get a new name using store updates in Svelte.

Implement a get new name feature in a Svelte app using a while loop to avoid repeats, add a reset, and prepare transitions for fade in/out.

Navigate svelte transitions and animation basics, including svelte animation, svelte transition, motion, and easings, with documentation guidance and practical setup notes for vite projects.

learn to implement transitions in svelte v5, including fade and other effects, by building a dynamic number grid that adds random values and animates them with various transitions.

Apply Svelte v5 transitions using fade with delay, duration, and easing; explore blur, axis-based slide, and fly with x and y positions, including off-screen entry with negative values.

learn to add and remove items in a Svelte v5 app with click-to-remove, fade in, slide out, and on intro/outro callbacks, plus the flip animation via svelte/animate.

Explore Svelte's tween in motion to animate a value from zero to a target using set, duration, and easing, and apply it to a square's scale.

Add fade transitions to the practice app in Svelte, applying container and per-name transitions with a 500 ms duration and a one-second delay for the results screen.

Install and bootstrap a SvelteKit project with the new installer, select the minimal template in JavaScript, enable prettier, and run npm run dev to view a bare-bones app.

Learn routing in SvelteKit by creating routes with plus page.svelte files in the src/routes folder, building home, contact, and nested user paths, served via server-side rendering.

Discover how plus layouts power persistent ui in SvelteKit by rendering the plus page content through root and child layouts, using render and props to display children across routes.

Create admin groups to organize routes, add a dashboard and plus page inside, and understand how group pages render a 404 for non-root paths while improving navigation with links.

Create a custom 404 page in SvelteKit with routes/+error.svelte, fetch error data via the page store, and display dynamic status messages, then enhance navigation with a Bootstrap header.

Learn to implement dynamic route params in SvelteKit by creating square-bracket folders, access the id via page.params, and build nested params like date, using a plus page to render content.

Understand the client versus server model in SvelteKit, where plus page JS runs on the server and client, while plus page server runs only on the server, illustrating two-dimensional execution.

Learn to fetch data in a SvelteKit plus page using a load function, return a plain object of users from JSON placeholder, pass via props, and handle errors.

Explore how the load function exposes properties such as route, URL, errors, and params, and learn to destructure params to fetch user data and render the user's name and email.

Explore the plus page server.js, using the load function to access the server request, headers, and cookies, and fetch data with fetch and params to combine server and page data.

Learn how Svelte and Vite manage environment variables, using a root .env file with private and public keys, the all-caps naming convention, and server versus client access.

Explore link prefetching in a SvelteKit app by building a posts route that preloads data on hover, using Axios to fetch posts and display title and body.

learn how to implement active links in svelte by checking the route path, applying an active class, and planning to render nav options with a loop for the bootstrap header.

Learn to implement redirects in SvelteKit using the redirect function on pages and server, specify status and location, and programmatically navigate with go, plus after navigate and before navigate.

Explore server form actions in Svelte v5, posting a form to server.js, parsing formData from the request, returning a response, and rendering results without relying on JavaScript.

Learn manual server-side form validation by building an errors object, returning success or errors, and displaying targeted messages on the front end, then use SvelteKit's enhance to prevent the page reload.

Learn how to enhance forms in Svelte V5 to prevent page reloads, access the form element and data, manage action and cancel, and update the server response with enhanced callback.

Name forms in a SvelteKit component and post them to specific server handlers using action ?/name; route forms on the same page or to /users/login or API routes.

Explore SvelteKit API routes by building a plus page server and API/users, handle GET and POST requests, return JSON responses with status, and manage errors using the request object.

Explore how to enable pre rendering in SvelteKit by exporting pre render in route files, building and previewing the app, and inspecting static HTML output for home and posts.

Enable and fine-tune pre-rendering in SvelteKit by configuring layouts and routes, handling actions, and managing dynamic routes, while comparing auto, true, false settings for SSR and CSR.

Explore how server side rendering and client side rendering operate in SvelteKit, and how to enable or disable SSR/CSR, pre-render, and data loading via a load function.

Build a minimal firebase-backed post app with sign in, sign out, and guarded routes. Use a dashboard to manage profiles and articles, load posts, and show loader with load more.

Set up Firebase auth and Firestore for a Svelte v5 app by creating a project, enabling email/password login, enabling test mode, and wiring a single client/server Firebase config for SSR.

Set up the main layout and navigation for a Svelte app, wiring a plus layout and a reusable nav component with routes for dashboard and sign-in, preparing firebase auth integration.

Learn to build sign in and register forms using felt and svelte, validate inputs with yup, and integrate with Firebase, including loader states and form type switching.

Build sign in and register validation with yup by defining a schema for email and password, enforcing required, min, and max rules, and showing bootstrap error messages and a loader.

Register users with the Firebase client by creating an auth flow that signs up with email and password, stores user data in Firestore, and redirects with toasts and loader handling.

Implement a sign in user function using Firebase authentication, calling signInWithEmailAndPassword with email and password, handling loading state and errors, then redirecting on success and planning user-friendly toasts for feedback.

Learn to implement toasts with Melt in Svelte, create a toaster instance, display success and error messages, and map Firebase errors using a dedicated error codes module.

Leverage Firebase onAuthStateChanged to create a client-side auth store (readable) in Svelte, enabling nav links to show dashboard or sign in and implement sign out, with server-side considerations for SSR.

Configure server-side Firebase Admin to initialize app with service accounts, access Firestore and Auth, manage tokens, and securely expose session cookies between client and server.

Learn to implement a server API route in SvelteKit that posts a token and email to Firebase, verifies the token, and stores it in a cookie for session authentication.

Log out by destroying the server cookie via a get api route, removing the GTS-T cookie, and returning a JSON success response.

Handle session on reload by awaiting onAuthStateChanged to confirm the user before rendering. Show a loader during the check and refresh the token in cookies with set access token.

Build and guard dashboard routes in a nested layout, implement navigation with active state, and prepare server load guards to enforce authentication in a SvelteKit app.

Intercept requests with a server hooks file, using handle to pipeline through auth and route guards. Use cookies and firebase tokens via locals to guard dashboard routes.

Guard routes with server hooks in a SvelteKit v5 app by checking locals.user, protecting dashboard and its nested routes (profile, articles, create), and redirecting unauthenticated users to sign in.

Create article form demonstrates building a Svelte form for posting articles via server forms, including a dashboard, a dedicated article form component, and creating server actions to handle post requests.

Learn server-side article form validation with Yup by building an article schema, handling fields like game, title, description, and rating, and returning all errors with abortEarly false.

Demonstrates displaying server errors on a form using the SvelteKit fail response, marking fields invalid with bootstrap, showing per-field messages for title, description, game, rating, and posting to Firebase.

Create a server-side function to post articles to Firestore, using an articles collection with owner and created timestamp. Import the DB and admin in a Firebase server file.

Build a user articles dashboard in SvelteKit by fetching articles from Firebase on the server, filtering by owner, ordering by created at, and returning article IDs for display.

Build a data-driven articles table that renders articles from the server, showing id, game, and title with links and an edit button that navigates to the article's edit page.

Learn to edit an article by id: fetch article and owner data, populate the edit form. Then post changes using a server action with firebase integration.

Learn to edit and update an article by ID on the server, using form data and a validation schema with Firebase, perform ownership checks, handle errors, and redirect after update.

Fetch an article by id in a SvelteKit app using Firebase, implement a server load function, handle 404 errors, and reveal an edit link for the article owner or admin.

Create an article page that reveals an edit link for admins, shows game name, title, owner or anonymous, rating and description, and implement load more for the home feed.

Learn how to fetch home articles using a Svelte store and Firebase, manage posts with a readable articles store, and implement load more with the last visible post.

Implement load more for home posts by querying the articles store, using last visible with start after in Firebase, and updating the store with the next posts.

Show home posts by loading from the article store, display them in bootstrap cards with title and description, and provide a load more button until no posts remain.

Build a server form for the profile with schema validation, load the current user data from firestore, and post updates to the server to update the profile.

Capture form data, validate a profile schema for first name and last name, then update the user on Firebase via the server, ensuring ownership with a 403 check.

Install and start a Svelte project using vite, choose between classic svelte and svelte kit, install extensions, create template with npm create vite, install dependencies, and run the dev server.

Explore the Svelte project structure, from vite config and package.json scripts to src, index.html, and main.js; learn to build for production into dist and preview the result.

Learn to create and use Svelte components, organize them in source or lib directories, import and render header and user components, and understand capitalized component names and script imports.

Embed JavaScript in a Svelte component with a local script tag, render variables with curly braces, and see Svelte re-render as state changes.

Learn how the style tag scopes CSS to a Svelte component, apply global styles via a global selector or global.css, and load CSS from public or via Bootstrap CDN.

Export a name prop in the child and pass it from the parent to share values between components, updating together as the parent changes; handle undefined values.

Bind props to enable two-way updates between parent and child in a Svelte app, linking username to name and syncing changes with the bind syntax.

Learn how to handle DOM events in Svelte using on: directives for common events like click, input, and submit, including event objects, and modifiers such as prevent default.

Explore Svelte's conditional rendering with if blocks in templates, including else if and else, using age-based examples and dynamic bindings. Learn about booleans, authentication checks, and live updates.

Learn how to render lists with the Svelte each block, bind inputs, and append names to an array. Use reactivity with array reassignment, the spread operator, and unique keys.

Explore awaiting data in Svelte templates using the await logic block, fetch posts from JSONPlaceholder with async functions, handle loading and errors, and render each post’s id and title.

Explore how to create reactive statements in Svelte by using the $: syntax to watch dependent variables, update outputs like message and total, and respond to changes in real time.

Explore emitting events in Svelte with createEventDispatcher, dispatch a handle event with detail data, and let the parent respond to the event by accessing name and age.

Explore how slots work in svelte, including default and named slots, how parent content overrides child slots, and the use of fallbacks for flexible component composition.

Explore advanced slot patterns in Svelte, including named slots, fragments to avoid extra elements, and content slots with conditional rendering and fallbacks.

learn how svelte life cycles work, including on mount and ondestroy, by mounting and unmounting a component, triggering callbacks, optional cleanup, and observing updates.

Explore the before update and after update hooks in Svelte and observe how updates occur on components and props, including parent-to-child prop changes and update callbacks.

Learn how svelte actions attach a function to a DOM node that runs on creation, enabling direct DOM access, styling, event listeners, and a destroy callback for cleanup.

Master form inputs in Svelte with two-way binding using bind, handle input events, and manage form data like name and age, styled with bootstrap.

Learn to implement checkboxes and radio buttons in Svelte, binding terms to a boolean, exploring group binding for radios, and handling multiple selections with an array.

Build a Svelte select with countries like Italy, Spain, and Canada, bind the selected value, handle a default disabled option, and validate and submit the form with a library.

Explore form validation in Svelte by building manual validation logic, handling submit with prevent default, and comparing vanilla form data with a future library like Yup.

Build and validate forms in Svelte using the Felte library, install version 1.2.14, create forms, bind inputs, handle onsubmit context, and implement manual or Yup schema validation.

Learn to validate form inputs with yup schema validation and the felt bridge, install and define a name and age schema, and customize error messages.