Master Svelte Framework - The Complete Course

Master Svelte framework introduces components, props, and bound data, and guides you through readable, writable, and derived stores, actions, and deploying to Vercel while building four challenge apps.

Install Node.js and Visual Studio Code, add the Svelte extension, set up a project with vite using npm init, npm install, and npm run dev, then verify in Chrome.

Open the project in Visual Studio Code and tour the Svelte files to understand dev dependencies, Vite, and the Svelte Vite plugin; explore the build and preview workflow.

Learn to create and import Svelte components, using the dot svelte extension and one component per file. Build with html, css and javascript and import components into your app.

Output JavaScript variables in Svelte components using curly braces and dynamic styles, then update color and font size with setTimeout to show reactive variables.

Learn how to pass data with props in Svelte by wiring a parent and child component, exporting props, and binding to update values in real time.

Style svelte components with scoped styles and use a global.css imported into main.js for global defaults; create and import a cool H2 component to apply its styling.

Learn how to bind variable data to inputs and sync input values with variables in Svelte, including attribute bindings and a range slider that controls font size.

Build a reusable Svelte color picker with a labeled slider component, bind red, green, and blue values (0–255), and display the live RGB color.

Learn to handle DOM events in a Svelte app by wiring click, input, and change handlers, using the Svelte window for keyboard events, and move a div with arrow keys.

Learn how to create and dispatch custom events in Svelte, pass form data from child to parent, and forward events through components using on form submit and event detail.

Learn to use Svelte reactive statements and the $: syntax to bind inputs, derive values like capitalized names and color values, and drive real-time UI updates.

Create a reactive hex color by converting RGB values with a copied JavaScript function, then watch the hex color update in real time as red, green, and blue inputs change.

Learn to implement if and else statements in Svelte templates using reactive variables, binding, and booleans, with color name checks and a checkbox driven display.

Explore rendering lists with Svelte’s each statement by building a color list, displaying it in a ul, and adding new colors via an input and button.

Learn to add a unique id to each item in a color loop for efficient rendering and to access the index. Prevent duplicates and blank colors with clear user errors.

Learn to await a promise in a Svelte template by fetching a random quote from Zen quotes.io, showing loading, rendering the quote and author, and handling errors.

Build a Magic: The Gathering score counter with Svelte and Bootstrap, using components, props, and reactive variables to track 20-point red and blue scores and support new game and reset.

Learn to deploy svelte apps with Vercel, publish to GitHub from VS Code, and redeploy quickly, with notes on environment variables.

Demonstrate Svelte lifecycle hooks on mount and on destroy by toggling a lifecycle component with a checkbox, logging events, and fetching a quote from the Zen Quotes API.

Master Svelte lifecycle events beforeUpdate and afterUpdate, demonstrated with a live numbers list that updates every second and auto-scrolls to the bottom.

learn how to create and use a readable store to manage geolocation data in Svelte, including subscribing, unsubscribing, and keeping state centralized across components.

Learn how to create and use writable stores in Svelte, update stores with set and update, and build plus and minus buttons that modify a count in real time.

Learn to build custom stores in Svelte, centralizing logic with subscribe, update, and set, and expose functions like multiply by three for reusable, testable components.

Learn how to create and use a derived store from writable stores in Svelte, including binding values, computing even sums, and updating with set.

Create and manage a two-component contact list in Svelte with a custom writable store, including add, edit, delete, and UUID-generated IDs, styled with milligram.

Explore actions in a Svelte app by creating an example action, binding a checkbox to state via checked property, and cleaning up with a destroy function to prevent memory leaks.

Learn to pass parameters to a Svelte action, including a color value and multiple params via an object, destructure color and width, and update the element's background color and width.

Explore slots in Svelte with a box component featuring named slots like top, bottom, and middle. See how inner content renders in each slot and enables reusable SvelteKit components.

Learn to build a draggable slot component in Svelte by handling mouse down, move, and up events on the window, using absolute positioning to update left and top coordinates.

Explore core Svelte concepts, including components, props, templating, binding variables, and stores (writable, readable, derived, custom) for state management; deploy to Vercel and build projects like a color picker.

Explore Sveltekit, the official framework for building Svelte apps, with hands-on guidance on routing, layouts, forms, form actions, error pages, API routes, and hooks to build a multi-page app.

Install and run sveltekit on your machine, creating a project named intro-site with skeleton template. Install dependencies via npm, run the dev server, and open the site in a browser.

Explore the SvelteKit project tour by opening it in Visual Studio Code, running npm run dev, and reviewing adapters, the static folder, app.html, and root-based routing.

Explore folder-based routing in SvelteKit by creating pages with a Routes folder and plus page dot Svelte, test via the dev server URL, and implement a contact page as practice.

Learn how to implement route parameters in a SvelteKit app by creating a person/[id] route, extracting id via a load function, and using color/[color] to style pages.

Explore server side load functions in svelte using environment variables to keep api keys private and public, implement stock route parameters, and handle errors with server logic.

Build a random number page in svelte with a route parameter and a private key to store another number, then compare with environment variable via a server side load function.

Learn how to use svelte layouts as page wrappers with slots, implement client-side routing, and create server-side layout loads with environment variables to customize pages such as about and contact.

Prefetch data with link attributes to speed navigation, and use the page store to highlight the active path in the layout navigation.

Build a personal website with home, about, and contact pages using SvelteKit; include a server-side daily quote from Zen Quotes and a responsive Bootstrap navbar with a mobile hamburger.

deploy a sveltekit website to vercel by linking your github project, importing the svelte personal site, and deploying to see live results, including quotes, about, and contact pages.

Learn form actions in SvelteKit by building a contact form, handling submissions on the server with default post, validating inputs, and using use:enhance for seamless background submission.

Build a form with width, height, and color inputs and validate them. Render a div styled by the submitted values in SvelteKit.

Examine pre rendering, server side rendering, and client side rendering in sveltekit; learn to configure pages with plus page js and layout js, then build and preview.

Learn to build custom error pages in Svelte, render errors with precise status codes (404, 401, 403), and inspect error details using the page store and +error.svelte.

Explore server-side routes to build APIs that serve JSON, create routes/fish/+server.js with a get handler returning data via new Response, and understand HTTP methods like post, put, and patch.

Explore svelte hooks to intercept server requests, implement authentication with server hooks and locals, and build an admin-only page using plus page.server.js with a 403 guard.

Explore SvelteKit features like pages, folder-based routing, parameter routing, server rendering, and deployment with Vercel. Apply prefetching, environment variables, error pages, and hooks as you prepare Firebase and Firestore.

Explore building a full stack, SSR SvelteKit site with Firebase integration, including pagination, login, profile with favoriting books, server-side form validation, and a complete home, about, and sign-up flow.

Set up a SvelteKit project with npm create svelte@latest, install dependencies, configure global css and static assets, and run dev server to test a red page ahead of Firebase setup.

Set up Firebase with Firestore, storage, and authentication for a SvelteKit app, covering production mode, region considerations, and secure handling of private keys.

Install Bootstrap CSS, create a reusable nav bar in SvelteKit, and implement a conditional isLoggedIn flag to switch between logged in and not logged in navigation.

Implement mobile navigation in a Svelte project by toggling the mobile collapse with a show class, using an isOpen state and a click handler to control the hamburger menu.

Highlight navbar links in a SvelteKit app by binding an active class to links based on the current URL path name, using the page store and Svelte Head.

Create a site-wide messaging system in sveltekit by adding a messages store (show, message, type) with error or success and rendering a bootstrap alert with dynamic classes.

Initialize Firebase on the client side by wiring a web app config, env vars, and get Firestore in a Svelte project, enabling analytics and validating on the dev server.

Implement google sign in with firebase authentication on the client, building a reusable login with google component for login and registration pages using sign in with pop-up and google provider.

Export a readable auth store using Svelte stores to track active, logged in, and user id; integrate onAuthStateChanged and getAuth from Firebase to update the navigation.

Implement a logout function using Firebase signOut and getAuth, connect it to the nav button, handle errors, and navigate home so the UI switches from log out to log in.

Register with email and password by creating a user in the auth client; reuse an auth form for sign up, sign in, forget password, and Google login.

Learn to implement login with email and password using Firebase Auth, export a login function, wire an onsubmit handler with form data, and handle common errors with a generic message.

Implement forgot password workflow using Firebase Auth in a Svelte app, wire mail reset password email, handle submit with try/catch, show reset email sent and hide form.

Implement an after login redirect that sends users to the target add page or home page using a route helper and redirect parameter.

Save the user to Firestore on the client side during login or signup by writing a document in users collection with the user id as the document key using setDoc.

Initialize Firebase on the server in a SvelteKit app using the Firebase Admin SDK, access Firestore and Auth, and render the user count on home page via a server-side load.

Learn the server-side firebase authentication plan: the browser obtains a jwt from firebase and the sveltekit server validates it via a server-only endpoint, setting an http-only cookie for authenticated requests.

Master Svelte framework course teaches building a server-side token endpoint for Firebase authentication, verifying tokens and setting a secure http-only jwt cookie to enable login flows.

Implement an async function to post the JWT token and user email to the /token endpoint after login or register, and ensure the JWT cookie is set.

Enable client-side refresh tokens by sending a new JWT to the server token endpoint after login, using on mount and ten-minute intervals with error handling.

Implement server-side logout by deleting the http-only jwt cookie via a new logout endpoint, and call it on logout to ensure token removal.

Implement server-side authentication hooks in a SvelteKit app to secure protected routes, manage user sessions with Firebase auth, verify tokens, and redirect unauthenticated users to login.

Learn to implement add book form validation in a Svelte app using Yup to build a schema for title, author, description, and images, and wire up server actions for validation.

Assemble form data, validate a book form with a schema using abortEarly false, and return success or key-value errors with a 422 response.

Save the book to Firestore and upload its pictures to Firebase storage, then update the book with the image URLs. Redirect the user to the new book page.

Learn to build a book show page in a Svelte app by fetching book data from Firestore, handling id routing, and returning a 404 when a book isn't found.

Create the edit book page with a server-side load that verifies the book exists and user ownership, then pre-populates the form and handles updates and redirects after saving.

Learn to enhance a reusable form with the use enhance action, manage a submitting state, and submit to a server action, for both add and edit forms.

Create a server side like endpoint allowing a logged-in user to like or unlike a book, using a Firestore toggle function with array union/remove and likes increment.

Create a svelte like component to handle like and unlike, using an optional user id to detect if the user liked the book, and show likes on the book page.

Learn how to implement a toggle like action in a Svelte app by wiring a like component to an endpoint, handling async fetch, and updating the user interface.

Fetch the latest five books with getBooks, map their data and like status, and render a simple ul of titles on the home page.

Fix a bug that allowed unauthenticated users to click the like button by gating with the auth store and applying a not allowed cursor.

Learn to implement pagination on the home page using firebase to count total books, a page size of three, and a page query parameter with next and previous controls.

Create a reusable book component in Svelte to preview each book by passing a book prop with title, author, description, and a small image on the home page with pagination.

Set up the profile page using a plus layout with folder-based routing, creating my books and favorites pages, and implement active tab highlighting via the url path and page store.

Fetches all books for the current user from a Firebase database using the user id, determines which books are liked, and renders them with a reusable book component.

Learn to enable clicking a book item to navigate to its page by building a go to book page function, using the book object, and leveraging reusable components.

learn how to fetch a user's favorite books with a get liked books function using Firestore queries, then render them on a Svelte favorites page with server load.

Fix the favorites page so unliking a book removes it by dispatching a toggle like event with the book id, forwarding the event, and filtering the list.

Fix the menu rendering with server-side rendering by passing is_logged_in from the server to the navigation component. Ensure the correct logged-in or logged-out menu displays from the start.

Learn to implement real-time new book alerts in a Svelte app by enabling client-side Firestore reads, building a readable store, and displaying a layout-wide alert with close and unsubscribe.

Deploy the book lovers app to vercel by moving firebase secrets to dot env, updating imports, configuring environment variables, and testing a build.

Master Svelte framework guides building an SSR SvelteKit site with Firebase, including real-time updates, storage of images, and pagination, plus learning about stores, components, and event dispatchers.

Explore building web apps with the Svelte framework, mastering components, props, actions, stores, and slots, then delve into SvelteKit routing, SSR, and Vercel deployment for Firebase-backed real-world sites.