TechGiz

Table of content

• About
• Tech used
• Live Link
• Features
• Getting Started
• ScreenShots
• Connect with me

About

• Techgiz is E-commerce web app build with ReactJs and vanilla CSS. Here you can buy variety of headphones of different brands and types.

🛠️ Tech Used

• ReactJs
• Vanilla CSS
• Rect-router
• axios
• React icons
• Mockbee for backend

🚀 Live Link

• TechGiz-E-commerce

🧑‍💻 Features

Home Page

• Landing page with categories and brands listed, clicking on any of them redirect to product listing page with selected category or brand applied as filter

Product Listing

• On this page user can see all products
  • user can add products in cart and wishlist
  • user can search product by name or brand
  • user can apply sorting on price, and date
  • Filter on types, brands, inStock, rating, and select price range

Product Details Page

• On click on any product card it will redirect to product details page which shows all details about product and show list of similar products

Wishlist

• On adding product in wishlist user can see products in this page. here user can remove product from wishlist or add product to cart.

Cart Management

• All products added in cart listed in this page. here user can
  • Move product to wishlist
  • Remove product from cart
  • Increase/Decrease quantity of product
  • See all price details of cart products
  • Apply coupon
  • Proceed to checkout

Coupon

• In cart page user can apply coupon on total price, and if not needed they can remove it also

Address Management

• On Profile page use can see address section , where they can
  • Add new delivery address
  • can select address as default
  • Edit the address
  • Delete the address

Checkout

• In checkout page default address will selected
• user can select other address or can add new address on clicking change address button
• Here user can proceed to place order
• Here user can see
  • Order details
  • Selected Address
  • Place order button

Payment

• On every thing finish click on place order button rozerpay payment gateway open and payment can be done

Order Summary

• After successfully payment, user will navigate to Order summary page here user get summary of Ordered products with order confirmation message.

Authentication

• Techgiz has Login, Signup and Logout features also

⚛️ Getting Started

• Clone the repository on your local machine with the command below in your terminal and cd into TechGiz-ecommerce folder.

git clone https://github.com/gkumar-pandey/Techgiz-ecommerce.git

cd Techgiz-ecommerce

• Install dependencies (if you are using yarn do with that)

npm install

• Create a .env file at the root level of the directory (at the level of package.json file) and create a environment variable

REACT_APP_JWT_SECRET = <JWT_SECRET_KEY_OF_YOUR_CHOICE>

• Start the server 🔥

npm start

📸 ScreenShots

🧑‍💻 Connect with me