React and Firebase eCommerce Site Walkthrough

eCommerce Site Walkthrough:

I posted a couple weeks ago with a simple shopping cart in React and Firebase. Since that time, I have been working at completing the site and now it is a mostly-functional photography commerce site. Instead of providing a tutorial, I thought it would be better to show you the path an item takes from being added to the cart, to being purchased, and finally creating a photo order utilizing Pwinty’s API along with all the relevant code. I’m still new to this, so if you have any comments or suggestions, please feel free to chime in on the discussion. The site is not complete yet and you will not be creating any actual orders, so please feel free to follow along with each step described below (and let me know if you hit any snags). For the newbie, like I am, this post will help you if you are trying to accomplish any of the following:

• Pass state from child components to parent components
• Authenticate users and save their state for subsequent login events.
• Create a simple back-end database for a site using Firebase’s Firestore
• Trigger back-end Firebase Functions on database updates
• Choosing the right function to use

For those of you who want to see the cart in action before reading, please visit Green Owl Photography.
For those of you who want to give me a job, please visit my Portfolio.
If you are interested in the Shopping Cart Code, this is also posted on GitHub.
The Firebase Function that is called on any DB update can be seen here, it is long and heavily commented, so I didn’t want to break the flow and put it inside the walkthrough.

I don’t want to get into too many details on the Firebase Functions for creating a Pwinty Order, that deserves a post on it’s own. Once I have integrated Stripe payment into the sandbox, I’ll be making a whole post on using Firebase Functions to create the Pwinty order and process payment! If you want, you can go to my site and follow along with each list item and see if you can break something (if you do, please tell me).

1. To get yourself familiar with the structure of the project, there is a main app that acts as the store, an order processing page that guides you from login to payment, and all the pages necessary to get you to checkout. OrderProcessing.js and all the pages that route you to submission of your order are on GitHub.
2. Go to either Large Format or Small Format pages and add a couple items to your cart. This just updates a global state in the app that will be passed as a prop into the OrderProcessing.js file.
3. Go to the cart section of the page, this is where you will be asked to login. Choose the login method of your choice. If you want to learn about OAuth using Firebase, I recommend checking out Firebase’s YouTube video here. The code is super easy, see below!

4. Behind the scenes, the app is listening for the Authorization state to change. Once this happens, it updates the Firestore database with your cart information.

5. The first page you come to is the “Shopping Cart". Here you can choose the size, type, and quantity of the items you selected above. Each change is immediately sent to the DB for updating, it is kind of a waste, but I don’t think sending a little bit of text will ruin bandwidth. The inner workings of the shopping cart have a post on their own, with sharing of the state between the child components with their parents and grandparents. Because the shopping cart can go over the page, I have implemented a scroll lock on the single page scrolling that can be turned on by clicking inside the cart, and unlocked by clicking outside the cart.
6. Any changes to your cart will call the Firebase Function to see if anything needs to happen. If only images are added, removed, or adjusted, Firebase will not call any functions!
7. Once you have updated all your products, you are sent to a review order page that will let you go back to the cart, if necessary. This page also shares the subtotal of the items in your cart. Here is the render component:

8. Your next page will be where you add shipment details. The validation of the form is pretty rough, it only checks to see if the user left anything blank. I would likely spend more time bolstering that if I deploy this out of the sandbox. One cool thing I did is allow the user to update their “Default" address. I did this by sending a Boolean value that is true if you click the lower button to update default.

9. Once the DB sees that you have entered shipment information, it will create your Pwinty order. On the front-end, I will not let the client show the Payment page until the parent state receives your Pwinty Order ID. I had some pretty wild errors when I was moving too fast and sometimes it can take a couple of seconds to create your Pwinty order. The full code can be seen in the OrderProcessing.js file on GitHub.

10. Oh boy, now you are here. After a moment, the waiting on the clouds page should disappear and you should be seeing your Pwinty Order ID at the top of the page and a “Promise You’ll Pay" button. Once you click that button, your order is validated and the order is processed on Pwinty. This is where your images are sent to Pwinty, I don’t want to send images before this point because I don’t want to wreck Pwinty’s bandwidth.

11. Once I implement payment, I will only update the validation of your order once payment is verified on the back-end . Based on my uneducated opinion, updating and allowing for this item to be validated on the front end is asking for trouble.
12. For the purpose of this walkthrough, I have disabled the Pwinty function calls. I don’t need them to get mad at me for having (hopefully) hundreds of calls to their DB. Instead each order is returned with a random number for an order ID after a five-second timeout.
13. Now that you have completed your order, you are rerouted to the Review Orders page. If you wait a short minute, details of your order will be displayed.