S-A SHOP

What I made 💁‍♂️

I made a fictional e-commerce web application. You can log in and buy items by credit card on Stripe TEST MODE. Then you can see your purchase history. This is a my first project with React and Redux.

What I used 🔷

1. React/Create React App

I used Create React App to build user interfaces in this web application.

2. Redux

I used Redux to store category data and Redux-Saga to fetch shop, user and information data from Firebase. I used Firebase for Authentication and Firestore to store shop, user and information data. I also used Redux-Persit to keep the user logged in.

3. Sass

I used Sass to design this production.

4. Firebase

I used Firebase for handling the purchase history of users, comments about venues from users, and the recruitment contact form.

5.Stripe

I used Stripe. This way users can purchase the items by credit card on Stripe TEST MODE. The purchase data will be sent to Firebase.

About this production 🥳

I store category data in redux store. And I made the "Directory component". I used the component in Home page and other pages for users to go to each category page easily.

User can add items to the cart, then the user can see the items which the user added and also delete the items and change the quantity. After the user logs in or signs up , the user can go to the Checkout page. The user can delete the items, change the quantity and purchase the items by credit card on Stripe TEST MODE in the Checkout page.

The purchased data will be sent to Firebase, and, you can also visit your own account page and see your purchase history.

What I learned ✅

I learned a lot of things about React, Redux and Firebase while making this web application. First, I used class components. After that, I learned React Hooks, then I replaced class components with functional components. I also learned Context API.

And, I learned how I could integrate Firebase Authentication into Firestore Database. It was a good and cool experience. I also learned what PWA is and how I can make PWA with Create React App. This site is compatible with PWA.

Finally 😎

Making this project was amazing for my developer life. I am sure that I gained certain confidence for React and Redux by making this web application.