akarx23 / e-commerce Goto Github PK

On the product page I have added a button at the corner of every page to download the image. Initially, when I used static images from the folder, it was downloaded. But when I started using the URLs from Cloudinary the download button just opens the image in some other tab.

I did some research and got to know that cross domains download don't work. I need a way to work around that.

When the user has uploaded a product, he is shown a link to the my products section. However, the styling of the link is different in development and production mode.

Production mode

Development mode

The loading state animation is all right. But the backdrop doesn't show up in production mode.

This is the production mode loading

This is the development mode loading. There is a slight blackish background at the back

If the difference is not so subtle, you are welcome to try it on your own once. You will see the difference.

This is the CSS for the backdrop

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 50%;
  background: black;
}

Some of the styles have not been loaded during the production mode. You can see the difference below.

This is the production mode image of the custom modal

This is the development mode image of the custom modal

The carousel effect is kind of laggy on the home page. I don't know if it's because of the scrolling event listeners for the search bar and the load-more items at the bottom. The rest of the app is pretty smooth. Just the home page

When I upload multiple images for the product, sometimes all images are not parsed although files are taken as input. The corrupted files only occur towards the last files.

This is the code for reading these multiple files in a base64 format

let imagePreviews = []; // Array to store the base64 encoded strings

newFiles.forEach((file, i) => { // newFiles are the files we get from the user as input
  const reader = new FileReader();

  reader.onload = (e) => {  // reading the base64 strings and pushing it to the array
    imagePreviews.push(reader.result);
  };

  reader.onloadstart = () => { // to set the state of image reading. This displays a loading icon on the upload button
    setImageRendering(true);
  };

  reader.onloadend = () => { // Runs after each file load
    if (i === newFiles.length - 1) { // When the last file has been read, the new images are appended with the images user has already uploaded.
      setImages([...images, ...imagePreviews]);
      setFiles([...files, ...newFiles]);
      setImageRendering(false);
    }
  };

  reader.readAsDataURL(file);
});

I don't know what's wrong. This is the basic process to read these files. The files which couldn't be read before would be read without any problems if uploaded again.

The address inputs are arranged in a flex grid so that they adjust according to the width of the screen. But as we type in the address box the icons also over-flow. This does not happen in the other inputs. And if the same address input is normally put like others then it behaves normally.

Below you can see that the mobile field icon doesn't disappear on overflowing. But the street field does. Also when the input in street is erased the icon doesn't come back again.

I want the search-bar to always remain on the home page even when the user scrolls. So I pinned it using react scroll-magic. Problem is that when the header comes down it covers the search bar if it's pinned. So I added some offsets and CSS animation when the header comes down and goes up.

// The event listener added when the component mounts
window.addEventListener(
  "scroll",
  () => {
    var currentScrollPos = window.pageYOffset;
    if (
      currentScrollPos < prevPos &&
      currentScrollPos > 10 &&
      this.state.searchPushDown === false
    ) {
      this.setState({ searchPushDown: true });
    } else if (
      currentScrollPos > prevPos &&
      this.state.searchPushDown === true
    ) {
      this.setState({ searchPushDown: false });
    }
    prevPos = currentScrollPos;
  },
  { passive: true }
);

// The search bar form 
<form className={`w-full z-30 sm:justify-center justify-end sm:items-stretch sm:flex-row flex-col items-center flex transition-all duration-500 ease-out delay-75 ${
 this.state.searchPushDown === true
? "searchBarPushDown"
 "searchBarPushUp"
}`}
onSubmit={(event) => this.handleOnSubmit(event)}
>

// CSS for the change in position

.searchBarPushDown {
  transform: translateY(100%);
}

.searchBarPushUp {
  transform: translateY(0%);
}

The state of the animations is set on scroll and the classes are set. But still it isn't very smooth when we scroll to the top as it takes some time for the search bar to fall back into position.

I had a hard time using scrolling animations in this project. I went for react scroll-magic and gsap. But they didn't quite fully work for me. Basically, I want to do stuff when a particular element comes into the screen view. Like the infinite scroll.

I wanted the header to scroll-into-view when the user scrolled some set number of pixels above. But that doesn't seem to work out. It would be great if someone could guide me through it.

I used React-Reveal which was peace but I cannot trigger functions when an element scrolls into view with that. Same with the animate-on-scroll library.

If someone could suggest me better libraries for scrolling it would be great.