DEV Community: Ezzdin Atef

eCommerce Database Design

Ezzdin Atef — Fri, 17 Nov 2023 19:04:14 +0000

Building eCommerce is one of the most famous web application that we build as it got so famous, well known, and the need of it is became more than ever for ordering and shipping products to your home online.

One of the most challenges that I have faces while building many eCommerce application is the complicity that it gain with more features that's required from the client and we have to add. That's made me think about the pros and cons of my structure specially the database design and started ask my self many questions like, Is my design is suitable for these requirement?, Did I get the most clean structure I can get?, Is this affect with performance and loading data efficiency?.

Until this moment I write this blog, this the database design that I get into conclusion to be best fit to the needs that I have faced before (until I got new project with more complicated requirement 🤡).

Our Project Description & Requirements

First of all, as any application we have users that can register and login to our eCommerce application. Every user have one or more addresses. They have also favorite or Wishlist, Orders list to list there orders and its status, and Cart list of all the products that's ready to be ordered.

We have categories and sub categories (2 levels of categories) and each have a name and description.

For sure we have products and this have many things:

Basic information of the product like: name, description, price, summary, cover image, ...etc.
Product gallery which consist of many images of the product.
Every product may have some attributes like sizes, and colors.
Some products that have many colors will have image gallery for every color separated.
Every color, size, or both might there prices vary. let's say that the blue t-shirt will cost 20$ but the red t-shirt will cost 22$ . even the xl blue t-shirt will cost 22$ but the XXL blue t-shirt will cost 26$.
Every color and size have limited quantity stock like we might have from the XXL blue t-shirt 3 items but XXXL blue t-shirt just 1 item.

When user make an order will choose one of his addresses with the order and he might pay online with any supported way like visa or something else (will integrate with payment gateway).

When the order is out for delivery then the quantity of all products will decrease.

Now, that's all with the requirements of the project so let's get our mind around it.

Database Designing

As we notice from the previous section that the most complex part is the product, here where the game play go xD.

Let's start from the beginning of our database design.

Users Table

Let's start with the users table and its related information.

Here we just have 2 tables, one for users information details, and the other one for the addresses that's associated to the user and linked in one to many relationship using the user_id.

Categories Table

Now in the categories table, We have 2 tables one for main categories, and the other for sub categories. sub categories table associated to the categories in one to many relationship.

Products Table

Now, The products table, Let’s start with simple structure that have the basic information of the product and linked within the categories (will be linked in many to many relationship with sub categories table). See image bellow.

Let’s try to take a more higher look, as mention above the products will have many different attribute (in our situation here are colors, and sizes) and they might be with different prices range, So let’s remove the price column from the products table because that will be linked in other table.

As we notice above, we added new table called product_attributes that will hold all product attributes types and there values from different colors and sizes.

Then will create product_skus table that will link between products and the attribute together as we added 2 columns both point to the product_attributes table but, one for colors and the other for sizes (we can add more if we need to).

Note: We may split the product_attributes table to 2 more table like product_colors, and product_sizes but I think of product_attributes table idea more easily extendable as we can add more attributes sizes in same table but will add just one more column in products_skus table.

Each product_skus entity have a price and quantity value that may vary between every attributes variation.

Wishlist Table

The Wishlist table is quite simple as we will just store the product_id and the user_id. That’s it 😀.

Cart Table

This table is what’s holding the products that customer wants to buy and order so we will have a table called cart which connected to the user table and have total cost attribute.

The other table is cart_item which is linked to the cart table and carry the product and product sku tables and the quantity required by the customer.

As shown above, the 2 tables are very simple.

Orders Table

The order table is same as cart tables we have order and order_item (but will call the order as order_details). Just will have one more table that will be responsible for the payments will be named payment_details which will hold all the payment information from order, amount, provider, and status.

As shown above, this is the order and payment tables to store all needed info that we need for now or event we can add more attributes as required.

Final Schema

Now let’s look into the big picture of our schema.

Here’s the preview link to play with it on dbdiagram.io

Conclusion

Here we reach to the end of this article, I hope you enjoyed. If you have any suggestion or comments, please write it down and I'll be happy to share thoughts with you.

See you again 😀;

What's Pure Function in JavaScript

Ezzdin Atef — Sun, 02 Apr 2023 12:23:48 +0000

Hello World,

One of the most known questions, especially in interviews, is about pure functions and what they are… so we will talk about pure functions in this article.

what are pure functions?

It’s the atomic building block of functional programming. they are very simple and easy to test.

The function can be called a pure function if these conditions are applied:

The same inputs always return the same outputs
No side effects

Let’s focus on each of them:

The same inputs always return the same outputs

This means that we always get the same output whenever we use the function and pass the same input.

for example, we have this function.



function sum(x, y) {
    return x + y;
}

sum(2, 3); // will return always 5

whenever we pass the same input 2, 3, we get the same output 5.

But in the following example.



let num = 5;
function sum(x) {
    return num+= x;
}

sum(2); // will return 7
sum(2); // will return 9

we have a shared state here, which is a bad practice (we don’t use it unless we need to do things that way) because we can’t predict the return value of the function now, and became not a pure function.

So in summary, a pure function is a function that returns the same output always whenever we call it and pass the same input.

No side effects

the side effects of a function are one of the following:

Mutating your input
use console.log
HTTP calls (AJAX/fetch)
Changing the filesystem
Querying the DOM

In general, the function implementation should be only about calculating the final output and nothing else.

Note: we should not always use pure function and it’s not the best solution as may you think, because we might need to call HTTP requests, change the file system, or query the DOM tree.

That’s it for today’s article, if you have any suggestions, then don’t hesitate to contact me anytime.

Slice vs Splice in JavaScript

Ezzdin Atef — Wed, 23 Jun 2021 12:34:34 +0000

Hello everyone 👋

when I started learning JavaScript, I was confused about slice & splice methods so, thus I will try to explain it simply without going deep in it so you understand it easily without any confusion.

Slice

Slice means to cut something into pieces or slices. In JavaScript, we use to cut a part of the array as we need just a partial part of the array.

Syntax



slice(start, end);

slice method tasks 2 parameters:

start: the start index of the array where I should strat cut it.
end: the end index where I should stop cutting

Note: That the end index will not be a part of the sliced array

Examples

In The First Example, I want to get from index 1 to the element before index 4



const arr = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8"];

arr.slice(1, 4);  // will return ["Item 2", "Item 3", "Item 4"]

In The Second Example, we want to get from index 3 to the end of the array



const arr = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8"];

arr.slice(3);  // will return ["Item 4", "Item 5", "Item 6", "Item 7", "Item 8"]

so here we didn't specify the end parameter and when we do that he will take the rest of the array until the end.

Splice

Splice means to connect or join. we use it if we want to add something to the array but in a specific place unlike push or unshift which adds new elements to the end or the beginning of the array. and we use It also to remove something from the array from a specific place.

Syntax



splice(start, deleteCount, item1, item2, itemN);

start: the start index of the array where I should start changing it.
deleteCount: the number of elements that I want to delete and if I don't want to remove anything we simply pass 0
Then the rest of the parameters is the elements we want to add to the array ^_^

Examples

In The First Example, I just want to remove 3 elements from the array starting from the element of index 2



const arr = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8"];
arr.splice(2, 3);
console.log(arr); // will return ["Item 1", "Item 2", "Item 6", "Item 7", "Item 8"]

In The Second Example, we want to add some new elements from index 5 without removing any elements from the array so will be the first element I will add will be in index 5



const arr = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8"];
arr.splice(5, 0, "item 9", "item 10");
console.log(arr); // will return  ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "item 9", "item 10", "Item 6", "Item 7", "Item 8"]

In The Third Example, Now let us remove some elements and replace it with other new elements 😄



const arr = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8"];

arr.splice(2, 3, "item 9", "item 10");

console.log(arr); // will return  ["Item 1", "Item 2", "item 9", "item 10", "Item 6", "Item 7", "Item 8"]

Conclusion

So that's it 😀. Slice returns part of an array while splice adds & removes some elements of an array from a specific index.
Of course, there is a more complex example & usage for them which you can check out later to have a deep understanding of it.

I hope you find this article helpful 🤗

see you next time ✌