Project structure in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Svelte handle component files in a project?

In a typical Svelte project, what is the role of .svelte files?

A They are style files used only for global CSS rules.

B They are configuration files that define project settings and dependencies.

C They are plain JavaScript files that only export functions without UI elements.

D They contain HTML, CSS, and JavaScript combined to define a reusable UI component.

💡 Hint

Think about how Svelte components combine structure, style, and behavior.

Svelte uses .svelte files to bundle HTML markup, CSS styles scoped to the component, and JavaScript logic together. This makes each file a self-contained UI piece.

📝 Syntax

intermediate

Where should you place global styles in a Svelte project?

In a Svelte project, which file is the best place to put styles that apply to the entire app?

A In the <code>src/app.css</code> or a similar global CSS file imported in the root layout.

B Inside each <code>.svelte</code> component's <code>&lt;style&gt;</code> tag with <code>scoped</code> attribute.

C Directly inside the <code>package.json</code> file under a styles section.

D In a JavaScript file that exports CSS strings.

💡 Hint

Global styles affect the whole app and are usually imported once at the top level.

Global CSS is typically placed in a dedicated CSS file like app.css inside src and imported in the root layout or main entry file to apply styles app-wide.

🔧 Debug

advanced

Why does importing a component from the wrong folder cause an error?

Given this import statement in a Svelte file:

import Button from '../components/Button.svelte';

What is the most likely cause if this import fails with a module not found error?

A The relative path is incorrect because the file is not located in the specified folder.

B Svelte does not support importing components with relative paths.

C The <code>.svelte</code> extension must be omitted in imports.

D The component file must be named <code>index.svelte</code> to be imported.

💡 Hint

Check the folder structure and relative path carefully.

Import errors usually happen when the path does not match the actual location of the file. Svelte supports relative imports with extensions, so the path must be correct.

🧠 Conceptual

advanced

What is the purpose of the src folder in a Svelte project?

Why do most Svelte projects have a src folder, and what should it contain?

A It stores configuration files for the build tools and package managers.

B It holds all source code files like components, styles, and scripts that make up the app.

C It is used to keep static assets like images and fonts only.

D It contains compiled JavaScript files generated after building the project.

💡 Hint

Think about where you write your app's code before building.

The src folder is the main place to write and organize your app's source code including components, styles, and scripts before the build process.

❓ state_output

expert

What will be the rendered output and state behavior of this Svelte component structure?

Consider a Svelte project with this structure:

src/
  components/
    Counter.svelte
  routes/
    +page.svelte

The Counter.svelte component has a button that increments a count state. The +page.svelte imports and uses Counter. What happens when the button is clicked?

Svelte

<!-- Counter.svelte -->
<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>
<button on:click={increment}>Clicked {count} times</button>

<!-- +page.svelte -->
<script>
  import Counter from '../components/Counter.svelte';
</script>
<main>
  <h1>Welcome</h1>
  <Counter />
</main>

A The button does not update the count because state cannot be changed inside components.

B Clicking the button reloads the page instead of updating the count.

C The button shows 'Clicked 0 times' initially and increments the count each click, updating the button text.

D The component throws an error because the import path is invalid.

💡 Hint

Remember how Svelte components manage their own state and update the UI reactively.

The Counter component has a local count variable that increments on button clicks. Svelte updates the button text automatically to show the new count.

Practice

1. In a Svelte project, where should you place reusable components that can be used across multiple pages?

easy

A. static/components

B. src/routes

C. src/lib

D. public/assets

Solution

1. Step 1: Understand folder purpose

   src/lib is designed for reusable components and utilities.

2. Step 2: Compare with other folders

   src/routes holds pages, public/assets is for static files, and static/components is not a standard folder.

3. Final Answer:

   src/lib -> Option C

4. Quick Check:

   Reusable components = src/lib [OK]

Hint: Reusable parts go in src/lib folder [OK]

Common Mistakes:

• Putting reusable components in src/routes
• Using public folder for components
• Creating non-standard folders like static/components

2. Which of the following is the correct folder to place page files in a SvelteKit project?

easy

A. src/pages

B. src/lib

C. public/pages

D. src/routes

Solution

1. Step 1: Identify the folder for pages

   In SvelteKit, src/routes is the folder where page components live.

2. Step 2: Check other options

   src/lib is for reusable components, public/pages and src/pages are not standard folders for pages.

3. Final Answer:

   src/routes -> Option D

4. Quick Check:

   Pages go in src/routes [OK]

Hint: Pages always go in src/routes in SvelteKit [OK]

Common Mistakes:

• Confusing src/lib with src/routes
• Placing pages in public folder
• Using non-standard src/pages folder

3. Given the following SvelteKit project structure:

project/
├─ public/
│  └─ logo.png
├─ src/
│  ├─ lib/
│  │  └─ Button.svelte
│  └─ routes/
│     └─ index.svelte

Where should you import the Button.svelte component to use it on the homepage?

medium

A. From ./Button.svelte inside src/routes/index.svelte

B. From ../lib/Button.svelte inside src/routes/index.svelte

C. From ../../public/logo.png inside src/routes/index.svelte

D. From public/Button.svelte inside src/routes/index.svelte

Solution

1. Step 1: Understand folder hierarchy

   src/routes/index.svelte is one level deeper than src/lib/Button.svelte, so import path is ../lib/Button.svelte.

2. Step 2: Eliminate wrong paths

   ../../public/logo.png is for static assets, not components; ./Button.svelte assumes Button is in routes folder; public/Button.svelte is incorrect location.

3. Final Answer:

   From ../lib/Button.svelte inside src/routes/index.svelte -> Option B

4. Quick Check:

   Import reusable components with relative path ../lib [OK]

Hint: Use relative path ../lib to import components from routes [OK]

Common Mistakes:

• Trying to import components from public folder
• Using wrong relative path like ./Button.svelte
• Confusing static assets with components

4. You placed an image file inside src/lib/images and tried to use it in your SvelteKit page, but it doesn't load in the browser. What is the most likely reason?

medium

A. Static assets must be inside the public folder to be served correctly.

B. Images must be imported from src/routes folder only.

C. You need to rename the image file to have a .svelte extension.

D. The image file size is too large to load.

Solution

1. Step 1: Understand static asset serving

   SvelteKit serves static files only from the public folder, so files in src/lib/images are not accessible directly.

2. Step 2: Check other options

   Images don't belong in src/routes, renaming to .svelte is incorrect, and file size doesn't prevent loading if path is correct.

3. Final Answer:

   Static assets must be inside the public folder to be served correctly. -> Option A

4. Quick Check:

   Static files go in public folder [OK]

Hint: Put images in public folder to load in browser [OK]

Common Mistakes:

• Placing images inside src/lib or src/routes
• Renaming images as .svelte files
• Assuming large file size causes loading failure

5. You want to organize your SvelteKit project so that:
1. All page routes are inside src/routes.
2. Reusable UI components are inside src/lib/components.
3. Static assets like images and fonts are inside public/assets.

Which folder structure below correctly reflects this setup?

hard

A. project/
├─ public/
│ └─ assets/
│ ├─ images/
│ └─ fonts/
├─ src/
│ ├─ lib/
│ │ └─ components/
│ │ └─ Button.svelte
│ └─ routes/
│ └─ index.svelte

B. project/
├─ src/
│ ├─ assets/
│ │ ├─ images/
│ │ └─ fonts/
│ ├─ components/
│ │ └─ Button.svelte
│ └─ pages/
│ └─ index.svelte

C. project/
├─ public/
│ └─ components/
│ └─ Button.svelte
├─ src/
│ ├─ lib/
│ └─ routes/
│ └─ index.svelte

D. project/
├─ public/
│ └─ assets/
│ └─ Button.svelte
├─ src/
│ ├─ lib/
│ └─ routes/
│ └─ index.svelte

Solution

1. Step 1: Verify static assets location

   Static assets like images and fonts must be inside public/assets to be served correctly.

2. Step 2: Check reusable components and routes

   Reusable components go inside src/lib/components, and pages go inside src/routes.

3. Step 3: Match folder structure

   project/
   ├─ public/
   │  └─ assets/
   │     ├─ images/
   │     └─ fonts/
   ├─ src/
   │  ├─ lib/
   │  │  └─ components/
   │  │     └─ Button.svelte
   │  └─ routes/
   │     └─ index.svelte

   matches all requirements exactly; other options place assets or components incorrectly.

4. Final Answer:

   Option A folder structure -> Option A

5. Quick Check:

   Correct folder setup =

   project/
   ├─ public/
   │  └─ assets/
   │     ├─ images/
   │     └─ fonts/
   ├─ src/
   │  ├─ lib/
   │  │  └─ components/
   │  │     └─ Button.svelte
   │  └─ routes/
   │     └─ index.svelte

   [OK]

Hint: Static assets in public, components in src/lib, pages in src/routes [OK]

Common Mistakes:

• Putting static assets inside src folder
• Placing components in public folder
• Using non-standard folders like pages instead of routes