DanceKart

A one stop shop for all the fashion and lifestyle needs of a dancer.

DanceKart is a fashion e-commerce web application for all the dance enthusiast where you can find all kinds of products, wishlist them and add the ones you want to buy to your cart and make instant payment through card.

Features

• Procut Listing - The landing page of the website lists all the products. The products list is a static json data.
• Wishlist - Any product can we wishlisted. All the products wishlisted are listed separately in the wishlist page. The user needs to sign in first in order to wishlist a product, since the wishlisted product are directly stored in the Cloud Firestore with user's sign in id.
• Checkout Flow - The web app follows the same checkout flow which is followed by other e-commerce apps. In order to buy a product the user had to add the product to the cart and go to the cart menu. The user can alter the no. of items it wants to have by changing the quantity of the product. This is followed by clicking on the checkout button which prompts to sign in if the user has not signed in yet. Then the user has to enter the address details and make the payment via card.
• Address Input - In order to place an order, address details are mandotory. The web app has a form asking for all the details. The details are automatically sotred in the database once entered. So, that for the next order the previous address details are fetched, which can also be changed if required.
• Payment Gateway - The payment gateway integration is done using Stripe Api, which enables payment via card.
• Orders History - The user can see the whole orders history in the orders page. The products are listed along with the date and address to which they were to be delivered.
• Authenticaion - The web app has email/password sign in method integrated using firebase authentication. Only authenticated users are allowed to wishlsit and place the orders.

Technologies Used

• Frontend - ReactJS
• Styling - Material UI and CSS
• Deployment
  • React App - CI/CD setup using Github Actions and Netlify
  • ExpressJS server (to make api requests to Stripe API) - Heroku
• Authentication and Authorisation - Firebase Authentication ( email/password )
• Database - Firebase Cloud Firestore
• Additional libraries and APIs
  • Stripe API
  • Axios
  • Moment

  Screenshots

  Following is a sneak peek of how the interface looks. To use the website live, head on over to the link

  Hero Section	Register Page

  Product Listing	Wishlist

  Checkout Page	Payment Page

  Order Page	Address Input