Svelte Examples

Learn Svelte by Building Real Mini-Projects

Beginner

Todo List App

Build a complete todo app with local storage, filters, and CRUD operations

Covers: stores, events, reactivity, localStorage
Beginner

Weather Widget

Create a weather widget using API calls and dynamic updates

Covers: fetch API, async/await, props, lifecycle
Beginner

Interactive Form

Build a form with real-time validation and error handling

Covers: two-way binding, form events, reactive statements
Intermediate

Image Gallery

Create a responsive image gallery with lightbox and transitions

Covers: transitions, animations, modal, responsive design
Intermediate

Shopping Cart

Build a functional shopping cart with state management

Covers: stores, derived stores, actions, localStorage
Intermediate

Markdown Editor

Create a live markdown editor with preview panel

Covers: bind:value, markdown parsing, split layout
Intermediate

Quiz Application

Build an interactive quiz with scoring and timer

Covers: state management, timers, transitions
Beginner

Counter App

Build a simple counter with increment, decrement, and reset functionality

Covers: reactive variables, event handling, basic state
Beginner

Color Picker

Create a simple color picker with RGB sliders and hex output

Covers: binding, computed values, reactive statements
Beginner

Tip Calculator

Build a tip calculator with bill amount, tip percentage, and split options

Covers: form inputs, calculations, reactive updates
Beginner

Password Generator

Create a password generator with customizable options and copy functionality

Covers: events, clipboard API, string manipulation
Beginner

Note Taking App

Build a simple note-taking app with local storage and categories

Covers: stores, localStorage, filtering, CRUD operations
Beginner

Countdown Timer

Create a customizable countdown timer with pause and reset functionality

Covers: setInterval, lifecycle, time calculations
Beginner

BMI Calculator

Build a BMI calculator with metric and imperial unit conversion

Covers: form inputs, unit conversion, reactive calculations
Intermediate

Recipe Finder

Create a recipe search app using a food API with filtering options

Covers: API integration, search, filtering, async/await
Intermediate

Expense Tracker

Build an expense tracking app with categories and statistics

Covers: stores, localStorage, charts, calculations
Intermediate

Memory Game

Create a card matching memory game with animations and scoring

Covers: transitions, game logic, state management
Intermediate

Pomodoro Timer

Build a Pomodoro timer with work/break cycles and notifications

Covers: timers, state machines, notifications API
Intermediate

Movie Search

Create a movie search app using TMDB API with detailed movie info

Covers: API integration, routing, lazy loading
Intermediate

Drawing App

Build a simple drawing app with different colors and brush sizes

Covers: canvas API, event handling, state management
Intermediate

Music Player

Create a music player with playlist management and audio controls

Covers: Audio API, stores, custom actions
Intermediate

Vocabulary Flashcards

Build a flashcard app for learning vocabulary with spaced repetition

Covers: animations, localStorage, learning algorithm