Deliverables
Full Stack Application
Deployment with Firebase
Goals
The purpose of this project was to gain further practice with full stack development. Applying my front-end experience I was able to create a clone of Amazon's interface and mimic the exact user experience while navigating the application. Furthermore, I was able to implement Context APIs, Firebase, and Stripe to allow the user to make a fully functioning transaction that communicates to the back-end.
Features
Context API
By wrapping the application in a context provider with an assigned initial state and reducer, I am able to track the current user's basket and push/pull data from any component.
Firebase Authentication
Login system was implemented using Firebase Authentication Service allowing tracking of the logged in user. The user’s account is then stored in the context API for their information to be pulled when needed.
Payments via Stripe
Using libraries stripe-js and react-stripe-js, I was able to link my application to their service and was provided a card element that handles error detection on input. To obtain the client secret for each transaction, I used a Firebase Cloud Function to setup the back-end for the request.
Firebase Cloud Functions
First, I setup Express.js to run on the cloud function and linked the stripe test key. After setting up the back-end API (config & middleware), I created my first route which was a post request to retrieve the client secret from Stripe through a payment intent.
Finalizing Payment
On every basket change, I sent an axios request to retrieve a new client secret. After the card information is entered, I sent the payload to stripe along with the client secret and payment method.
Firestore
Initializing Firestore allowed me to keep a collection of users and their order history. With this I am able to create new entries and retrieve their orders from a current snapshot of the database collection.
Deploying with Firebase
Through the command line I was able to deploy the firebase cloud function and link the new URL to the application. Finally, I deployed the app with firebase hosting and the link was provided.
