Full Stack E-Commerce App built with React, using Firebase and Stripe API, deployed with Heroku

Table of Contents

• Built With
• Getting Started
  • Prerequisites
  • Installation
• Screenshots
• Work In Progress
• Future Updates

Built With

and Stripe Payment Gateway

Getting Started

Follow these simple steps to run the project locally:

Prerequisites

• Node.js (latest)

Installation

1. Create an account on Firebase if you have not yet.

2. Refer this link to learn basics of firebase, like how to setup project in React and stuff like that.

3. Create a .env file in the root directory of the project. Add environment-specific variables on new lines in the form of NAME=VALUE by following same structure as provided in env.example file

    REACT_APP_API_KEY=<api_key>
    REACT_APP_AUTH_DOMAIN=<auth_domain>
    REACT_APP_PROJECT_ID=<project_id>
    REACT_APP_STORAGE_BUCKET=<storage_bucket>
    REACT_APP_MESSAGING_SENDER_ID=<sender_id>
    REACT_APP_APP_ID=<app_id>
    REACT_APP_MEASUREMENT_ID=<measurement_id>
    REACT_APP_DATABASE_URL=<database_url>
    
    # Fill the below variable afterwards
    REACT_APP_PUBLISHABLE_KEY=<stripe_publishable_key>

4. Make an account on Stripe and then after login go to dashboard.

5. Now we require the publishable key which can be easily found inside the Developers tab like this

   

   Grab the token and insert it inside REACT_APP_PUBLISHABLE_KEY field in the .env file of yours

6. Install all the dependencies of package.json file by running below command in root directory.

   npm install
   

7. Run the following command in the root directory to start the project

   npm start
   

🥳Viola! Project starts running at localhost:3000

Work In Progress

The app is being updated weekly, as more work needs to be done Current functionality includes:

• Create an account or Sign In with Google
• Sign In
• Add items to Cart
• Remove item/items from cart
• Payment with Stripe (Testing Mode)

Future Updates

• Enable PWA
• Product Page
• Improve Overall UI/UX and fix bugs
• Responsive Design
• Recently Viewed Projects

And More! There's always room for improvement!