(SHOWCASE) Build an Amazon Clone with SvelteKit, Svelte, and Tailwind CSS

Source Code: https://rebrand.ly/amazon_svelte

Check out the live demo of this impressive Amazon clone built using SvelteKit, Svelte, and Tailwind CSS: Live Demo

Experience the Power of SvelteKit, Svelte, and Tailwind CSS

Are you ready to explore the potential of SvelteKit and build an Amazon-like e-commerce website? Look no further! This comprehensive tutorial showcases the key features and techniques behind this amazing project.

Requirements and Customization

To ensure easy setup and customization, this project utilizes SvelteKit, Svelte, Tailwind CSS, and ShopAPI. You'll be amazed at how simple it is to modify this clone without touching the core code.

Just open the file src/assets/details.js and customize it according to your specific needs. Update the API URL, image URLs, site logo, and more with ease.

Key Features of the Amazon Clone

1. Seamless Product Display: Experience a sleek and intuitive product listing that replicates the Amazon browsing experience.

2. Easy Cart Management: Add products to your cart effortlessly and enjoy a smooth checkout process.

3. Personalized Experience: Sign in to access your cart and keep track of your orders. Get a glimpse of the total price before making a purchase.

Directory Structure

plaintext
├── jsconfig.json
├── package.json
├── package-lock.json
├── postcss.config.cjs
├── README.md
├── sda.js
├── src
│   ├── app.css
│   ├── app.html
│   ├── assets
│   │   ├── cartHelper.js
│   │   ├── details.js
│   │   ├── firebaseImport.js
│   │   ├── req.js
│   │   └── router.js
│   ├── firebase
│   │   ├── auth.js
│   │   └── config.js
│   ├── global.d.ts
│   ├── hooks.js
│   ├── lib
│   │   ├── Body
│   │   │   ├── CarousalItem.svelte
│   │   │   ├── CheckoutProduct.svelte
│   │   │   ├── Currency.svelte
│   │   │   ├── ProductFeed.svelte
│   │   │   ├── Product.svelte
│   │   │   └── Stars.svelte
│   │   └── Header
│   │       ├── bottomnav.svelte
│   │       ├── index.svelte
│   │       └── login.svelte
│   ├── routes
│   │   ├── checkout.svelte
│   │   ├── index.svelte
│   │   └── __layout.svelte
│   └── store
│       ├── basket.store.js
│       └── user.store.js
├── static
│   ├── favicon.svg
│   └── robots.txt
├── svelte.config.js
└── tailwind.config.cjs