SvelteKit E-commerce Cart Project

This project is a SvelteKit application demonstrating a functional shopping cart. It fetches product data from the DummyJSON API and allows users to add items to a cart, view the cart, update item quantities, and remove items. The cart state is managed using Svelte stores and persisted in localStorage.

Features

• Product Listing: Displays products fetched from an external API (DummyJSON).
• Add to Cart: Users can add products to their shopping cart.
• Cart Drawer: A slide-out drawer displays the current cart items.
• Quantity Management: Users can increment or decrement item quantities in the cart.
• Remove Item: Users can remove items from the cart.
• Cart Summary: Shows the total number of items and the subtotal.
• Persistent Cart: Cart contents are saved to localStorage and restored on page load.
• Responsive Design: Basic responsive layout for product display.

Tech Stack

• Framework: SvelteKit
• Language: TypeScript
• Styling: Tailwind CSS (implied from class names like grid, md:grid-cols-2, bg-blue-600, etc. - if not using Tailwind, please adjust)
• State Management: Svelte Stores
• API: DummyJSON API for product data
• Linting/Formatting: (Add if you used ESLint, Prettier, etc.)

Project Structure (Key Files)

• src/routes/(app)/+page.svelte: Main page displaying the product list.
  • Fetches product data in src/routes/(app)/+page.ts.
  • Handles adding products to the cart.
• src/lib/components/CartDrawer.svelte: The Svelte component for the cart drawer UI.
  • Displays items from the cart store.
  • Allows quantity changes and item removal.
• src/lib/stores/cart.ts (or cart.js): Defines the Svelte store for cart management.
  • Includes actions for adding, removing, and updating items.
  • Calculates cart totals.
  • Handles localStorage persistence.
• src/lib/types/CartProduct.ts (Assumed): TypeScript type definitions for cart products.

Getting Started

Prerequisites

• Node.js (version X.X.X or higher - specify your version)
• npm, pnpm, or yarn

Installation

1. Clone the repository:

   git clone [https://github.com/your-username/your-repo-name.git](https://github.com/your-username/your-repo-name.git)
   cd your-repo-name
   

2. Install dependencies:

   npm install
   # or
   pnpm install
   # or
   yarn install
   

Running the Development Server

```bash npm run dev

or

pnpm dev

or

yarn dev