SvelteKit Framework by Example: Full-Stack Ecommerce Website

Create a new Stripe account, verify your email, and activate payments to enable live transactions, while using test mode for development.

learn to create Stripe products by navigating the dashboard, adding name, description, image, and metadata, then configure pricing and currencies and view the price id.

Add products to Stripe by filling in name, description, price, and image from the static folder, then review the product catalog and repeat the process for all products.

Set up a new SvelteKit project using the skeleton template, enable ESLint and Prettier, install dependencies, and run npm run dev to preview on localhost:5173.

Explore the SvelteKit project structure, including the root config files, static and src folders, and the mandatory app.html and root router. Identify where to place components and lib utilities.

Explore how wheat, a fast build tool and development server, speeds up production, supports hot module replacement, and improves compatibility and code splitting compared to Webpack.

Discover tailwind, a utility-first css framework that speeds up building responsive, customizable UI with predefined classes; configure colors, fonts, and dark or light themes in the config.

Install and configure tailwind in a SvelteKit project by adding dependencies and initializing the config. Enable postcss and create app.css and layout files to apply tailwind styles.

Learn to set up PostgreSQL locally or remotely, use Neon serverless Postgres for a free start, reveal the connection string securely, and store credentials in a dotenv file.

Explore Prisma, a next-gen ORM for node and TypeScript, with a schema language and visual UI. Use the Prisma client for JSON-style queries across MySQL, Postgres, and MongoDB.

Install Prisma as a development dependency in a SvelteKit project, then initialize the configurator and switch the database to PostgreSQL with a placeholder .env file.

Connect Prisma to a PostgreSQL database using a connection string, update the env file, populate dummy data, run db pull to introspect, generate the client, and migrate to apply changes.

Define a product model in Prisma to store items with id, stripe_id, name, description, price, image, and featured status; migrate, generate the client, and use Prisma Studio.

Explore how Prisma models relate through one-to-one, one-to-many, and many-to-many connections, using schema definitions, foreign keys, and implicit versus explicit relation tables.

Create a category model with a unique id, name, and unique slug, connect it to products via a one-to-many relationship, then run prisma migrate dev and generate the client.

Populate the category table in prisma studio for a sveltekit full-stack ecommerce site by adding shirts, mugs, and stickers with name and slug fields and auto-generated ids, then save.

Populate the products table by importing Stripe data into Postgres using Prisma Studio, then add product records with image links from the static folder.

Explore how to create and reuse components in SvelteKit to keep pages readable, organize them in lib, and pass dynamic text via export let.

Create a header component for an e-commerce site, with a left navigation containing logo and links to home, categories, and about, a right-side cart button, and Tailwind-based flex styling.

Create a cart button component in the header by building a div with a shopping cart image, white border, rounded corners, and hover color change, with future item count.

Create a footer component for the sveltekit ecommerce site using a footer element with flex layout and a top border, hosting left MIT license copyright and right signature.

Discover how SvelteKit's built-in routing powers static and dynamic pages via the source/routes folder. Define dynamic routes with square brackets and root files like plus page.svelte to map pages.

Explore how SvelteKit uses plus page files in its router, including plus page.server.js, to render pages server-side on load and client-side on navigation, with data fetching via a load function.

Create the SvelteKit e-commerce pages using dynamic routes for categories and products, enabling automatic page generation, and implement checkout with Stripe and success or cancel pages.

Explore how error files work in SvelteKit's built-in router, override the default error page with a plus error.svelte file, and customize error messages, markup, styling, and behavior.

Explore how SvelteKit API routes work using server.js endpoints, exporting get, post, and delete functions, organized under a route/api folder, returning JSON responses for testing.

Learn to read data from relational databases postgres or mysql with the prisma client, using find unique, find Manny, and options such as where, select, and include for related tables.

Create a get products API endpoint in SvelteKit using src/routes/api/products/server.js and prisma to fetch all products with findMany, return a 200 response with the payload, and handle errors with 500.

Explore sveltekit layout files (layout.svelte, layout.js, layout.server.js) to wrap the app with a header and footer, use slots to inject pages, and load data server side or client side.

Create a site-wide layout in SvelteKit using a +layout.svelte to wrap pages with a header and footer, styled with Tailwind for a full-height, flex-column composition.

Load products on the index page by using a plus pages file in SvelteKit, fetch the Getproducts API server-side, parse JSON, and expose them to the home page data.

Explore conditional rendering in svelte using logic blocks, including if, else if, and else, to display red or blue squares based on a color variable.

Demonstrates conditional rendering in svelte using data.products.length to show products when available and a 'no products found' message when the list is empty, improving user experience.

Learn to render lists efficiently in SvelteKit using the each logic block to loop through an array and render elements for each item, replacing hardcoded indexes.

Use SvelteKit's each logic block to loop through the products array and render organized information on the index page, prepping a future card component.

Create a shop card component that displays product data with a fallback image, links to the product details page at /products/{id}, and includes hover effects; render cards in a grid.

Create a categories menu by building a get API endpoint that fetches all categories with Prisma and returns them in a 200 response, then test with Postman.

Create a reusable category item component in sveltekit with props name, slug, and active; use a helper to manage classes and build a linked anchor for the categories menu.

Create a categories page that fetches products via a load function from /api/products and renders a three-column grid of shop cart components, with a centered message when no products exist.

Create a left categories menu in a SvelteKit plus layout, rendering dynamic categories from /api/categories. Highlight the active item by checking the current path against /categories.

Create a dynamic api endpoint at api/categories/[slug] to fetch a category with its products using Prisma include, handle errors, and test via Postman.

Discover how reactivity in Svelte updates the markup when a variable changes, ensuring the new value renders instantly; use the dollar sign label to make computed values reactive.

Create dynamic category pages in SvelteKit by fetching category-specific products using the slug from params, rendering a shop cart for each product in a three-column grid.

Create a dynamic get product by id api endpoint in SvelteKit using Prisma's findUnique to fetch the product by id and return it with status 200.

Build a product details page with markup and styling in a SvelteKit ecommerce app, featuring a three-column grid, image showcase, and a text panel with name, price, and description.

Load product details from backend with a get product by id api in a load function, then render product image, name, price with two decimals, and description on page.