Svelte Kit Bootcamp: Basic to Advance Build 2 Real Projects

Explore how sveltekit boosts performance with ssr, static site generation, and code splitting, plus client-side routing via file-system routes, built-in typescript support, and streamlined data fetching with the load function.

Compare the differences and similarities between svelte and sveltekit, outlining svelte as a single component language using dot svelte and sveltekit as a meta framework offering routing and API endpoints.

Set up the development environment by installing Node.js, creating a Sveltekit project with npm create svelte at latest, selecting the skeleton template with TypeScript, and running npm run dev.

Create your first SvelteKit component in lib/component, render a hello message, import and reuse it across routes, and style with script and style tags, showcasing a single file component.

Import an image from lib/assets, bind it to an image tag as logo, and include an alt tag; explore sveltekit shorthand binding to simplify attributes.

Discover SvelteKit reactivity by binding a count to the dom, handling on click to update state, and using reactive assignments, declarations, and statements to keep data in sync.

Learn how to manage array reactivity in SvelteKit by treating arrays as immutable and avoiding push or splice. Reassign a new array with the spread operator to trigger DOM updates.

Master how to define and pass props in Svelte kit by exporting props, using default values, and spreading data into props to enable flexible, scalable component communication.

Learn sveltekit file-based routing by creating routes with folders and page.svelte, defining slash and home routes, and customizing 404 pages, plus navigating via href and go to.

Explore how layouts and slots in SvelteKit enable global navigation and dynamic page rendering, reducing redundant code with a root layout and a shared navbar.

Master dynamic routes in SvelteKit by creating a slug folder and a page dot svelte for blog posts, enabling navigation to slash blog slash id via app navigation.

Explore nested routes and layouts in svelte kit by building department and course sections with dynamic slugs, slot rendering, and course-specific layouts.

Learn advanced SvelteKit routing by implementing dynamic and wildcard routes, using load to read params and URL search parameters, and pass data to pages for flexible, single page routing.

Explore state management in SvelteKit with writable, readable, and derived stores. Create a global count store, subscribe to it in components, and update it to sync across the app.

Explore derived stores in SvelteKit, building on writable and readable stores, by deriving time elapsed from a start time store and creating derived data like a triple count.

Explore data fetching in SvelteKit using the load function and fetch to load random user data on the server, then render name, email, and picture, showcasing preloading.

Master server-side fetch in SvelteKit with load, preloading, and prefetching, and explore offloading API calls to the server or running them on the browser.

Learn to create and test SvelteKit API routes, returning JSON via get and post, with dynamic slug routes, query parameters, and simple input validation.

Learn to use API routes in a SvelteKit app by fetch calls to internal endpoints, handling responses in page load or button clicks, and posting data with error handling.

Create a forms route in a SvelteKit project, build a basic form with name and email inputs, and implement two-way binding and a submit handler to capture data.

Learn to handle form submissions in SvelteKit using inbuilt API routes, post requests, and JSON responses; log form data and validate inputs for database interactions.

Implement client-side form validation in SvelteKit by defining an errors object and a validate function that checks name and email with regex, showing errors and blocking submission when invalid.

Learn to streamline form validation with the Yap third-party library by building a form schema, validating name and email, handling errors, and displaying live feedback.

Discover server side rendering in SvelteKit, boosting performance and SEO with pre-rendered HTML from the server. Implement route data using a load function for SSR.

Build a movie web app with SvelteKit, mastering file system routing and client-server data fetching. Leverage hooks for global state and implement interactive carousels, pagination, and trailers.

Initialize a SvelteKit movie app in the current directory, choose the skeleton with TypeScript, linting, and prettier, install dependencies, initialize git, and start the dev server.

Install Tailwind CSS in a SvelteKit app by adding Postcss and Autoprefixer as a dev dependency, generating config files, and testing with npm run dev.

Define the app layout with layout dot svelte, add a persistent navbar and footer, and render the dynamic page content through a slot.

Build a reusable Svelte footer component for the layout, featuring a fixed full-width bar with centered copyright and a hash-based navigation for home, about, contact, and privacy policy.

Build home page carousal for latest, upcoming, and top-rated movies using Svelte carousal in a TypeScript page, and fetch data via the TMDB API key while exploring discovery endpoints.

Learn to fetch upcoming movies from an api on the server side using a plus page server.ts load function, with locale-based api keys, and feed data into a carousel.

Fetches upcoming movies data from the api and populates a carousel by looping the data, rendering titles and poster images with gradient overlays.

Design a bottom carousel with a dynamically placed footer using the Svelte carousel component, slice upcoming movies, enable autoplay, set particles to show, add gradient overlays and responsive behavior.

Finish responsive carousel design by adjusting visible items with screen width breakpoints, initializing on mount, and customizing previous and next controls using slots, binding, and autoplay in SvelteKit.

Design a reusable svelte kit movie card component that displays poster path, title, rating, language, and release date, with placeholder and error handling, ready for grid layout and API data.

Style top rated movie cards, build a responsive grid with classes, fetch top rated movies from tmdb on the server, and outline routes for movie details and TV shows.

Learn to build a SvelteKit movie details page by turning cards into links, creating a dynamic /details/:movieId route, and fetching movie details, trailers, and similar movies via server load.

Use a script tag to export data for a Svelte Kit details page, returning similar movies, movie details, and movie trailers, then build a responsive detail view with backdrop.

Show the trailers and similar movies at the bottom, building a responsive, scrollable trailer gallery with YouTube iframes, looping through movie trailers and showing no trailers available when empty.

Learn to add bottom similar movies section on details page, render a grid of similar movie cards, use placeholders for missing images, and prepare pagination for the next part.

Implement a functional pagination component in Svelte, including reactive data refresh when selecting movie IDs, and style with Tailwind classes to support prev/next, active page, and disabled states.

Load top rated movies through a pagination component, routing the API call to a home API and using a writable store to update the page and fetch new data.

Center pagination controls for responsive views, handle media query change, create a visible pages store, subscribe to updates, and use a 640px media query to adjust number of visible pages.

Implement pagination for the details view by adding a similar movies section using a details page api, wiring a pagination component, and managing page state.

Build a navigation-driven explore page in a SvelteKit app, wiring routes for explore and tv shows, and craft a movie explorer with upcoming, now playing, top rated, and popular cards.

Implement tab switching and API calls to load upcoming, now playing, top rated, and popular movies, render them in a responsive grid, and enable pagination in a SvelteKit explore page.

Hook up now playing, top rated, and popular movie APIs from tmdb on the explore page with pagination and per-category data stores.

Build skeleton loader cards in a Svelte kit project using a 20-item loader loop, a placeholder image, and store-driven loading states for upcoming, now playing, top rated, and popular movies.

design a tv shows page in svelte kit mirroring home layout without carousels, fetch data from tmdb api, and implement pagination with loading and mapping name and first air date.

Explore building a TV show details page in Svelte Kit, including data fetching by ID, trailers, similar shows, and dynamic routing, with navigation tweaks and data field corrections.

Finish building a responsive navbar with a functional search bar in a Svelte kit app, including debounced API calls to TMDB for movies and TV shows and a results dropdown.

Call the search API, handle empty results or errors by returning empty arrays, and render movies and TV shows with posters from image.tmdb.org/t/p/original, displaying titles, overviews, and vote metrics.

Implement a handle route function to navigate movies and TV shows to details pages using the clicked item’s id, manage search queries, and control the dropdown and image placeholders.

Build a responsive navbar with a mobile hamburger toggle, include home, explorer, and TV shows links, and navigate between routes while automatically closing the menu on navigation.

Implement a global footer across all screens and build a CSS skeleton loader in Svelte to show initial loading placeholders, controlled via a shared loading store.

Implement a custom css scroll bar in app.css, styling the webkit scroll bar, track, and thumb with eight-pixel width, black track, golden thumb, and hover darken to #555.

Deploy your app to Vercel via the Vercel CLI, name the project Movie app, and verify the live deployment, including the search API for movies and TV shows.