Bliss_World_Full_Stack_Clone

We have successfully created the full-stack clone of Blissworld.com in our backed construct week. Where we created the full backend of Blissworld.com in a week with a team of 4 developers..

Check project and code

• Checkout Website Clone

• Code on GitHub

• Blog

We used the following tech stack in this clone -

• React.js

• Chakra-UI

• Redux

• React-router-dom

• Node.js

• Express for server

• Mongoose

• MongoDB for database

• Glitch for deployment

Home Page

Created the home page and added a dropdown navbar, when u check our bestsellers you can go to the product page.

Login & Signup

You have to log in if u want to add a product to your cart, and if u enter the wrong email or password don't worry it will give an error message to make it correct. If you are not registered yet and trying to log in it will not log u in and suggest to register first.

Product Page

Here are all the products if you want to sort according to salary ascending or desc you are able to from the top right corner, we have applied all filter and sorting properties inside our backed code using mongoose.

Product Detail Page

You can check out the full description of the selected product and also able to check the description video of the product which we are embedded from youtube. If you press add to cart button u are able to move to the cart.

Cart Page

Here all the cart products will be displayed which you have added under your login id, you can increase the quantity and get the cart total on your own, and want to delete it is easy just click remove. Now, let's move to checkout by clicking the checkout button.

Check the cart backed using postman

Since you have added 3 products to the cart you can get the overview of the database using postman as we fetch the cart detail using userId we get 3 the same products as listed on UI.

Checkout Page

If you are adding a product to the cart collection when added to cart the same products from the cart collection are displayed here to reverify and update the payment details. You can place an order by clicking on place order.

Order Page

You have placed the order and you got all 3+1 prior ordered projects on your order page. Since you have placed the order you cart collection got empty.

Order placed and cart collection got empty

Product moded from cart collection to order collection under similar userId.

Difficulties we faced-

• Getting the userId from the JSON web token and further sending an API call to our database is a little become complicated for us where we faced difficulty but the issue we created because we have not fetched the userId as the user logged in but did it by repeating the code again and again to fetch userId.

• We also faced difficulty in coordinating with other person code because it's always challenging to modify and work on others' code.

Team members-

1. Ritik Kumar Singh

2. Aditya Singh

3. Krishna Chaturvedi

4. Harsh Anand

• Editor- Krishna Chaturvedi