SvelteKit overview - Mini Project: Build & Apply

SvelteKit Overview Project

📖 Scenario: You are building a simple SvelteKit app that shows a list of fruits and highlights the ones you like.

🎯 Goal: Create a SvelteKit component that displays a list of fruits from a data array, uses a configuration variable to mark favorite fruits, and renders the list with favorite fruits styled differently.

📋 What You'll Learn

Create a fruits array with exact fruit names

Add a favoriteFruits array to hold favorite fruit names

Use a {#each} block to loop over fruits

Highlight favorite fruits with a CSS class

Use semantic HTML and accessible markup

💡 Why This Matters

🌍 Real World

SvelteKit is used to build fast, modern web apps with reactive UI and server-side rendering. Managing data and UI state like this is common in real projects.

💼 Career

Understanding SvelteKit basics helps you work on frontend roles that use this popular framework for building interactive websites and apps.

1

DATA SETUP: Create the fruits array

Create a fruits array with these exact strings: "Apple", "Banana", "Cherry", "Date", and "Elderberry".

Svelte

// Create the fruits array with the exact fruit names
// Your code here

Hint

Use export let fruits = [...] to define the array in SvelteKit.

2

CONFIGURATION: Define favorite fruits

Add a new exported array called favoriteFruits with these exact strings: "Apple" and "Date".

Svelte

export let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
// Add favoriteFruits array here
// Your code here

Hint

Use export let favoriteFruits = [...] to define the favorites.

3

CORE LOGIC: Loop over fruits and highlight favorites

Use a {#each fruits as fruit} block to display each fruit inside a <li>. Add a class favorite to the <li> if fruit is included in favoriteFruits using class:favorite={favoriteFruits.includes(fruit)}.

Svelte

export let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
export let favoriteFruits = ["Apple", "Date"]


  
  // Your code here

Hint

Use Svelte's {#each} block and conditional class binding.

4

COMPLETION: Add CSS to style favorite fruits

Add a <style> block with CSS that sets color: red; for the .favorite class to highlight favorite fruits in red.

Svelte

export let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
export let favoriteFruits = ["Apple", "Date"]


  {#each fruits as fruit}
    {fruit}
  {/each}



  /* Add CSS for .favorite class here */
  // Your code here

Hint

Use CSS inside the <style> block to style the favorite fruits.

Practice

1. What is the main purpose of SvelteKit in web development?

easy

A. To manage databases and server hardware

B. To create mobile apps using native code

C. To design static images and graphics

D. To build fast, modern web apps with minimal setup

Solution

1. Step 1: Understand SvelteKit's role

   SvelteKit is a framework designed to help developers build web applications quickly and efficiently.

2. Step 2: Identify the main feature

   It focuses on fast performance and less setup compared to traditional methods.

3. Final Answer:

   To build fast, modern web apps with minimal setup -> Option D

4. Quick Check:

   SvelteKit = fast web apps with less setup [OK]

Hint: Remember SvelteKit is for fast web apps, not mobile or graphics [OK]

Common Mistakes:

• Confusing SvelteKit with mobile app frameworks
• Thinking it manages databases directly
• Assuming it is for graphic design

2. Which file naming pattern does SvelteKit use to create routes automatically?

easy

A. Files inside the src/routes folder

B. Files inside the src/components folder

C. Files inside the public/assets folder

D. Files inside the src/styles folder

Solution

1. Step 1: Recall SvelteKit routing system

   SvelteKit uses file-based routing, where files in a specific folder define pages.

2. Step 2: Identify the correct folder

   The src/routes folder contains files that become routes automatically.

3. Final Answer:

   Files inside the src/routes folder -> Option A

4. Quick Check:

   Routes = files in src/routes [OK]

Hint: Routes come from src/routes folder files [OK]

Common Mistakes:

• Choosing components folder for routes
• Confusing public assets with routes
• Thinking styles folder controls routing

3. Given this SvelteKit page code, what will be rendered?

 <script>
  export let data;
</script>

<h1>User: {data.name}</h1>
<p>Age: {data.age}</p>

<!-- Assume load function returns { name: 'Alice', age: 30 } -->

medium

A. Error: data is undefined

B. User: AliceAge: 30

C. User: Age:

D. User: {data.name}Age: {data.age}

Solution

1. Step 1: Understand data passing in SvelteKit

   The load function provides data as props to the page component.

2. Step 2: Substitute data values in template

   Given { name: 'Alice', age: 30 }, the template renders those values inside the tags.

3. Final Answer:

   <h1>User: Alice</h1><p>Age: 30</p> -> Option B

4. Quick Check:

   Data props render actual values [OK]

Hint: Load data appears as props, so values show in template [OK]

Common Mistakes:

• Thinking template shows raw {data.name} text
• Assuming data is undefined without load
• Confusing syntax with missing data

4. What is wrong with this SvelteKit load function?

export async function load() {
  const res = await fetch('/api/data');
  const data = await res.json();
  return data;
}

medium

A. The function must not be async

B. It should return an object with data as a property, not just data

C. The load function is missing the `{ fetch }` argument

D. It should return a Promise, not data directly

Solution

1. Step 1: Recall load function signature

   SvelteKit load functions receive an argument object containing `fetch`, `params`, `parent`, etc.

2. Step 2: Identify the mistake in the function definition

   The function `load()` takes no arguments, so `fetch` inside is undefined, causing a runtime error.

3. Final Answer:

   The load function is missing the `{ fetch }` argument -> Option C

4. Quick Check:

   load({ fetch }) required [OK]

Hint: Always destructure { fetch } in load function args [OK]

Common Mistakes:

• Thinking load functions cannot be async
• Believing load must return { data: data }
• Thinking async functions need explicit Promise return

5. How can you create a dynamic route in SvelteKit to show user profiles by ID?

hard

A. Create a file named [id].svelte inside src/routes/users/

B. Create a file named id.svelte inside src/routes/users/

C. Create a folder named id inside src/routes/users/ with index.svelte

D. Create a file named users.svelte with a parameter inside

Solution

1. Step 1: Understand dynamic routing syntax

   SvelteKit uses square brackets in filenames to define dynamic route parameters.

2. Step 2: Apply to user ID route

   To capture user IDs dynamically, create [id].svelte inside the users folder.

3. Final Answer:

   Create a file named [id].svelte inside src/routes/users/ -> Option A

4. Quick Check:

   Dynamic routes use [param].svelte [OK]

Hint: Use square brackets in filename for dynamic routes [OK]

Common Mistakes:

• Omitting brackets for dynamic params
• Using folder names instead of file names
• Placing params in wrong folder