BUYLANCE.COM

An ecommerce platform that provides user-friendly interface that enables customers to browse products, add them to their cart, and checkout seamlessly. It also includes admin panel where admin can track and manage the products as well as users.

Tech Stacks Used

• Typescript
• React Redux
• Redux thunk
• Chart Js
• Axios
• CSS
• Chakra Ui (External Css)
• Chakra Icons (External Icons)
• React Icons (External Icons)

Pages

• 11 Pages
  • Login / SignUp
  • Home
  • Products Category
  • Products
  • Products Details
  • Cart
  • Address
  • Payment
  • Order Summary
  • Admin Dashboard
  • Admin Products Manage Page

Key Responsibilities

1. Home Page - karmit Verma

   • Navbar
   • Other Sections
   • Footer

• Our Landing Page

2. Login Page / SignUp Page - Sama sarun reddy

   • using (firebase)
   • using api also

• Signup

Login

3. Products Page with filter - Faizal

   • products cards
   • filter functions
   • navbar and footer (Re use from Karmit Components)

Products Page

4. Category Page - Sama sarun reddy

   • images grid
   • navbar and footer (Re use from Karmit Components)

Category Page

5. Products Details Page - Faizal

   • products details
   • ratings and reviews
   • navbar and footer (Re use from Karmit Components)

Products Details Page

6. Cart Page - Avinash

   • create Navbar (different from homepage)
   • create footer (different from homepage)
   • handle cart data (crud)

   Cart Page

   

7. Address Page - Rishu raj

   • Used Navbar (ceated by Avinash)
   • create footer (ceated by Avinash)
   • handle address selection

   Address Page

   

8. Payment Page - Avinash Singh

   • Used Navbar (ceated by Avinash)
   • create footer (ceated by Avinash)
   • handle payment options

Payment Page

9. Order Summary Page - Karmit Verma

   • list of products that are purchased (Trach Orders)
   • navbar and footer (Re use from Karmit Components)

   Order Summary Page

10. Admin Login - Sama sarun reddy

    • create some different email and password that can only be access by Admin

11. Admin Dashboard - Faizal

    • Create a dashboard like this present on this link Dashboard

    • Leave proper variables wherever the values are dynamic

Admin Dashboard

User Details from Admin Site

12. Crud Page - Avinash
    • Ui
    • Add the product to products api
    • Delete the product from products api
    • Update the product from products api
    • Get the ordered products from orderedProducts key in api

Extras

1. Handle the users carts for different users in admin Panel
2. Every user have their separate user id and password as well as carts

Development Details

Q1. How many api's we ae going to use?

• Products api (For all products)

      "delivered": false,
      "brand": "SELECTED",
      "name": "Men White Printed Round Neck Organic Cotton T-shirt",
      "rating": {
        "star": 4.2,
        "count": 21
      },
      "price": 649,
      "mrp": 1299,
      "discount": 50,
      "sizes": "M",
      "qty": 1,
      "productDetails": "White printed T-shirt, has a round neck, and short sleeves",
      "size": "The model (height 6') is wearing a size M",
      "material": "Material: 100% organic cotton Machine Wash",
      "category": "tshirts",
      "type": "men",
      "specification": {
        "fabric": "Organic Cotton",
        "fit": "Regular Fit",
        "length": "Regular",
        "mainTrend": "Graphic Print Others"
      },
      "images": [
        "https://assets.myntassets.com/h_720,q_90,w_540/v1/assets/images/13234038/2021/3/1/0d95beec-0505-4689-9188-50bc5fc01dce1614593973198-SELECTED-Men-Tshirts-6521614593971549-4.jpg",
        "https://assets.myntassets.com/h_720,q_90,w_540/v1/assets/images/13234038/2021/3/1/15b6af74-ade1-40c2-942b-16e5326bdf0a1614593973245-SELECTED-Men-Tshirts-6521614593971549-2.jpg",
        "https://assets.myntassets.com/h_720,q_90,w_540/v1/assets/images/13234038/2021/3/1/226ecd5f-e452-4fcb-944a-17188112c30a1614593973270-SELECTED-Men-Tshirts-6521614593971549-1.jpg"
      ],
      "reviews": [],
      "id": 33
    }```

  - Profile api (For all the products)

{
  "id": 16743830916890,
  "name": "Faizal Siddiqui",
  "email": "faizalsid123@gmail.com",
  "mobile": 0,
  "gender": "",
  "birthDate": "",
  "location": {
    "street": "",
    "city": "",
    "state": "",
    "postal_code": "",
    "country": "",
    "social": "",
    "email": ""
  },
  "cardDetails": "",
  "password": "Faizal@123",
  "cart": [],
  orderedProducts: [
     ......all the products that we have moved after payment
  ]
}

- cart key and orderedProducts key
  - not directly but we have to patch the data inside cart by using logics

## Thinking

1. How many Pages do we need ?

- 11 Pages
- Login / SignUp
- Home
- Products Category
- Products
- Products Details
- Cart
- Address
- Payment
- Order Summary
- Admin Dashboard
- Admin Crud

2. How many Components do we need and what are those ?
 // Guys edit this part make your own components so that we can reuse it

- ## Home
-
- ## Products Category
-
- ## Products
-
- Products Details
- Cart
- Address
- Payment
- Order Summary
- Admin Dashboard
- Admin Crud

3. How many API's do we need ?

 - Website

   - POST /profile
   - GET /profile

   - GET /products

   - GET /products/[id]
   - PATCH /products/[id]

   - (POST)-> PATCH / profile[cart]
   - PATCH / profile[cart]

   - PATCH / profile[orderedProducts]

 - admin

   - GET /profile

   - GET /products
   - POST /products

   - GET /products/[id]
   - PATCH /products/[id]
   - DELETE /products/[id]

   - POST / profile[cart]
   - PATCH / profile[cart]

<p>
 <img src="https://user-images.githubusercontent.com/112858862/212770392-86ea4911-6478-4c94-8764-c20bade47547.png" />
</p>

4. How to get Started ?

- (1): Create Backend Data
- (2): Create Redux Logic
- (3): Create TSX Component

- [Create backend Data](./my-app/db.json)

- Create Redux
- How many reducers do we need ? : 2
- How many store do we need ? : 1
- create all the files


# Admin Login Creds
Email: faizalsid123@gmail.com
Password: Faizal@123