GithubHelp home page GithubHelp logo

alexabbott / firebase-cms Goto Github PK

View Code? Open in Web Editor NEW
311.0 25.0 125.0 5.68 MB

A CMS + E-commerce platform built with Angular and Firebase

Home Page: https://fir-cms-76f54.firebaseapp.com/

License: MIT License

TypeScript 62.46% JavaScript 4.83% HTML 22.82% SCSS 9.89%
cms firebase angular stripe e-commerce storefront blog ecommerce

firebase-cms's People

Contributors

alex-bynd avatar alexabbott avatar angular-cli avatar ankemp avatar sergiowilson2500 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

firebase-cms's Issues

Search Engine Optimization & Performance

Some improvements could be made to support SEO. Maybe using an extension such as:
https://github.com/vinaygopinath/ng2-meta

SEO:
http://tools.neilpatel.com/en/analyze/https%3A%2F%2Ffir-cms-76f54.firebaseapp.com%2F

  • missing meta data
  • missing heading tags
  • missing share tags for social networks

Structured data results:
https://search.google.com/structured-data/testing-tool#url=https%3A%2F%2Ffir-cms-76f54.firebaseapp.com%2F

  • missing all

Pagespeed results:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Ffir-cms-76f54.firebaseapp.com%2F

  • looks good

Lighthouse results:
https://developers.google.com/web/tools/lighthouse/

  • Progressive Web App issues
  • Performance issues

Cannot find namespace 'firebase'

Hi what do think about

ERROR in C:/Users/MAREUIL/backend/firecms/firebase-cms-master/src/app/storefront-components/product/product.component.ts (22,20): Cannot find namespace 'firebase'.
ERROR in C:/Users/MAREUIL/backend/firecms/firebase-cms-master/src/app/storefront-components/cart/cart.component.ts (20,20): Cannot find namespace 'firebase'.
ERROR in C:/Users/MAREUIL/backend/firecms/firebase-cms-master/src/app/storefront-components/cart-icon/cart-icon.component.ts (14,20): Cannot find namespace 'firebase'.

Best regards

Cannot read property 'length' of undefined

I always get this error when trying to launch the project:

Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at createSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:12614:110)
    at parseSourceFileWorker (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:12546:26)
    at Object.parseSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:12472:26)
    at Object.createSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:12313:29)
    at VirtualFileStats.getSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\@ngtools\webpack\src\compiler_host.js:66:35)
    at WebpackCompilerHost.getSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\@ngtools\webpack\src\compiler_host.js:242:38)
    at findSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70693:29)
    at processImportedModules (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70860:25)
    at findSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70741:17)
    at processImportedModules (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70860:25)
    at findSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70741:17)
    at args (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70630:85)
    at getSourceFileFromReferenceWorker (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70603:34)
    at processSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70630:13)
    at processRootFile (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70484:13)
    at C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:69676:60

environment files are created and project is configured according to the README file.

Firebase Data

Hello,

when I paste my firebase config keys and run the project it only showing cart and sign in as well as nothing to show in admin panel to add products ! when I paste your Firebase keys

export const environment = {
    production: false,
    firebase: {
        apiKey:"AIzaSyD9c0w1NE_-LCZ0fbaP0dcp-jiaFKE4mBI",
        authDomain:"fir-cms-76f54.firebaseapp.com",
        databaseURL:"https://fir-cms-76f54.firebaseio.com",
        projectId:"fir-cms-76f54",
        storageBucket:"fir-cms-76f54.appspot.com",
        messagingSenderId:"1065458841365"
    },
    stripe: "pk_test_dMX8aZtfZSl4ZQ5W2kf7Af7l"
  };

It works smoothly ! can you provide Json file of Database ? So i can import it to the My firebase Project !

Error in Funsctions & Storage

Getting error 403 in Firebase Storage as well as getting error in firebase funcions
ReferenceError: error is not defined at admin.database.ref.once.then.then.then.then (/user_code/index.js:78:32) at process._tickDomainCallback (internal/process/next_tick.js:135:7)

Here is the Actual Code
// Add a payment source (card) for a user by writing a stripe payment source token to Realtime database
exports.addPaymentSource = functions.database
.ref('/stripe_customers/{userId}/sources/{pushId}/token').onWrite((change, context) => {
const source = change.after.val();
if (source === null){
return null;
}
return admin.database().ref(/stripe_customers/${context.params.userId}/customer_id)
.once('value').then((snapshot) => {
return snapshot.val();
}).then((customer) => {
return stripe.customers.createSource(customer, {source});
}).then((response) => {
return change.after.ref.parent.set(response);
}, (error) => {
return change.after.ref.parent.child('error').set(userFacingMessage(error));
}).then(() => {
return reportError(error, {user: context.params.userId});
});
});

Cannot progress to 'confirm order' screen

Hey Alex,
Love this CMS. I just pulled it down and built it, but in both my local version and the demo app, at the confirmation screen, the Stripe spinner never fetches any information from stripe and keeps spinning infinitely. It just hangs on 'verifying payment method'.

Any clue as to what it is?
It appears to validate the card correctly in test mode, as using a non-test card will throw an error.

Vulnerabilities in Firebase Database Rules

In addition to issue #10 and as evident from this report there are two security issues with the current Firebase Database Rules:

  1. Attackers can obtain Admin privileges and manipulate users' data by arbitrarily write to /admins and /users.
  2. Anyone can read /products. I'm not sure it's an issue.

Firebase Deploy Issue

When i executed firebase deploy --only functions terminal gave me an error like import * as functions from 'firebase-functions';

So this won't work properly.

Can you please more understandable and readable ReadMe.md file for this project? Maybe you can add more screenshots or how to videos too.

Migration to angular 6+ ERROR TS2307

I needed to migrate the app to angular 6+ in order to use @ng-select https://www.npmjs.com/package/@ng-select/ng-select

This migration has been problematic, current issues when using ng-serve
Error TS2307

ng serve throws error TS2307 for every custom module non node-modules under app/...
this was the case with angular 6 aswell

outdated unsupported depencencies

//these depend on @Angular5 as the latest
import { CKEditorModule } from 'ng2-ckeditor';
import { DndModule } from 'ng2-dnd';

Resolved many of them by removing ````javascript 'app/ or adding ```javascript ./

src/app/admin/admin-routing.module.ts(4,32): error TS2307: Cannot find module 'app/admin/admin-components/admin/admin.component'. 

But I still only get the issues for modules that are children of app/admin or app/storefront
Another unresolved error

src/app/storefront-components/checkout-shipping/checkout-shipping.component.ts(54,13): error TS2345: Argument of type '{ duration: number; extraClasses: string[]; }' is not assignable to parameter of type 'MatSnackBarConfig<any>'.
  Object literal may only specify known properties, and 'extraClasses' does not exist in type 'MatSnackBarConfig<any>'.
src/app/storefront-components/login/login.component.ts(44,96): error TS2339: Property 'take' does not exist on type 'Observable<{}>'.

This is what I did so far
migrated to angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "testapp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/testapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "src/variables.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/scss"
              ]
            },
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "testapp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "testapp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "testapp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "testapp-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "testapp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "testapp:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "testapp"
}

Migrated to @Angular/fire

// Migrated to from @angularfire2 to @angular/fire //
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireAuthModule } from '@angular/fire/auth';

//Migrated theming //
@import "~@angular/material/_theming.scss";

Converted Md format into Mat type

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {
    MatButtonModule,
    MatNativeDateModule,
    MatInputModule,
    MatDatepickerModule,
    MatCardModule,
    MatSnackBarModule,
    MatSlideToggleModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatDialogModule,
    MatGridListModule,
    MatIconModule,
    MatSelectModule,
    MatOptionModule,
    MatCheckboxModule,
    MatMenuModule,
    MatProgressSpinnerModule
} from '@angular/material';

const components = [
    CommonModule,
    MatButtonModule,
    MatCardModule,
    MatDatepickerModule,
    MatDialogModule,
    MatCheckboxModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatOptionModule,
    MatSelectModule,
    MatSidenavModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatToolbarModule,
    MatProgressSpinnerModule
];

@NgModule({
    imports: components,
    exports: components
})

export class MaterialComponentsModule { }

Current Packagelock.json

{
  "name": "firebase-cms",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "hashcode": "node scripts/hashcode.js",
    "deploy": "ng build --prod; firebase deploy",
    "build-static": "node scripts/static-generator.js",
    "deploy-static": "ng build --prod; node scripts/static-generator.js; mv static/* dist/; firebase deploy"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.1.2",
    "@angular/cdk": "7.1.1",
    "@angular/common": "7.1.2",
    "@angular/compiler": "7.1.2",
    "@angular/core": "7.1.2",
    "@angular/forms": "7.1.2",
    "@angular/http": "7.1.2",
    "@angular/material": "7.1.1 ",
    "@angular/platform-browser": "^7.1.2",
    "@angular/platform-browser-dynamic": "^7.1.2",
    "@angular/router": "^7.1.2",
    "@ng-select/ng-select": "^2.13.1",
    "@angular/fire": "5.1.1",
    "core-js": "^2.4.1",
    "enhanced-resolve": "^3.3.0",
    "firebase": "^5.5.0",
    "hammerjs": "^2.0.8",
    "ng2-ckeditor": "1.2.2",
    "ng2-dnd": "5.0.2",
    "rxjs": "6.3.3",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "^7.1.2",
    "@angular/compiler-cli": "^7.1.2",
    "@angular/language-service": "^7.1.2",
    "@angular/service-worker": "7.1.2 ",
    "@types/ckeditor": "^0.0.34",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^8.0.19",
    "cheerio": "^1.0.0-rc.2",
    "codelyzer": "4.5.0",
    "fs": "0.0.1-security",
    "inquirer": "^3.2.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "mkdirp": "^0.5.1",
    "nightmare": "^2.10.0",
    "protractor": "~5.1.2",
    "ts-node": "^3.3.0",
    "tslint": "^5.5.0",
    "typescript": "3.1.6"
  }

Angular version and node version

Angular CLI: 7.1.2
Node: 8.9.4
OS: win32 x64
Angular: 7.1.2
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.2
@angular-devkit/build-angular     0.11.2
@angular-devkit/build-optimizer   0.11.2
@angular-devkit/build-webpack     0.11.2
@angular-devkit/core              7.1.2
@angular-devkit/schematics        7.1.2
@angular/cdk                      7.1.1
@angular/fire                     5.1.1
@angular/material                 7.1.1
@ngtools/webpack                  7.1.2
@schematics/angular               7.1.2
@schematics/update                0.11.2
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

Ng serve results

chunk {admin-admin-module} admin-admin-module.js, admin-admin-module.js.map (admin-admin-module) 1.45 MB  [rendered]
chunk {main} main.js, main.js.map (main) 268 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 8.83 kB [entry] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 9.38 MB [initial] [rendered]

//Followed by errors outlined above //

Security, Pen Testing & Scaling

Need to check:

  • Inputs are sanitized/escaped (no xss)
  • File uploads are restricted to safe formats
  • CSP whitelist (only allow specific domains)
  • User/admin permissions are correct, no holes
  • Firebase read/write rules are correct, no holes
  • Firebase data schema is scalable (don't load whole lists at once, structure into separate lists)
  • Application can scale on firebase hosting, email sending, uploads
  • Estimate costs at scale, compared to static hosting, and Python hosting

Separate admin and store UI's in different projects

Why:

  • Allow easier store customisation and different templates.
  • Admin and public UI are separate scopes really.
  • Multiple store fronts for the same admin

How:

  • Use git submodule to share related code.
  • own repositories

Payment issue

addPaymentSource TypeError: Cannot read property 'val' of undefined at exports.addPaymentSource.functions.database.ref.onWrite.event (/user_code/index.js:70:28) at Object. (/user_code/node_modules/firebase-functions/lib/cloud-functions.js:112:27) at next (native) at /user_code/node_modules/firebase-functions/lib/cloud-functions.js:28:71 at __awaiter (/user_code/node_modules/firebase-functions/lib/cloud-functions.js:24:12) at cloudFunction (/user_code/node_modules/firebase-functions/lib/cloud-functions.js:82:36) at /var/tmp/worker/worker.js:728:24 at process._tickDomainCallback (internal/process/next_tick.js:135:7)

Service worker code caching

angular/service-worker is a good option to cache files for returning users.
angular.io source code provides nice way to update service worker on navigation event.

Something along the lines of https://github.com/angular/angular/blob/master/aio/src/app/sw-updates/sw-updates.service.ts and RefresherService

import { SwUpdatesService } from '../modules/sw-updates/sw-updates.service';
import { Injectable, OnDestroy } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { LoggerService } from './logger.service';
import { Subject } from 'rxjs/Rx';

@Injectable()
export class RefresherService implements OnDestroy {
    private swUpdateActivated = false;
    private unsubscribe: Subject<void> = new Subject();

    constructor( router: Router, swUpdatesService: SwUpdatesService, private logger: LoggerService) {
        swUpdatesService.updateActivated
        .takeUntil(this.unsubscribe)
        .subscribe( () => this.swUpdateActivated = true);

        router.events
        .takeUntil(this.unsubscribe)
        .filter( event => event instanceof NavigationStart )
        .subscribe( (event: NavigationStart) => {
            if (this.swUpdateActivated) {
                this.log(`Update during navigation ${event.url}`);
                window.location.assign( event.url );
            } else {
                this.log(`No need to update on navigation: ${event.url}`);
            }
        })
    }

    private log( message: string): void {
        this.logger.log('Service Worker Refresher', message);
    }

    public ngOnDestroy() {
        this.unsubscribe.next();
        this.unsubscribe.complete();
    }
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.