Svelte Product Checkout App

A lightweight SvelteKit app demonstrating:

• Product Search: Fetch and display products from a dummy API with preload and loading indicator.
• Local Cart Management: Cart state managed via the Svelte Context API (no stores).
• Checkout Flow: Review cart items, remove items, see total price, and simulate a checkout with success message.
• Modern UI: Clean, responsive layout with pill-style buttons and smooth interactions.

⚙️ Features

1. Home Page (/)

   • “Search Products” and “Checkout” buttons.

2. Products Page (/products)

   • Fetches from DummyJSON.
   • Built-in loader + artificial 1 s delay to show spinner.
   • Grid of product cards with thumbnail, title, price, and “Add to Cart.”
   • Live cart item count (via Context API).

3. Checkout Page (/checkout)

   • Lists items added to cart.
   • Remove items individually.
   • Shows total amount.
   • “Confirm Checkout” button simulates network call and displays a success message, then redirects home.

4. State Management

   • No Svelte stores.
   • Cart is a plain array in the root layout, passed via setContext/getContext.
   • Manual subscribe/notify pattern ensures reactivity.

5. Modern UI Details

   • Full-width, pill-shaped buttons with lift, shadow, and focus ring.
   • Responsive grid layout.
   • Accessible focus states and disabled styles.

🚀 Quick Start

Prerequisites

• Node.js ≥ 18
• npm

Installation

git clone <your-repo-url>
cd svelte-task
npm install