Shopping cart app built with React and Firebase. Currently WIP.
This app is a clone of https://alphaleteathletics.com.
flaakko-latest.mp4
(Version in video deployed Jul 10, 2023)
- Products Display.
- Cart Functions.
- Basic Inventory Management.
- Auth (Email/Password & Anonymous).
- Mock Checkout Page.
- User orders & addresses.
Check issues tab.
- Step 1: Clone Repository and Install Packages.
git clone https://github.com/top-comengineer/shopping-cart.git && npm install
- Step 2: Create firebase-config.js file inside src/firebase directory.
export const firebaseConfig = {
apiKey: '',
authDomain: '',
databaseURL: '',
projectId: '',
storageBucket: '',
messagingSenderId: '',
appId: '',
};
- Step 3: Start the development server.
npm start
Create products and users collections and carts, checkoutSessions and orders ones optionally.
Product collection holds both variants and skus collection.
- collection: must match one of the allowed skus in CollectionPage component.
- price: sets actual price. Variant doc handles discount logic.
Each variant represents a different color.
- productId: should hold parent doc id.
- images: same id as folder which contains corresponding variant image in cloude storage. And src should be the link provided by cloud storage when uploading corresponding image.
- variantPrice: should hold a number equal or less to product price. If variantPrice < price, then the product variant will be showed as "on sale" in UI.
Although these docs are children of product doc, skus are specific to the product variant, not the product itself. Say for example, if variant has 5 sizes, there should be 5 sku docs, each one representing a different size. If the product has 2 colors, each with 5 sizes, you need to create 10 sku docs.
- productId: should hold parent doc id.
- variantId: should hold corresponding variant doc id.
- value: this is the sku value. It's currently not used in the app itself. App uses the sku doc id generated by firebase.
Each image should be stored in a folder with a name that corresponds to its respective ID. Aditionally each image folder should be stored in the "product-images" repository. The "src" is obtained by clicking the link inside the red rectangle. See image above and the one in Variants Subcollection section.