Ecommerce App

A modern ecommerce application built with SvelteKit 5, TypeScript, and Tailwind CSS. This app provides a complete shopping experience with product browsing, cart management, and checkout functionality.

Features

• 🛍️ Product Catalog: Browse and search through products with pagination
• 🛒 Shopping Cart: Add products to cart with real-time cart updates
• 💳 Checkout System: Complete purchase flow with order management
• 🔍 Search & Filter: Find products quickly with search functionality
• 📱 Responsive Design: Modern UI that works on all devices
• ⚡ Fast & Modern: Built with SvelteKit 5 and TypeScript for optimal performance

Tech Stack

• Framework: SvelteKit 5
• Language: TypeScript
• Styling: Tailwind CSS 4
• Build Tool: Vite
• Package Manager: pnpm

Getting Started

Prerequisites

• Node.js (v18 or higher)
• pnpm (recommended) or npm

Installation

1. Clone the repository:

git clone <repository-url>
cd ecommerce-app

2. Install dependencies:

pnpm install
# or
npm install

Development

Start the development server:

pnpm dev
# or
npm run dev

# or start the server and open the app in a new browser tab
pnpm dev --open

The app will be available at http://localhost:5173

Building for Production

To create a production version of your app:

pnpm build
# or
npm run build

You can preview the production build with:

pnpm preview
# or
npm run preview

Project Structure

src/
├── routes/
│   ├── +page.svelte          # Home page
│   ├── +layout.svelte        # App layout
│   ├── products/             # Product catalog pages
│   └── checkout/             # Checkout flow pages
├── lib/
│   ├── components/           # Reusable UI components
│   ├── api/                  # API services
│   ├── utils/                # Utility functions
│   └── types/                # TypeScript type definitions
└── app.html                  # HTML template

Available Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm preview - Preview production build
• pnpm check - Run Svelte type checking
• pnpm check:watch - Run type checking in watch mode

Deployment

To deploy your app, you may need to install an adapter for your target environment.

The app is configured with @sveltejs/adapter-auto which automatically selects the appropriate adapter for your deployment platform.