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 Aug 11, 2023)
- Products Display.
- Products Filter.
- Infinite Scroll.
- 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/jp-quintana/react-shopping-cart.git
cd react-shopping-cart
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 run dev
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.
(Can be found in App.jsx in src folder)
Important: comment out all admin routes before deploying app as firestore rules are not configured yet. Commented out lines in image above currently do not work even though components are found in project.
Create new user in the app and add "isAdmin: true" to corresponding user doc in firestore.
Use "dummy-products.json" file in data folder as guide for your own data. At the moment you must add each image manually to the cloud storage as shown above and afterwards add the corresponding links to the json file. Once you've added your data, change file name to "products.json".