Examples

Explore real-world applications built with Irresistible to inspire your next project.

Starter Templates

SaaS Application

A complete SaaS starter with authentication, billing, and admin dashboard.

Features:

User authentication with JWT
Stripe subscription billing
Admin dashboard
Email notifications
API with rate limiting

Tech Stack:

SvelteKit + TypeScript
PostgreSQL + Prisma
Stripe + SendGrid
Tailwind CSS

# Create from template
irresistible create my-saas --template saas-starter

# Key files
src/
├── routes/
│   ├── (app)/          # Authenticated routes
│   ├── (marketing)/    # Public routes
│   └── api/            # API endpoints
├── lib/
│   ├── auth/           # Authentication logic
│   ├── billing/        # Stripe integration
│   └── email/          # Email templates

View Demo | GitHub

E-commerce Store

Modern e-commerce platform with cart, checkout, and inventory management.

Features:

Product catalog with search
Shopping cart persistence
Secure checkout flow
Order management
Inventory tracking

Code Example:

<!-- ProductCard.svelte -->
<script lang="ts">import { cart } from "$lib/stores/cart";
import { formatCurrency } from "$lib/utils";
export let product;
function addToCart() {
  cart.add(product);
}
</script>

<div class="product-card">
  <img src={product.image} alt={product.name} />
  <h3>{product.name}</h3>
  <p class="price">{formatCurrency(product.price)}</p>
  <button on:click={addToCart}>Add to Cart</button>
</div>

View Demo | GitHub

Real-time Chat App

WebSocket-powered chat application with rooms and direct messages.

Features:

Real-time messaging
Chat rooms
Direct messages
Online presence
Message history

Implementation:

// lib/chat/websocket.js
export function createChatConnection(roomId) {
  const ws = new WebSocket(`wss://api.irresistible.dev/chat/${roomId}`);
  
  ws.onmessage = (event) => {
    const message = JSON.parse(event.data);
    handleMessage(message);
  };
  
  return {
    send: (text) => {
      ws.send(JSON.stringify({ type: 'message', text }));
    },
    close: () => ws.close()
  };
}

View Demo | GitHub

Component Examples

Authentication Flow

Complete authentication system with protected routes.

<!-- routes/login/+page.svelte -->
<script lang="ts">import { goto } from "$app/navigation";
import { auth } from "$lib/stores/auth";
let email = "";
let password = "";
let error = "";
async function handleLogin() {
  try {
    await auth.login(email, password);
    goto("/dashboard");
  } catch (err) {
    error = err.message;
  }
}
</script>

<form on:submit|preventDefault={handleLogin}>
  {#if error}
    <div class="error">{error}</div>
  {/if}
  
  <input
    type="email"
    bind:value={email}
    placeholder="Email"
    required
  />
  
  <input
    type="password"
    bind:value={password}
    placeholder="Password"
    required
  />
  
  <button type="submit">Log In</button>
</form>

Data Table with Sorting

Reusable data table component with sorting and filtering.

<!-- components/DataTable.svelte -->
<script lang="ts">export let data = [];
export let columns = [];
let sortKey = "";
let sortOrder = "asc";
function sort(key) {
  if (sortKey === key) {
    sortOrder = sortOrder === "asc" ? "desc" : "asc";
  } else {
    sortKey = key;
    sortOrder = "asc";
  }
}
$: sortedData = [...data].sort((a, b) => {
  if (!sortKey) return 0;
  const aVal = a[sortKey];
  const bVal = b[sortKey];
  const order = sortOrder === "asc" ? 1 : -1;
  return aVal > bVal ? order : -order;
});
</script>

<table>
  <thead>
    <tr>
      {#each columns as column}
        <th on:click={() => sort(column.key)}>
          {column.label}
          {#if sortKey === column.key}
            <span>{sortOrder === 'asc' ? '↑' : '↓'}</span>
          {/if}
        </th>
      {/each}
    </tr>
  </thead>
  <tbody>
    {#each sortedData as row}
      <tr>
        {#each columns as column}
          <td>{row[column.key]}</td>
        {/each}
      </tr>
    {/each}
  </tbody>
</table>

File Upload with Progress

Drag-and-drop file upload with progress tracking.

<!-- components/FileUpload.svelte -->
<script lang="ts">let files = [];
let uploading = false;
let progress = 0;
async function handleDrop(e) {
  e.preventDefault();
  const droppedFiles = Array.from(e.dataTransfer?.files || []);
  await uploadFiles(droppedFiles);
}
async function uploadFiles(filesToUpload) {
  uploading = true;
  for (const file of filesToUpload) {
    const formData = new FormData();
    formData.append("file", file);
    const xhr = new XMLHttpRequest();
    xhr.upload.onprogress = (e) => {
      progress = e.loaded / e.total * 100;
    };
    xhr.onload = () => {
      files = [...files, file];
      progress = 0;
    };
    xhr.open("POST", "/api/upload");
    xhr.send(formData);
  }
  uploading = false;
}
</script>

<div
  class="upload-zone"
  on:drop={handleDrop}
  on:dragover|preventDefault
>
  <p>Drop files here or click to upload</p>
  
  {#if uploading}
    <div class="progress-bar">
      <div class="progress" style="width: {progress}%"></div>
    </div>
  {/if}
  
  <div class="file-list">
    {#each files as file}
      <div class="file">{file.name}</div>
    {/each}
  </div>
</div>

Full Application Examples

Project Management Tool

Trello-like project management application.

Features:

Drag-and-drop boards
Real-time collaboration
Task assignments
Due dates and reminders
Activity timeline

Key Implementation:

// Drag and drop functionality
import { dndzone } from 'svelte-dnd-action';

export let columns = [
  { id: 'todo', title: 'To Do', items: [] },
  { id: 'doing', title: 'In Progress', items: [] },
  { id: 'done', title: 'Done', items: [] }
];

function handleDndConsider(e, columnId) {
  const column = columns.find(c => c.id === columnId);
  column.items = e.detail.items;
}

function handleDndFinalize(e, columnId) {
  const column = columns.find(c => c.id === columnId);
  column.items = e.detail.items;
  // Save to database
  saveBoard(columns);
}

View Demo | Tutorial

Social Media Dashboard

Analytics dashboard for social media management.

Features:

Multi-platform integration
Real-time analytics
Scheduled posts
Engagement tracking
Custom reports

API Integration:

// lib/social/twitter.js
export async function getTwitterAnalytics(accountId) {
  const response = await fetch(`/api/twitter/analytics/${accountId}`, {
    headers: {
      'Authorization': `Bearer ${getToken()}`
    }
  });
  
  return response.json();
}

// components/TwitterChart.svelte
<script>
  import { onMount } from 'svelte';
  import Chart from 'chart.js/auto';
  
  export let accountId;
  
  onMount(async () => {
    const data = await getTwitterAnalytics(accountId);
    
    new Chart(canvas, {
      type: 'line',
      data: {
        labels: data.dates,
        datasets: [{
          label: 'Followers',
          data: data.followers,
          borderColor: '#1DA1F2'
        }]
      }
    });
  });
</script>

View Demo

AI Content Generator

AI-powered content creation platform.

Features:

Multiple AI personalities
Content templates
SEO optimization
Batch generation
Export options

AI Integration:

// lib/ai/generator.js
export async function generateContent(prompt, options = {}) {
  const response = await fetch('/api/ai/generate', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      prompt,
      personality: options.personality || 'professional',
      length: options.length || 'medium',
      format: options.format || 'paragraph'
    })
  });
  
  return response.json();
}

// Usage in component
const content = await generateContent(
  'Write a blog post about web development trends',
  {
    personality: 'creative',
    length: 'long',
    format: 'markdown'
  }
);

View Demo

Code Snippets

API Client with Retry Logic

class APIClient {
  constructor(baseURL, options = {}) {
    this.baseURL = baseURL;
    this.maxRetries = options.maxRetries || 3;
    this.timeout = options.timeout || 5000;
  }
  
  async request(endpoint, options = {}, retries = 0) {
    try {
      const response = await fetch(`${this.baseURL}${endpoint}`, {
        ...options,
        signal: AbortSignal.timeout(this.timeout)
      });
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      
      return response.json();
    } catch (error) {
      if (retries < this.maxRetries) {
        await new Promise(r => setTimeout(r, 1000 * Math.pow(2, retries)));
        return this.request(endpoint, options, retries + 1);
      }
      throw error;
    }
  }
}

State Management Store

// stores/app.js
import { writable, derived } from 'svelte/store';

function createAppStore() {
  const { subscribe, set, update } = writable({
    user: null,
    theme: 'dark',
    notifications: []
  });
  
  return {
    subscribe,
    login: (user) => update(state => ({ ...state, user })),
    logout: () => update(state => ({ ...state, user: null })),
    setTheme: (theme) => update(state => ({ ...state, theme })),
    addNotification: (notification) => update(state => ({
      ...state,
      notifications: [...state.notifications, notification]
    }))
  };
}

export const app = createAppStore();

// Derived stores
export const isAuthenticated = derived(app, $app => !!$app.user);
export const unreadCount = derived(app, $app => 
  $app.notifications.filter(n => !n.read).length
);

Custom Hooks (React)

// hooks/useDebounce.js
import { useState, useEffect } from 'react';

export function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    
    return () => clearTimeout(handler);
  }, [value, delay]);
  
  return debouncedValue;
}

// Usage
function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearch = useDebounce(searchTerm, 500);
  
  useEffect(() => {
    if (debouncedSearch) {
      performSearch(debouncedSearch);
    }
  }, [debouncedSearch]);
}

Learning Resources

Video Tutorials

Blog Posts

Community Examples

Browse community-created examples:

Contributing Examples

Share your own examples with the community:

Fork the examples repository
Add your example following the template
Include README with setup instructions
Submit a pull request

Guidelines:

Keep examples focused and clear
Include comments explaining key concepts
Provide live demo if possible
Test on multiple browsers

Next Steps

Try the Quick Start tutorial
Explore API documentation
Join our Discord community
Share your creations!

Documentation

Examples

Starter Templates

SaaS Application

E-commerce Store

Real-time Chat App

Component Examples

Authentication Flow

Data Table with Sorting

File Upload with Progress

Full Application Examples

Project Management Tool

Social Media Dashboard

AI Content Generator

Code Snippets

API Client with Retry Logic

State Management Store

Custom Hooks (React)

Learning Resources

Video Tutorials

Blog Posts

Community Examples

Contributing Examples

Next Steps