FiltersFast SvelteKit Mockup

This is a simplified SvelteKit version of the FiltersFast Next.js application, created for comparison purposes. It demonstrates how the same e-commerce features would be implemented using SvelteKit instead of Next.js.

🎯 Purpose

This mockup allows you to:

• Compare code structure and patterns between Next.js (React) and SvelteKit (Svelte)
• See how state management differs (React Context vs Svelte Stores)
• Evaluate bundle size differences
• Test user experience and performance

✨ Features Included

This mockup includes the core e-commerce features:

1. Homepage - Hero section, featured categories, trust indicators
2. Shopping Cart - Add/remove items, quantity management, localStorage persistence
3. Product Listing - Product grid with add to cart functionality
4. Checkout Flow - Simplified checkout form
5. Header/Footer - Navigation and site structure

🚀 Quick Start

cd filtersfast-sveltekit
npm install
npm run dev

Visit http://localhost:5173 to see the mockup.

📊 Key Differences: Next.js vs SvelteKit

State Management

Next.js (React):

// React Context with useReducer
const CartContext = createContext();
const { state, dispatch } = useCart();
dispatch({ type: 'ADD_ITEM', payload: item });

SvelteKit:

// Svelte Stores (reactive)
import { cart } from '$lib/stores/cart';
cart.addItem(item);
// Automatically reactive - no hooks needed

Component Syntax

Next.js (React):

export default function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  return (
    <header>
      <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
        Toggle
      </button>
    </header>
  );
}

SvelteKit:

<script>
  let mobileMenuOpen = $state(false);
</script>

<header>
  <button onclick={() => mobileMenuOpen = !mobileMenuOpen}>
    Toggle
  </button>
</header>

Reactivity

Next.js: Requires hooks (useState, useEffect) and manual dependency management

SvelteKit: Automatic reactivity - variables are reactive by default with $state or stores

Bundle Size

• Next.js: ~150KB+ (React runtime + virtual DOM)
• SvelteKit: ~50-80KB (compiled to vanilla JS, no runtime)

📁 Project Structure

filtersfast-sveltekit/
├── src/
│   ├── lib/
│   │   ├── components/      # Reusable components
│   │   │   ├── Header.svelte
│   │   │   └── Footer.svelte
│   │   └── stores/          # Svelte stores (state management)
│   │       └── cart.ts
│   ├── routes/              # File-based routing
│   │   ├── +layout.svelte  # Root layout
│   │   ├── +page.svelte    # Homepage
│   │   ├── cart/
│   │   │   └── +page.svelte
│   │   ├── products/
│   │   │   └── +page.svelte
│   │   └── checkout/
│   │       └── +page.svelte
│   └── app.css             # Global styles
├── package.json
└── tailwind.config.js

🔍 What's NOT Included

This is a simplified mockup, so it doesn't include:

• Authentication system
• Payment processing (Stripe/PayPal)
• API routes (would be in src/routes/api/)
• Database integration
• Admin dashboard
• Advanced features (MFA, subscriptions, etc.)

These would all be possible in SvelteKit, but are omitted for simplicity.

💡 Key Takeaways

1. Less Boilerplate: SvelteKit requires less code for similar functionality
2. Automatic Reactivity: No need for hooks or manual dependency tracking
3. Smaller Bundles: Compiled to vanilla JS = smaller file sizes
4. Similar Structure: File-based routing works similarly to Next.js App Router
5. Learning Curve: Different mental model (compiler vs runtime)

🧪 Testing the Comparison

1. Run both projects:

   • Next.js: cd filtersfast-next && npm run dev
   • SvelteKit: cd filtersfast-sveltekit && npm run dev

2. Compare bundle sizes:

   • Next.js: npm run build → check .next/ folder
   • SvelteKit: npm run build → check build/ folder

3. Compare code:

   • Look at lib/cart-context.tsx (Next.js) vs lib/stores/cart.ts (SvelteKit)
   • Compare component files (.tsx vs .svelte)

📝 Notes

• This mockup uses Svelte 5 (runes: $state, $derived)
• Tailwind CSS is configured identically to the Next.js version
• Cart persistence uses localStorage (same as Next.js version)
• All styling matches the FiltersFast brand colors

---

Created for comparison purposes - This is not a production-ready application, but demonstrates the core differences between the two frameworks.