This app is a fully functional e-commerce site that utitlizes React in the front-end and Node with MongoDB in the backend. Data is sent via GraphQL over Apollo Server on top of Node while the cart checkout utilizes the Stripe API for making payments.
After initial access, the site fully works offline by making use of the built-in IndexedDB API on browsers.
The link to the deployed site can be found here on Render. It’s a standard shopping cart that requires you to sign up for an account before it let’s you checkout. This site only requires a first & last name, email, and password. NOTE: There are no password requirements like having a specific length or having a certain number of specific characters since this is only a test site though it could be added rather easily.
On a side note: I find that if users can sign up and login to a site they are more likely to come back and purchase more if they don’t have to keep putting in the same information. Some users would even sign up for a subscription if that was an option.
You select an item by clicking on the Add to Cart button. A popup will open in the upper right-hand corner where you can change the quantity or remove the item from the cart. Quick note: the gift items won't proceed to checkout unless another item that needs to be paid for is also included in the cart.
In the cart, you can select Checkout and it will take you to a checkout page where you can add you’re billing information generated by the Stripe API. Since this is setup in test mode, you won’t be able to input a real card number nor would you get a response email after completing the checkout. You can check this functionality by using this card number (don’t worry it’s not a real card number as it’s used by the Stripe API for testing) 4242 4242 4242 4242 and Expiry 12/24. You can put anything for the CVC, Name on Card, and Zip Code and you will get a Success page saying the order has been submitted and it will redirect you to the Order History page showing the date and what you ordered.