React Shopping Cart

Shopping cart app built with React and Firebase. Currently WIP.

This app is a clone of https://alphaleteathletics.com.

App Preview

https://github.com/jp-quintana/react-shopping-cart/assets/87621233/acd29c18-a98f-49e8-a3f6-7841d5e3490f

(Version in video deployed Aug 11, 2023)

Features

• Products Display.
• Products Filter.
• Infinite Scroll.
• Cart Functions.
• Basic Inventory Management.
• Auth (Email/Password & Anonymous).
• Mock Checkout Page.
• User orders & addresses.

Future additions

Check issues tab.

Installation

• 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

Setup Firebase Project

Firestore

Create products and users collections and carts, checkoutSessions and orders ones optionally.

Products Collection

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.

Variants Subcollection

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.

Skus Subcollection

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.

Cloud Storage

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.

Admin View

(Can be found in App.jsx in src folder)

Note

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.

Seed Data to Firebase

Setup Admin

Create new user in the app and add "isAdmin: true" to corresponding user doc in firestore.

Data

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".

Authors

• @jp-quintana