Add Product Image Magnify Feature

[Shubham29012001]

Fix #28

Proposed Change

Implemented Image Magnify feature on the Products page to enrich user experience while shopping for products.

Type of change:

• [x] New feature (non-breaking change which adds functionality)
• [x] This change requires a documentation update

Checklist:

• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review of my own code
• [x] I have commented on my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [ ] My changes generate no new warnings

Additional info (if any):

[netlify[bot]]

👷 Deploy request for tomper-wear pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	d9fee0142daeb835c8f1b6dbcf2c276278ac188a

[varunKT001]

@Shubham29012001 I'm really sorry for such a delay 😕 Now coming to your pull request. You have renamed the .env.sample to .env sample 🙂 Correct the file name to .env.sample. Do this change and I'll review the changes 👍

[Shubham29012001]

Hey @varunKT001, I have renamed the file. Can you please look into it?

[Shubham29012001]

Hey @varunKT001, I have made the image responsive. You can check it out. Along with it, I have performed all the code reviews that were suggested by you in the previous replies. Please have a look at it.

[varunKT001]

Hey @Shubham29012001

It worked fine, but there were still some small issues.

1. The heights of the images were not fixed, so I had to restrict the height using CSS. But due to ReactImageMagnify injecting inline styles (more preferred by the browser) to elements, the CSS styles simply became obsolete. The fix was to simply put !important with the height property.

.main {
   height: 600px !important;
}

2. Class names were not applied to elements after the render. The problem was, that you had put the ClassName prop inside the smallImage property.

<ReactImageMagnify
        {...{
          smallImage: {
--->        className: 'main',
--->        imageClassName: 'main',
            sizes: '(max-width: 576px) 300px, (min-width: 992px) 500px,',
            isFluidWidth: true,
            ....

The correct way to destructure is:

<ReactImageMagnify
        {...{
          className: 'main',
          imageClassName: 'main',
          smallImage: {
            sizes: '(max-width: 576px) 300px, (min-width: 992px) 500px,',
            isFluidWidth: true,
            ....

These were some small fixes, so I did it for you 👍 But I just wanted to let you know that these tiny issues may arrive and are hard to find if you don't test the functionality thoroughly.

Anyways, this library react-image-magnify is awesome and I seriously didn't know about it 😅 Thanks for such a great addition to the website 👍

[Shubham29012001]

Hey @varunKT001, I have used the className and imageClassName but the only mistake I was doing was applying it on smallImage Object. I was able to rectify that if I were somehow able to assign the class to the Image, the problem of size would be solved but I was not able to do it. I am a lot inspired by your work and I recently checked out your portfolio. I was amazed by your skill sir. Are there any resources that you would like to mention for learning MERN perfectly?

[varunKT001]

@Shubham29012001 Don't worry, I too have faced this kind of issue.

And regarding the resources for MERN, there are plenty of them:

1. Youtube
2. Blogs
3. Stackoverflow answers (You'll get to learn a lot from these, believe me)

But the best strategy to master MERN is to make projects. You have enough knowledge of the MERN stack, so just find some awesome idea and implement it on your own. You'll find many issues and hurdles while creating it, and that's where you'll find these awesome youtube channels, blogs, etc. Another method to learn is to look at others' codes. It helps you develop a proper structure about how you should implement stuff. Whenever you are on Github, just go to the trending page. Here you'll find some of the most trending repositories, and there might be a chance that you find something inspiring for yourself.

Well, these are some Youtube channels that I follow:

1. Codedamn
2. Web Dev Simplified
3. Hussein Nasser (for backend stuff)
4. Akshay Saini (for JavaScript concepts)
5. Coding Tech
6. Laith Academy (one-shot tutorials)
7. Wael Yasmina (if you are into 3D and Three.js)
8. React Conf
9. JSConf
10. Fireship (100 seconds of x)

There are plenty of them and I can't mention all of them here. If you find some other awesome channels or blogs, do share it to me also 👍 😄