GitHub - aayushpandya/cobblr: This repository contains codebase for the Cobblr website, e-commerce platform where customers can browse and purchase a wide range of shoes. (original) (raw)

Our proposed project is Cobblr which represents a shoe retail company. The goal of this project is to develop an online website for a shoe retail business. The website will serve as an e-commerce platform where customers can browse and purchase a wide range of shoes. The primary objective is to create an engaging and user-friendly online shopping experience that showcases the footwear collection and drives sales. Cobblr recognizes that fashion knows no bounds and seeks to create a seamless online experience for individuals of all ages and fashion preferences. The website aims to provide a curated collection of classy and trendy shoes that resonate with contemporary boys and girls who actively follow fashion trends and value expressing their individuality through their choice of footwear.

Authors

Deployment

Getting started

Pre-requisites

Frontend and Backend Deployment

Built With

Sources Used

frontend/src/views/AdditionalProductDetail/index.js

frontend/src/views/Admin/AvailableQuantitiesModal.js

frontend/src/views/Admin/ImageModal.js

frontend/src/views/Admin/index.js

frontend/src/views/BillingDetails/index.js

frontend/src/views/ContactUs/ContactUs.js

frontend/src/views/CustomerReviews/DisplayReviews.js

frontend/src/views/ForgotPassword/index.js

frontend/src/views/FAQ/index.js

frontend/src/views/HomePage/Footer.js

frontend/src/views/HomePage/index.js

frontend/src/views/HomePage/MyCarousel.js

frontend/src/views/HomePage/shop.js

frontend/src/views/Login/index.js

frontend/src/views/OrderConfirmation/index.js

frontend/src/views/Payment/PaymentPage.js

frontend/src/views/ProductDetail/index.js

frontend/src/views/Profile/index.js

frontend/src/views/Register/index.js

frontend/src/views/ShoppingCart/index.js

frontend/src/views/SimilarProducts/index.js

frontend/src/views/Stores/index.js

frontend/src/views/Wishlist/index.js

<Accordion></Accordion>
<AccordionSummary></AccordionSummary>
<AccordionDetails></AccordionDetails>
<Alert></Alert>
<Box></Box>
<Button></Button>
<Container></Container>
<Card></Card>
<CardActions></CardActions>
<CardContent></CardContent>
<CardMedia></CardMedia>
<Carousel></Carousel>
<Chip></Chip>
<Col></Col>
<Dialog></Dialog>
<DialogActions></DialogActions>
<DialogTitle></DialogTitle>
<DialogContent></DialogContent>
<Dropdown></Dropdown>
<Grid></Grid>
<Link></Link>
<List></List>
<Modal></Modal>
<Navbar></Navbar>
<Paper></Paper>
<RadioGroup></RadioGroup>
<Row></Row>
<Snackbar></Snackbar>
<Select></Select>
<ToastContainer></ToastContainer>
<Toast></Toast>
<TextField></TextField>
<Typography></Typography>

frontend/src/views/Payment/index.js

Lines 9 - 20

const PaymentContainer = () => {
  const location = useLocation();
  const params = location.state?.params;

  return (
    <>
      <Elements stripe={stripePromise}>
        <PaymentPage details={params} />
      </Elements>
      <Footer />
    </>
  );

backend/app/components/filter/filter.route.js

Lines 13 - 18

router
  .route("/filterShoes")
  .post(
    validate(filterValidation.filterShoes),
    filterController.filterShoes.bind(filterController)
  );

The code above was created by adapting the code in MDN Web Docs as shown below:

// Home page route.
router.get("/", function (req, res) {
  res.send("Wiki home page");
});

backend/app/components/shoes/shoes.model.js

Lines 4 - 24

const Shoe = new Schema(
  {
    code: { type: String, required: true, unique: true },
    name: { type: String, required: true },
    subText: { type: String, required: true },
    shortDescription: { type: String, required: true },
    price: { type: Number, required: true },
    color: { type: String, required: true },
    availableQuantity: [{ size: String, quantity: Number }],
    images: [{ name: String, data: String }],
    briefDescription: { type: String, required: true },
    brand: { type: String, required: true },
    tags: [String],
    category: { type: String, required: true },
    gender: { type: String, required: true },
    type: { type: String, required: true },
    material: { type: String, required: true },
    availability: { type: Boolean, required: true },
  },
  { timestamps: true }
);

backend/app/components/shoes/shoes.validation.js

Lines 5 - 26

const validationSchema = {
  _id: Joi.string().min(1).required(),
  _ids: Joi.array().items(Joi.string()),
  code: Joi.string().min(1).required(),
  name: Joi.string().min(3).max(100).required(),
  subText: Joi.string().min(3).required(),
  shortDescription: Joi.string().min(3).required(),
  price: Joi.number().min(3).max(10).required(),
  color: Joi.string().min(1).max(100).required(),
  thumbnail: Joi.string().min(3),
  sizes: Joi.array().items(Joi.string()),
  quantity: Joi.array().items(Joi.number()),
  images: Joi.array().items(Joi.string()),
  briefDescription: Joi.string().min(3).required(),
  brand: Joi.string().min(3),
  tags: Joi.array().items(Joi.string()),
  category: Joi.string().min(1).required(),
  gender: Joi.string().min(1).required(),
  type: Joi.string().min(1).required(),
  material: Joi.string().min(1).required(),
  availability: Joi.boolean().required(),
  sortValue: Joi.string()
    .valid("sort1", "sort2", "sort3")
    .default("sort1")
    .required(),
  selectedFilters: Joi.object().pattern(/^.*$/, Joi.string()),
  currentPage: Joi.number().default(1).optional(),
  searchKeyword: Joi.string().allow("", null).optional(),
  pageChangeType: Joi.string().allow("", null).optional(),
};

backend/app/components/wishlist/wishlist.validation.js

const validationSchema = {
  _id: Joi.string().min(1).required(),
};

Additional packages

Images

Icons

All icons are adapted from React Material Icons Library

Acknowledgement

The UI has been inspired from Nike