My Process
I created, with the help of senior engineers Yihua Zhang and Andrei Neagoie, a fully functional eCommerce website featuring fine Italian-inspired menswear. The site employs React class and functional components, React hooks, Sass and eventually styled components. I used Redux to be able to use state throughout the app to feed data to components without having to "prop drill". The payment processing employs Stripe integration, and the database is a Firebase Firestore. Authentication was done with OAuth2.
System Design
Folder Structure
This is the folder structure I used to construct this project. I seperated all components into their own folder with their associated style file, which are written as styled components. Alternatively, the pages folder contains the jsx files for each page, and the styles are written is Sass. Firebase has its own folder with a utility file for database setup. Redux files are seperated into their own folders, which contain the actions, reducers, selectors, types and utility files.
Code Snippets
This is the collection item component. It takes in item and addItem as props, destructures image, price and item name from the item prop, and uses that data to return a collection item. It also has a button that adds the item to the user's cart, which uses the addItem prop.