Fresh Market - SvelteKit Grocery Store

A complete SvelteKit port of the Next.js grocery store with identical UI and flow.

Features

• Cart Persistence: Cart data persists in localStorage (key: grocery-store-cart) and survives page refreshes
• Hydration-Safe Cart: Cart page waits for hydration before showing empty state
• Default Size: Product page adds to cart without requiring size selection (uses default for size)
• Real Stripe Checkout: Uses real Stripe checkout.confirm() flow (NOT mock)
• Tailwind CSS v4: Uses @import "tailwindcss" syntax
• Svelte Stores: Cart state managed with Svelte writable/derived stores
• Lucide Svelte Icons: Uses lucide-svelte for all icons
• Svelte Transitions: Uses fly/fade transitions instead of framer-motion for checkout animations
• Zero Console Logs: No console.log/console.error/console.warn anywhere in the codebase

Project Structure

src/
├── lib/
│   ├── components/
│   │   ├── TopBar.svelte           # Promotional deals banner
│   │   ├── StoreHeader.svelte      # Main header with cart
│   │   ├── StoreNavigation.svelte  # Navigation menu
│   │   ├── HeroBanner.svelte       # Hero carousel
│   │   └── StoreFooter.svelte      # Footer
│   ├── stores/
│   │   └── cart.ts                 # Cart state management
│   └── constants.ts                # Store config and products
├── routes/
│   ├── +layout.svelte              # Root layout
│   ├── +page.svelte                # Home page
│   ├── product/+page.svelte        # Product details
│   ├── cart/+page.svelte           # Shopping cart
│   ├── checkout/
│   │   ├── +page.svelte            # Order confirmation
│   │   ├── stripe/+page.svelte     # Stripe checkout
│   │   └── success/+page.svelte    # Payment success
│   └── api/
│       ├── create-checkout-session/+server.ts
│       └── session-status/+server.ts
└── app.css                         # Global styles

Setup

1. Install dependencies:

   npm install
   

2. Configure environment variables: Create a .env file:

   STRIPE_SECRET_KEY=sk_test_...
   PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
   

   Or use the default test key:

   PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51ShiIxLlwE3MW2ahqcf5GHv1wxm1JqfHXhwa4dCYBFPMpJQinJk2UvulkAcRHuvgrpUxrU4H5SgxgVDNdLkUjEKT008AdnSHev
   

3. Run development server:

   npm run dev
   

4. Build for production:

   npm run build
   

Key Adaptations from Next.js

Cart State Management

• Next.js: React Context API with useContext hook
• SvelteKit: Svelte stores with writable, derived, and $state runes

Routing

• Next.js: app/ directory with page.tsx files
• SvelteKit: routes/ directory with +page.svelte files

API Routes

• Next.js: app/api/*/route.ts with NextResponse.json()
• SvelteKit: routes/api/*/+server.ts with json() from @sveltejs/kit

Navigation

• Next.js: useRouter() and router.push()
• SvelteKit: goto() from $app/navigation

Stripe Integration

• Next.js: Uses @stripe/react-stripe-js with React components
• SvelteKit: Uses @stripe/stripe-js directly with manual Elements mounting via onMount()

Animations

• Next.js: framer-motion library
• SvelteKit: Native Svelte transitions (fly, fade)

Reactive Statements

• Next.js: Not applicable (uses hooks)
• SvelteKit: Uses $derived() rune (Svelte 5 style) instead of legacy $: syntax

Cart Store API

// Import
import { cartItems, cartCount, subtotal, addToCart, removeFromCart, updateQuantity, clearCart } from '$lib/stores/cart';

// Usage in components
$cartItems          // Array of cart items
$cartCount          // Total item count
$subtotal           // Cart subtotal

addToCart(item)                          // Add item to cart
removeFromCart(id, size)                 // Remove item from cart
updateQuantity(id, quantity, size)       // Update item quantity
clearCart()                              // Clear all items

Stripe Checkout Flow

1. User clicks "stripe" button on cart page
2. Navigate to /checkout/stripe
3. Fetch client secret from /api/create-checkout-session
4. Load Stripe and mount PaymentElement manually
5. User enters email and payment details
6. Submit form calls stripe.confirmPayment() with real confirmation
7. Redirect to /checkout/success on success
8. Fetch session status from /api/session-status
9. Display payment details

Testing

# Type checking
npm run check

# Type checking with watch mode
npm run check:watch

Verification

• ✅ Zero errors in svelte-check
• ✅ All routes functional
• ✅ Cart persists across page refreshes
• ✅ Stripe checkout uses real confirm flow
• ✅ No console statements
• ✅ Identical UI to Next.js version
• ✅ Uses Svelte 5 runes syntax

License

MIT