DEV Community: NoobCoder

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

NoobCoder — Mon, 29 May 2023 14:46:13 +0000

(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

Seamless Product Display: Experience a sleek and intuitive product listing that replicates the Amazon browsing experience.
Easy Cart Management: Add products to your cart effortlessly and enjoy a smooth checkout process.
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

Django Ecommerce Store

NoobCoder — Tue, 14 Mar 2023 13:19:51 +0000

SOURCE CODE: https://rebrand.ly/36rzez7

In this project I have created fully responsive and functional ecommerce website.

Add product: You can easily add product by admin panel.

Add to cart: Add to cart function also is available.

Category: Users can visit a page that displays a list of all product categories.

Get orders easily: you can easily get orders and see it by admin panel when you want.

Django Admin Interface: Via the Django admin interface, a site administrator can view, add, edit, and delete any listings, comments, and bids made on the site.

Product Features

Add product: Add product easily by admin panel,
Get orders: Easily get orders and see it in admin panel.
Categories: Users can visit a page that displays a list of all product categories.
Django Admin Interface: Via the Django admin interface, a site administrator can view, add, edit, and delete any product.

In this project I have created fully responsive and functional ecommerce website.

Add product: You can easily add product by admin panel.

Add to cart: Add to cart function also is available.

Category: Users can visit a page that displays a list of all product categories.

Get orders easily: you can easily get orders and see it by admin panel when you want.

Django Admin Interface: Via the Django admin interface, a site administrator can view, add, edit, and delete any listings, comments, and bids made on the site.

Product Features

Add product: Add product easily by admin panel,
Get orders: Easily get orders and see it in admin panel.
Categories: Users can visit a page that displays a list of all product categories.
Django Admin Interface: Via the Django admin interface, a site administrator can view, add, edit, and delete any product.

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

NoobCoder — Mon, 06 Mar 2023 17:05:57 +0000

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

The Project uses SvelteKit, Svelte, TailwindCSS, ShopAPI, etc to fetch the data
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

The Project displays the products.
The product can be added to the cart.
Can't See cart without signing in.
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

How to get an idea for a Saas?

NoobCoder — Wed, 13 Apr 2022 15:00:41 +0000

TailwindCSS is Just Exploding

NoobCoder — Fri, 24 Dec 2021 03:31:25 +0000

Is it just me or you all are too noticing the gigantic rise of tailwindCSS in a few months.

Django Ecommerce Beautiful UI and Backend.

NoobCoder — Fri, 17 Dec 2021 07:14:49 +0000

DEMO VIDEO: https://www.youtube.com/watch?v=Bp4dRyjrl8k
SOURCE CODE: https://rebrand.ly/36rzez7

In this project I have created fully responsive and functional ecommerce website.

Add product: You can easily add product by admin panel.

Add to cart: Add to cart function also is available.

Category: Users can visit a page that displays a list of all product categories.

Get orders easily: you can easily get orders and see it by admin panel when you want.

Django Admin Interface: Via the Django admin interface, a site administrator can view, add, edit, and delete any listings, comments, and bids made on the site.

Product Features

Add product: Add product easily by admin panel,
Get orders: Easily get orders and see it in admin panel.
Categories: Users can visit a page that displays a list of all product categories.
Django Admin Interface: Via the Django admin interface, a site administrator can view, add, edit, and delete any product.

Created a Quora Community for Dart/Flutter tips and tricks

NoobCoder — Wed, 27 Oct 2021 15:50:38 +0000

Dart is a great programming language.

So I created a Quora Space for Dart/Flutter tips and tricks

Join as a contributer: Click Here

Join as a follower only: Click Here

Flutter: Avoid Widget Rebuild by Using const Constructor

NoobCoder — Wed, 27 Oct 2021 14:40:45 +0000

Buy me a Coffee: https://www.buymeacoffee.com/noobcoders

As we know that by using the setstate function. Flutter rebuilds the whole UI. Since this is a bad practice and memory intensive.

To Prevent this initialize it with const

// As we Know that stateful Widgets rebuild the whole UI. 
// Which is really bad practice!! 
// To Prevent rebuilding of static components like non changing text 
// Initialize them with const  
// Jump to line 38 
import 'package:flutter/material.dart'; 

void main() => runApp(const MyApp()); 

class MyApp extends StatefulWidget { 
  const MyApp({Key? key}) : super(key: key); 

  @override 
  _MyState createState() => _MyState(); 
} 

class _MyState extends State<MyApp> { 
  Color _containerColor = Colors.yellow; 

  void changeColor() { 
    setState(() { 
      if (_containerColor == Colors.yellow) { 
        _containerColor = Colors.red; 
        return; 
      } 
      _containerColor = Colors.yellow; 
    }); 
  } 

  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( 
        title: 'Flutter Demo', 
        theme: ThemeData( 
          primarySwatch: Colors.blue, 
        ), 
        home: Scaffold( 
          // Avoid Widget Rebuild by Using const Constructor 
          appBar: AppBar(title: const Text("A Simple App Stateful Widget")), 
          body: Container(decoration:  BoxDecoration(color: _containerColor)), 
          floatingActionButton: FloatingActionButton( 
            onPressed: changeColor, 
            child: Icon(Icons.add), 
            tooltip: "Book Here", 
          ), 
        )); 
  } 
}

See line number 38 here to prevent the Text to be rebuilt. A const was used.

Try It Here

How to emulate Ternary Operators of Javascript in Python.

NoobCoder — Mon, 25 Oct 2021 15:47:11 +0000

First For Those Who don't know Ternary Operation

Ternary Operator is a easy and consize way of if-else

Ok So lets flex some JS muscles.

The syntax in JS is something like this.

let v = condition ? "True" : "False"

Here if condition is true.
The value of the variable v becomes True.
While if condition is false.
The value of the variable v becomes False.

In Python's if-else it would be.

if condition:
    v = "True"
else:
    v = "False"

Now To Emulate This in Python ?

ifTrue = "It is a True Value"
ifFalse = "It is a False Value"
trueValue = 432
c1 = [ifFalse, ifTrue][bool(trueValue)]

Understanding The Code

So in simple if else it would be like this

if trueValue:
   c1 = ifTrue
else:
   c2 = ifFalse

So How is this Happening?
Now lets break it into pieces
c1 = [ifFalse, ifTrue] is a List. Do you agree?

c1[0] would be ifFalse.

c2[1] would be ifTrue.

Agreed?
Now,

bool(3) will give True in python

bool(None) will give False in python

Shall We Move on ?

Ok So

a = [ifFalse, ifTrue]
c = a[bool(trueValue)]

here if bool(trueValue) is True then it will get typecasted to integer which is 1.

And, Whats a[1] it's ifTrue.
While it its False. It will get typecasted to a[0] which is ifFalse.

This was a Long One but for short and helpful tricks
Follow PythonZen On Instagram

Try it Here

Created a Python page on instagram page.

NoobCoder — Sun, 24 Oct 2021 17:30:05 +0000

Created a Python page on instagram for python tricks and tutorials.
Added a few embeds:

INSTAGRAM: https://www.instagram.com/pythonzen/

Here I will post tricks and easy shortcuts related to python programming language.

Made a Keyword Generator for youtube or other social media in Python

NoobCoder — Sun, 24 Oct 2021 17:02:04 +0000

Created a Keyword Generator for youtube or other social media in Python

Generates a List of keywords seperated using commas that you can directly paste it.

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

PF - 2 Operators

NoobCoder — Sat, 23 Oct 2021 16:14:27 +0000

Operators in a programming language that tells compiler or interprator to perform arithmatic, relational or logical operations.

Arithmatic Operators

+ Adds two operands A + B will give 30
- Subtracts second operand from the first A - B will give -10
* Multiplies both operands A * B will give 200
/ Divides numerator by de-numerator B / A will give 2
% This gives remainder of an integer division B % A will give 0

Relational Operators

== Checks if the values of two operands are equal or not, if yes then condition becomes true. (A == B) is not true.
!= Checks if the values of two operands are equal or not, if values are not equal then condition becomes true. (A != B) is true.
> Checks if the value of left operand is greater than the value of right operand, if yes then condition becomes true. (A > B) is not true.
< Checks if the value of left operand is less than the value of right operand, if yes then condition becomes true. (A < B) is true.
>= Checks if the value of left operand is greater than or equal to the value of right operand, if yes then condition becomes true. (A >= B) is not true.
<= Checks if the value of left operand is less than or equal to the value of right operand, if yes then condition becomes true. (A <= B) is true.

Logical Operators

&& Called Logical AND operator. If both the operands are non-zero, then condition becomes true. (A && B) is false.
|| Called Logical OR Operator. If any of the two operands is non-zero, then condition becomes true. (A || B) is true.
! Called Logical NOT Operator. Use to reverses the logical state of its operand. If a condition is true then Logical NOT operator will make false. !(A && B) is true.