Git Product home page Git Product logo

avinash7488 / buylance.com Goto Github PK

View Code? Open in Web Editor NEW

This project forked from faizal-siddiqui/buylance

0.0 0.0 0.0 2.27 MB

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.

Home Page: https://buylance-ecomm.vercel.app/

TypeScript 90.58% CSS 8.49% HTML 0.92%

buylance.com's Introduction

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

Screenshot_20230123_125607

Screenshot_20230123_125648

  1. Login Page / SignUp Page - Sama sarun reddy

    • using (firebase)
    • using api also
  • Signup

Screenshot_20230123_125941

Login

Screenshot_20230123_010003

  1. Products Page with filter - Faizal

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

Products Page

Screenshot_20230123_011246

  1. Category Page - Sama sarun reddy

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

Category Page

Screenshot_20230123_011848

  1. Products Details Page - Faizal

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

Products Details Page

Screenshot_20230123_011522

  1. Cart Page - Avinash

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

    Cart Page

    Screenshot_20230123_011622

  2. Address Page - Rishu raj

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

    Address Page

    Screenshot_20230123_011700

  3. Payment Page - Avinash Singh

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

Payment Page

Screenshot_20230123_011724

  1. Order Summary Page - Karmit Verma

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

    Order Summary Page

Screenshot_20230123_011753

  1. Admin Login - Sama sarun reddy

    • create some different email and password that can only be access by Admin
  2. Admin Dashboard - Faizal

    • Create a dashboard like this present on this link Dashboard

    • Leave proper variables wherever the values are dynamic

Admin Dashboard

Screenshot_20230123_011942

User Details from Admin Site

Screenshot_20230123_012005

  1. 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": "[email protected]",
  "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: [email protected]
Password: Faizal@123

buylance.com's People

Contributors

faizal-siddiqui avatar avinash7488 avatar karmitverma29 avatar samasarunreddy avatar rishuraj99 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.