Fireshop

Fireshop is a webshop built on firebase and the Angular framework.

Note: Fireshop is in active development and shouldn't be used in a production environment.

Supports

• Multilingual
• Universal Rendering (SSR)
• PWA
• Stripe Checkout
• Offline
  • Browsing
  • Cart
  • Checkout
• Lazy Image Loading
• Google Analytics
• CI/CD (with CircleCi)
• Guess.js
• Prettier

Setup

• Fork this repository
• Create a firebase project
• Replace environment variables in firebase
• Add cors configuration for your storage bucket. The below is an example of how this looks for https://fireshop.jaspero.co.

  [
    {
      "origin": ["https://fireshop.jaspero.co", "https://fireshop.admin.jaspero.co"],
      "method": ["GET"],
      "maxAgeSeconds": 3600
    }
  ]
  

  Create a cors.json file with the above configuration and run gsutil cors set cors.json gs://jaspero-site.appspot.com, replacing jaspero-site with the name of the bucket you'll be using.

CMS

An example deployment of the cms can be found here. You can use the credentials below to login with a read only account.

Property	Value
Site	https://fireshop.admin.jaspero.co
Email	[email protected]
Password	example

Project Structure

Client

The client application is split in to three main segments dashboard, shop and shared. Dashboard and shop represent the administrator dashboard and the client facing web shop respectively and the shared folder holds any code shared between the two.

Firestore Structure

Authorization

A lot of CRUD operations are limited to admin access. You can read the full set of rules under firestore.rules. To add an admin claim to an account add the account email to the roles array in the settings/user document.

role

{
    "email": {
        "type": "string"
    },
    "role": {
        "type": "string"
    }
}

note: This document needs to exist before the user is created.

Products

Categories

Adding a language

SEO

• Human readable URL - In order to get human readable URL-s the product ID should be the URL. This is because firebase only allows loading of a single document by ID.

Stripe Integration

1. Create a webhook and point it at [jour-domain]/stripe/webhook.
2. Connect payment_intent.succeeded and payment_intent.payment_failed events for the webhook.
3. Added the stripe webhook secret to your integrations environment variables.

Feature Branches

feature/mail-chimp

Creates a MailChimp account for every new user if the users email isn't listed already.