🛒 Shopping Cart with Svelte + TypeScript
A lightweight shopping cart application built with Svelte, TypeScript, and TailwindCSS.
The project demonstrates how to manage state, reactivity, and UI interactions in Svelte without relying on heavy frameworks.
🚀 Features
- Product Listing – Products are loaded from an API (
loadData) and displayed in a responsive grid. - Add to Cart – Users can add products with a single click.
- Cart Drawer – A side cart panel shows selected items, quantities, and total price.
- Increase / Decrease Quantity – Update product quantity directly from the cart.
- Remove Items – Remove items individually from the cart.
- Free Shipping Notification – Alerts the user when their total cart value exceeds
$50. - Cart State Management – Implemented using Svelte’s
$state,$derived, and$effectreactivity. - Type Safety – Written in TypeScript with strong typing for products and cart items.
- Responsive Design – Styled with TailwindCSS for a modern, responsive layout.
📂 Project Structure
src/ ├── Api.ts # API loader for fetching products ├── App.svelte # Main shopping cart UI ├── cart-item.svelte # Component for individual cart items ├── Types.ts # TypeScript interfaces (Product, CartProduct)
⚙️ Tech Stack
- Svelte – UI framework
- TypeScript – Type safety
- TailwindCSS – Styling
- Phosphor Svelte Icons – Icons for cart actions
📸 Screenshots
🔧 Installation & Usage
- Clone the repo ```bash git clone https://github.com/awadreda/shopping-cart-svelte.git cd shopping-cart-svelte
npm install
npm run dev
