DEV Community

NoobCoder
NoobCoder

Posted on • Edited on

(SHOWCASE) Amazon Clone in SvelteKit, Svelte, TailwindCSS.

Image description

LIVE DEMO URL CLICK HERE

URL for the build: https://amazon-svelte.vercel.app/

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

Requirements

Node 16 or above Features

  1. The Project uses SvelteKit, Svelte, TailwindCSS, ShopAPI, etc to fetch the data

  2. Highly Editable without changing the code

Just open the file src/assets/details.js

Edit it according to your needs like the API URL, images URL, logo of the site, etc

Product Insiders

  1. The Project displays the products.

  2. The product can be added to the cart.

  3. Can't See cart without signing in.

  4. Displays Total Price.

Directory Structures

├── 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

Image description
Image description
Image description

Top comments (2)

Collapse
 
gevera profile image
Denis Donici

The link to the demo shows the netflix clone, not the amazon

Collapse
 
vanshcodes profile image
NoobCoder

Thanks for informing.
Updated!!