Responsive E-commerce Product Page Using ReactJS

(I apologize in advance for the number of questions on this one!)

General Questions

• How do you go about structuring your SCSS? I have realized I do not always do it the same way. Do you nest everything inside of the highest parent div (even media queries)? Or do you treat it similarly to CSS?

• If you are a React developer, when do you decide to split your application (or component) into components?

• Follow up to the above question, did I over- or under-split the application?

• Does my code seem like I properly understand how to "pass state upwards" when creating React components with common state variables?

• Is there any reason to ever import an SVG as you would an image rather than as a ReactComponent?

• Do you have any advice for maintaining high loading speeds for applications such as this?

• Is it ok to mix flex and grid utilities a lot, or should your application try to use only one? (I found that they have different uses in some areas in this project)

• Do you have any tips for using Chrome Developer Tools properly to ensure your design is responsive? A few times during this project, I found that my iPhone was displaying the page correctly, while the same iPhone emulated in Google Chrome was showing design flaws.

• How can I improve my file structure? It feels messy, but I would rather learn standards than develop my own (incorrect) way!

Challenge Questions

• How did you go about positioning the control buttons inside of the lightbox?

• How did you manage the different modals and backdrops? This tripped me up for a while because I did not fully understand the onHide property of Bootstrap Modals.

• Is it better to keep the lightbox carousel and the one on the main page on the same index? I split the two because it made me slightly dizzy to see both carousels moving at the same time.