Master Svelte 5 & SvelteKit – Build & Deploy Real-World Apps

Discover the structure of a Svelte file with script, HTML, and style sections, and master inline event handling, variables, and modular CSS inside a SvelteKit project.

Explore reactive state and derived values in Svelte 5, with practical examples of updating UI on user input, using state and derived to keep a single source of truth.

Bind the username state to a text input, display it live, and use the effect hook to send the username to the database on every change, without a dependency array.

Learn how to debug in Svelte using the inspect rune to track the username state as it updates, replacing the effect rune for clearer initialization and refresh behavior.

Explore snippets in svelte five and render them within a single file. Master the templating language for if, else, and loops and manage reactive state with arrays and snippets.

Learn how to fetch data server-side using page.server.ts and dynamic routes in SvelteKit, pass data to page.svelte, and balance server vs client loading to render blog articles by article ID.

Learn how to replace server load with a unified page load in SvelteKit, enabling client and server side execution, type-safe data via load, and seamless client-side preloading.

Create server-side API endpoints in SvelteKit by adding server.ts in routes, handling post requests and JSON bodies, and wiring back-end logic for Stripe purchases and account deletion.

Build a landing page for a digital product with Svelte and SvelteKit, enabling Stripe payments via a backend and email delivery, with interactive sections.

Clone svelte five starter templates, install with npm i, and run npm run dev to scaffold book landing project; styling is baked in and warnings fade after HTML is written.

Initialize a svelte five skeleton project with npm create svelte latest for a book landing app. Reset CSS, import fonts, and configure a layout to share styles across pages.

Create a reusable hero section in a svelte landing page, featuring a left image, right bold copy and a call to action, with component and asset aliases.

Learn to style a Svelte hero section with a 50/50 split, gradient left background, and bottom-anchored book cover images using an inline style tag scoped to the component.

Create a reusable button component in svelte five that accepts dynamic text via children and props. Import, export, and spread remaining props to support actions like onClick across hero sections.

Style the button with a scoped style tag, set black background, white text, 22px font, padding, uppercase, and a hover transition that inverts to white with a border.

Learn to build a chapter preview section in a Svelte app using state and reactivity, with an accessible button-based chapter list and a detailed chapter info panel.

Master Svelte 5 styling for the chapter preview by building a flex layout, crafting a 40/55/5% split, and styling active chapter titles with borders, selected states, and shadows.

Render a dynamic chapter list in Svelte with the #each keyword, iterating over a chapters array to display chapter numbers and titles and set up selection state.

Explore dynamic rendering in Svelte 5 with a reactive selected chapter number, using a class directive and a selectChapter function to highlight the active chapter and expand details on click.

Understand deriving a reactive state in svelte by mapping the selected chapter number to its chapter data, pulling the title and excerpt, reducing boilerplate.

Create a simple static author section component in Svelte, export it, and import a profile image from assets to render a text and image layout with two paragraphs.

Style the author section with a style tag and a flex container, balancing the image at 40% and the text at 55%, with padding, margins, border, and box shadow.

Build an accessible faq accordion in Svelte by creating a faq section and item components, rendering questions and answers, and wiring icons and imports for styling.

Learn to style a responsive Svelte FAQ section by creating reusable utility classes, flex layouts, and animated expand/collapse with transitions.

Build dynamic faq functionality by rendering five faq items from a questions-and-answers array, passing data via props, and manage a single expanded item in the faq section.

Set up a Stripe account in test mode, grab publishable and secret keys, configure environment variables, create a product and price, and prepare for checkout integration.

Explore how to integrate stripe payments across frontend and backend using Stripe.js for the public key, a secret key on the backend, and checkout sessions with session IDs and redirects.

Master stripe integration in a SvelteKit app by wiring a buy button to a backend checkout session, using public/private env vars and redirecting to Stripe checkout.

Create checkout success and failure pages in SvelteKit by reusing a flexible hero section, rendering content via children props, with a text fallback and a retry button for payment flow.

Register a SendGrid account and create an API key, then wire a Stripe purchase webhook to a SvelteKit backend and deliver digital products via email, deploying on Vercel.

Deploy and configure Vercel from a GitHub repo, set environment variables and the public frontend url, and build a Stripe webhook endpoint at api/purchase-confirmation with Stripe CLI local forwarding.

Trigger a purchase email from a Stripe webhook using SendGrid mail, extract customer details, and send a html confirmation with a base64-encoded PDF digital book attachment hosted on S3.

Build a developer portfolio using a headless CMS to power a Svelte front end, fetch data from Sanity, and create client-ready content like blogs, projects, and contact forms.

Set up a svelte project with npm create svelte latest, choose a skeleton with TypeScript, install dependencies, configure VSCode, and implement a plus layout that loads app CSS via slot.

Build a fast, minimal hero section in a Svelte project, create a hero section component, import it into the plus page, and use a one-liner css with a default margin.

Learn to build a reusable button component in a SvelteKit project, typing props with TypeScript, rendering children, handling onClick navigation, and extending styling with optional class names.

Select the button class to apply styling with inverted typography, font weight 500, black background, white text, 24px font size, 40px top/bottom and 14px left/right padding, and 10px border radius.

Learn to create a reusable section headline component in Svelte, pass in section name and id, and apply it to the About Me section for consistent headlines and anchors.

Create an about me section in a Svelte app by using an assets folder, a left image with flexbox, accessible alt text, and a button to the contact form.

Style the about me section with a flex container, set the image to 42% width with a border radius of 2020 pixels and object-fit cover, and assign 55% to text.

Create a reusable work experience table in Svelte using mock data, then fetch from Sanity, define a work experience interface, and render with semantic markup in a real-world SvelteKit app.

Style the work experience section as a flex container, align the headline to the right, and apply borders and padding to each item, then fetch data from a headless CMS.

Learn to set up Sanity as a headless CMS, define a work experience schema with fields like job title, company, start and end dates, and fetch data.

Install and configure the sanity client in a SvelteKit frontend, fetch dev experience data with typed schemas, and wire it through server and client loads plus cors whitelisting.

Pass the sanity data into the front end, destructure it, and type the about me and experience table props. Understand how CDN caching affects updates.

define a sanity data schema for projects with name, company, slug, image, date, content blocks, and stack, then populate and consume it in the front end.

Set up and generate sanity types for raw and processed project data, map complex content to a front-end friendly shape, and assemble image URLs to render on the landing page.

Transform raw sanity project data into frontend-ready structures by using the image url builder, mapping fields like name and slug, and converting content blocks into processed text and image entries.

Create the my work section's html structure with a featured main project and a row of additional projects, powered by a projects array and props, linked by slugs.

Apply styling to the my work section by setting images to 100% width with a 20px border radius and cover fit, making them clickable, and use flex to arrange cards.

Build dynamic blog article pages using a slug-based route in a SvelteKit app, fetch article data with a load function and Sanity client, and render the article content.

Render a blog article on the frontend with SvelteKit, handling missing slug, destructuring project data, and dynamically rendering content blocks into appropriate HTML tags.

Style the blog article by adding top and bottom padding, limiting the image with max height and object-fit cover, and using a flex container for metadata and minimum width 200px.

Integrate dev icons to create a dynamic skills section with a sanity schema. Define a skills document with name and icon class, publish and display icons on the front end.

Fetch and render the skills list from sanity in parallel with project data, define the skills type, and build a reusable skills section component in Svelte.

Style the skills section with a style tag and a responsive flexbox: center the wrapper, wrap 12 icons into three rows of four with gaps and 18px black icons.

Build the contact form component with a flexbox layout, including name and email inputs, a textarea, and a submit button with an onsubmit handler that prevents default.

Style a contact section with flexbox to align a left form and right text, using precise width and spacing. Include input styling, placeholders, and a loading spinner animation.

Implement frontend validation for a contact form in svelte five by binding inputs to state, tracking name, email, and project notes, and showing live feedback before submission.

Learn to implement a server-side post endpoint to receive contact form data, validate inputs, and send email via SendGrid, with front-end fetch integration, error handling, loading states, and user feedback.

Create a reusable header component as a navbar with links to main, about me, and my work, and wrap all pages in layout.svelte so it appears everywhere.

Turn the header into a flex container with space-between, left logo bold at 35 pixels, right links with a 60-pixel gap, hover underline, and smaller contact button using modular CSS.

Build a simple footer component with a black background, white text, padding, and social links (GitHub, LinkedIn, Twitter) plus a copyright line, styled and integrated into the layout.

Deploy your SvelteKit app to Vercel, configure environment variables like the SendGrid API key, and publish Sanity Studio to the cloud with a host name, testing the contact form.

Explore a complex SvelteKit project that integrates Google authentication, Supabase database, and an OpenAI image-recognition feature to build, add, edit, and rate books in a library app.

Set up a Book Nest project from the svelte course repository using npm create svelte with TypeScript and the svelte five preview, then install dependencies and apply app.css via layout.svelte.

Create a reusable hero section in a SvelteKit app by building a components folder, exporting the hero component, and presenting a beautifully designed, easy-to-use digital library for your book collection.

Style the hero section using a flexbox with space-between and align-items center, assign 40% image width and 55% text width in column, plus a 5% gap and a 550-pixel paragraph.

Master a flexible Svelte button component that can render as a button or an anchor link, with shared props and variants like primary, secondary, danger, and menu.

Explore flexible button styling by creating a primary button with 12px by 24px padding, 230px min width, centered text, black background, white border, and a white secondary with black text.

Export and use a reusable button in the hero, wire it to the register page, and build a header with a logo, navigation, and account actions for a SvelteKit app.

Style the header as a flex container with centered items and space-between, placing the logo left and the navbar right, with 12px vertical padding and a 72px logo.

Build a login and register in a SvelteKit app by using an auth form component controlled by an isRegistration prop, with name, email, password, and password confirmation fields, conditionally shown.

Style the auth container with an 80px top margin and a form and social login flex layout; make inputs full width and include a red, white-text auth error banner.

Master form actions in SvelteKit to handle registration and login via server endpoints, with form data validation and progressive enhancement.

Set up supabase authentication for a SvelteKit app by creating a new project, configuring env vars (anon key, service role, public URL), and enabling email signup with username and password.

Install both supabase packages, set up server-side and client-side clients with public url and key, sign up users by email and password, and redirect to a private dashboard on success.

Explore the Supabase auth flow from registration to session creation, using a server hook to guard private routes, pass session and cookies to layouts, and manage global auth state.

Implement server-side authentication using Supabase in a SvelteKit app by wiring server-side hooks, an auth guard, and session management to protect private routes and redirect to login or dashboard.

Implement a login form action in SvelteKit by cleaning code, building a server.ts action, validating email and password, returning form data to preserve inputs, and wiring error handling for login.

Set up a global user state in Svelte using a context-based class to share session, Supabase client, and user data across layout and header.

Enable Google social login with Supabase by configuring Google Cloud Console, creating OAuth credentials, and wiring the redirect and callback flow for sign in.

Set up a Supabase database with a users table in the public schema, enable row level security, and auto-insert usernames on registration and login.

Resolve logout synchronization by navigating to login after sign-out and updating session and user from supabase auth state changes, ensuring header reflects current user status in real time.

Explore building a private library with SvelteKit and Supabase by creating a books table, enabling row-level security, and fetching a user's books for a dashboard.

Fetch and display the username by extending the global data store to pull books and the usernames table from Supabase, using parallel promises and user context to render the name.

Design an auth layout using flex to keep a left sticky navigation and a scrollable right content area, with responsive padding, sticky side nav, and centered icon list.

Create a dashboard layout with a header and a left add-book box linking to private scan shelf, using an iconify plus, welcoming the user from context, and previewing book categories.

Style the dashboard header as a flexbox with space-between. Align the headline to the right with 30% max width and 300px min width, showing welcome back in fuchsia.

Create a reusable book card component in Svelte and render many book cards within a book category. Bind book props, display title, author, cover, and rating.

Style a book card with css by using a relative anchor, a column flex layout, an absolute book cover, a dark translucent info panel, and a top-right status badge.

Create a reusable star rating component in Svelte that displays five stars, supports read-only and updatable modes, uses aria labels for accessibility, and calls an update database rating function.

Style the rating container as an inline flex under the book card, with clickable stars, 32px font size, no outline, transparent color, a pointer cursor, and a css variable for color.

Learn to integrate a star rating into a book card using svelte, wiring initial value from book.rating, making it reactive, and updating Supabase on change while the card remains read-only.

Create a reusable book category component that takes category name and an array of books as props, renders a book card grid on a dashboard.

Style the book category as a horizontal scrollable flex container with evenly spaced book cards, bottom padding, and cross-browser scrollbar customization, delivering a reusable ten-book component.

Organize books on the dashboard into categories like favorite books, recently added unread, and highest rated from the favorite genre, using the user context for filtering and sorting.

Build an individual book page in SvelteKit with dynamic routing and a load function, fetching by book id from a layout context to display title, author, rating, genre, and cover.

Learn to style book component with flex layout, set container and cover widths, add borders and radii, center content, and prepare a clickable upload area with an add cover button.

Implement an edit mode on book page by adding edit and delete buttons, toggling edit mode, and binding inputs to state for title, author, description, and genre, enabling save changes.

Style the edit fields by padding inputs and text area, set 100% width, apply a bold 60px EB Garamond serif title, and cap cover at 450px with a flex row.

Update books in the database by toggling reading status with started and finished dates, syncing front-end state via a user context, and enabling in-page edits and ratings for real-time updates.

Create a Svelte drop zone to drag and drop a book cover, upload to the public book covers bucket in Supabase, and save the URL to the book.

Apply drop area styling in Svelte by using global styles and a utility class, override with important, and center content with flexbox, border radius 15px, and cursor pointer.

Create an asynchronous delete book from library using supabase to delete from the books table by id, handle a 204 response, update the books array, then return to dashboard.

Build a drop zone on the sveltekit scan shelf page to upload a single image (base64), send to a protected api endpoint for OpenAI processing, with loading and error handling.

Learn to integrate OpenAI in a SvelteKit app to extract a book array from an image using a vision-enabled GPT-4 mini, returning JSON of titles and authors.

Explore building a scan shelf page that handles file upload errors, displays a loading state, and presents recognized OpenAI books in a table with delete and add options.

Style the scan shelf page by configuring the book list table's width, borders, and typography. Apply global styles to the remove icon and upload area.

Explore step-by-step scan-shelf interactions: remove books from a reactive list and batch add recognized books to a database via a front-end user context, with supabase and openai-driven data.

Build a settings page that displays and edits username and email using user context and local state, while computing library stats like books in library, finished books, and average rating.

Style the settings page as a flex layout with side-by-side stats and user info, apply margins and inputs, include a translucent gray card with edit mode preview and account deletion.

Edit account details on the settings page by toggling edit mode and saving changes to a secure backend endpoint that updates the email and username in the auth schema.

Configure deployment by setting environment variables and npm rc, and enable legacy peer deps to run svelte five with svelte four libraries. Publish to cloud, set the front end URL in the authentication settings, configure supabase with google login and the redirect URL, and verify the cloud hosted app.