Project 4: Steam Game Searcher

W3 Server-Side Development & Authentication - Lesson 13

🎯 Project Overview

Build a Steam game search application using SvelteKit and external API integration. This project introduces you to full-stack routing, API calls with fetch(), and managing asynchronous data in a modern web framework.

📚 Learning Objectives

By completing this project, you will:

• Master SvelteKit routing and page structure
• Integrate external APIs (Steam API) using fetch()
• Handle asynchronous data with async/await
• Implement search functionality and result filtering
• Create reusable Svelte components
• Manage loading states and error handling
• Work with JSON data from APIs

🔗 GitHub Source

This template is from:

🏗️ What's Provided (15% Scaffolding)

✅ SvelteKit project structure ✅ Basic routing configuration ✅ Empty components in src/lib/ ✅ Minimal route files in src/routes/ ✅ Development environment setup

🔨 What You Will Build (85% Implementation)

Core Features (Must Implement):

1. Search Interface

   • Input field for game search queries
   • Search button with loading state
   • Real-time search (optional)
   • Search history (optional)

2. Game Results Display

   • List of matching games
   • Game cards with key information:
     • Game title
     • Thumbnail image
     • Price
     • Platform icons
   • Pagination or infinite scroll

3. Game Details Page

   • Dedicated route for each game
   • Full game description
   • Screenshots/videos
   • System requirements
   • Purchase link

4. API Integration

   • Fetch data from Steam API
   • Handle API responses
   • Parse JSON data
   • Error handling for failed requests
   • Loading indicators

Optional Enhancements:

• Filter by price range, genre, platform
• Sort results (price, release date, popularity)
• Wishlist/favorites feature (local storage)
• Compare multiple games
• Dark mode toggle

🚀 Getting Started

Prerequisites

• Node.js v18+ installed
• VS Code with Svelte extension
• Completed Lessons 1-12 (Svelte + SvelteKit fundamentals)
• Basic understanding of APIs and JSON

Installation

1. Navigate to this template folder:

   bash

   cd "Paid Courses/W3 Server-Side Development & Authentication/Templates/project-04-game-searcher"
   

2. Install dependencies:

   bash

   npm install
   

3. Start development server:

   bash

   npm run dev
   

4. Open in browser: Visit http://localhost:5173

📂 Project Structure

project-04-game-searcher/
├── src/
│   ├── lib/
│   │   ├── GameCard.svelte     # TODO: Create game card component
│   │   └── SearchBar.svelte    # TODO: Create search component
│   ├── routes/
│   │   ├── +page.svelte        # Home/search page (TODO: implement)
│   │   └── game/
│   │       └── [id]/
│   │           └── +page.svelte # Game details page (TODO: implement)
│   └── app.html                # HTML shell
├── package.json
└── svelte.config.js

🔍 Discovery Challenges

Before implementing, research and answer:

1. SvelteKit Routing: How does file-based routing work in SvelteKit?

   • How do you create dynamic routes?
   • What are route parameters ([id])?
   • How do you access route params in your code?

2. API Integration: How do you fetch data from external APIs?

   • What is the fetch() API?
   • How do you handle async operations with async/await?
   • How do you parse JSON responses?

3. Steam API: What endpoints are available?

   • How do you search for games?
   • What data does the API return?
   • Are there rate limits or API keys needed?

4. Error Handling: How do you handle API failures?

   • Try-catch blocks for async code?
   • User feedback for errors?
   • Retry logic?

💡 Implementation Guide

Step One: Create Search Component

<!-- src/lib/SearchBar.svelte -->
<script>
  // TODO: Import necessary functions
  import { goto } from '$app/navigation';

  // TODO: Create reactive variables
  let searchQuery = '';
  let loading = false;

  // TODO: Implement search function
  async function handleSearch() {
    if (!searchQuery.trim()) return;

    loading = true;
    try {
      // TODO: Call Steam API
      const response = await fetch(`API_URL?search=${searchQuery}`);
      const data = await response.json();

      // TODO: Handle response
      // Update UI with results
    } catch (error) {
      console.error('Search failed:', error);
      // TODO: Show error message
    } finally {
      loading = false;
    }
  }
</script>

<!-- TODO: Create search UI -->
<form on:submit|preventDefault={handleSearch}>
  <input bind:value={searchQuery} placeholder="Search games..." />
  <button type="submit" disabled={loading}>
    {loading ? 'Searching...' : 'Search'}
  </button>
</form>

Step 2: Display Search Results

<!-- src/routes/+page.svelte -->
<script>
  import GameCard from '$lib/GameCard.svelte';
  import SearchBar from '$lib/SearchBar.svelte';

  // TODO: Store search results
  let games = [];

  // TODO: Pass results to GameCard components
</script>

<SearchBar on:search={(e) => games = e.detail} />

<!-- TODO: Display results -->
{#if games.length > 0}
  <div class="game-grid">
    {#each games as game}
      <GameCard {game} />
    {/each}
  </div>
{:else}
  <p>No games found. Try searching!</p>
{/if}

Step 3: Create Game Details Route

<!-- src/routes/game/[id]/+page.svelte -->
<script>
  import { page } from '$app/stores';

  // TODO: Access route parameter
  $: gameId = $page.params.id;

  // TODO: Fetch game details
  async function loadGameDetails() {
    const response = await fetch(`API_URL/${gameId}`);
    return await response.json();
  }

  // TODO: Load data when component mounts
</script>

<!-- TODO: Display game details -->

🌐 Steam API Resources

Free Alternatives (No API Key Required):

• RAWG API: https://rawg.io/apidocs (recommended)
• CheapShark API: https://www.cheapshark.com/api
• IGDB API: https://api-docs.igdb.com (requires registration)

Example API Call:

// RAWG API example
const searchGames = async (query) => {
  const response = await fetch(
    `https://api.rawg.io/api/games?search=${query}&key=YOUR_API_KEY`
  );
  const data = await response.json();
  return data.results;
};

✅ Success Criteria

Your project is complete when:

• User can search for games by name
• Search results display in a grid/list format
• Each game shows title, image, and key details
• Clicking a game navigates to details page
• Details page shows comprehensive game information
• Loading states display during API calls
• Errors are handled gracefully
• Code uses proper async/await patterns
• SvelteKit routing works correctly

🧪 Testing Your Implementation

Test these scenarios:

1. Search for a popular game (e.g., "Portal")
2. Search for a non-existent game
3. Click on search result to view details
4. Navigate back to search page
5. Test loading states (throttle network in DevTools)
6. Test error handling (go offline)
7. Try multiple searches in a row

📖 Resources

• SvelteKit Routing: https://kit.svelte.dev/docs/routing
• Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
• Async/Await: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
• RAWG API Docs: https://rawg.io/apidocs

🎨 Grading Rubric

🐛 Common Issues & Solutions

Issue: CORS errors when calling API Solution: Use a CORS-enabled API (like RAWG) or set up a proxy

Issue: Route parameters not accessible Solution: Use $page.params from $app/stores

Issue: Images not loading Solution: Check image URLs from API response, some may be missing

Issue: Async data not rendering Solution: Ensure you're using reactive statements ($:) or proper state updates

📦 Build for Production

When ready to deploy:

npm run build
npm run preview  # Preview production build

🔗 Related Course Materials

• Concept 08: SvelteKit
• Concept 09: Application Programming Interface
• Activity 08: SvelteKit Exercises
• Activity 09: API Integration Exercises
• Lesson: 13
• Project Specification: ../../Project/Project 04- Steam Game Searcher.mdx

Remember: APIs are the backbone of modern web apps. Focus on proper async patterns and error handling-these skills transfer to every web project!