Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alexabbott/firebase-cms

A CMS + E-commerce platform built with Angular and Firebase
https://github.com/alexabbott/firebase-cms

angular blog cms e-commerce ecommerce firebase storefront stripe

Last synced: about 2 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/alexabbott/firebase-cms
Owner: alexabbott
License: mit
Created: 2017-07-11T05:26:32.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2023-01-12T08:28:10.000Z (over 1 year ago)
Last Synced: 2024-04-14T10:53:36.114Z (5 months ago)
Topics: angular, blog, cms, e-commerce, ecommerce, firebase, storefront, stripe
Language: TypeScript
Homepage: https://fir-cms-76f54.firebaseapp.com/
Size: 5.55 MB
Stars: 311
Watchers: 27
Forks: 125
Open Issues: 30
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# FirebaseCMS

FirebasCMS is an e-commerce and blogging platform with a storefront and CMS built with Angular 4 (Angular CLI), Firebase (AngularFire2), Angular Material and Stripe. Create, moderate and manage pages, blog posts, products, orders, customers, carts, navigation, themes, admins and more with this web application.

## Demo

* Check out the front end application: https://fir-cms-76f54.firebaseapp.com
* Check out the admin interface: https://fir-cms-76f54.firebaseapp.com/login
* Admin login details: [email protected] / admin123
* This user has an 'editor' role
* All of the data will be reset once a week

## Installation

Install [Angular CLI](https://cli.angular.io/)
```
npm install -g @angular/cli
```

Install NPM packages

```
Run `npm install` or `yarn install`
cd functions/
Run `npm install`
```

## Firebase setup

Create a [Firebase account](https://firebase.google.com/), create a new project, and copy the config code for your project.

Enable Google, Email/Password and Anonymous in the 'Sign-In Method' tab of the Authentication section in your Firebase project Console.

Within the project folder, run:

```
cd src
mkdir environments
cd environments
touch environment.ts
touch environment.prod.ts
```

Open 'environment.ts' and add your Firebase config as follows:

```javascript
export const environment = {
production: false,
firebase: {
apiKey: "xxxx",
authDomain: "xxxxx",
databaseURL: "xxxxx",
projectId: "xxxxx",
storageBucket: "xxxx",
messagingSenderId: "xxxx"
}
};
```

Open 'environment.prod.ts' and add your Firebase config as follows:

```javascript
export const environment = {
production: true,
firebase: {
apiKey: "xxxx",
authDomain: "xxxxx",
databaseURL: "xxxxx",
projectId: "xxxxx",
storageBucket: "xxxx",
messagingSenderId: "xxxx"
}
};
```

## Stripe setup

Create a [Stripe account](https://stripe.com/).

Add your Stripe API Secret Key to firebase config:
```
firebase functions:config:set stripe.token=
```

Open 'environment.ts' and add your Stripe Publishable API Key as follows:

Open 'environment.prod.ts' and add your Stripe Publishable API Key as follows:

## Create SuperAdmin Account

You'll need to manually add your first admin account. To generate a hashcode for it...

1) Run `npm run hashcode` and enter your email. Copy hashcode
2) Create new entry in your firebaseDB under, `/admins//` as follows:

```javascript
admins: {
: {
{
email: '',
role: 'super-admin'
}
}
}
```

3) Create user in firebase user management with same email.

## Email Confirmation setup

1. To allow the app to send confirmation emails through a Gmail account: enable access to [Less Secure Apps](https://www.google.com/settings/security/lesssecureapps) and [Display Unlock Captcha](https://accounts.google.com/DisplayUnlockCaptcha). For accounts with 2-step verification enabled, [Generate an App Password](https://support.google.com/accounts/answer/185833).
2. Set the gmail.email and gmail.password Google Cloud environment variables to match the email and password of the Gmail account used to send emails (or the app password if your account has 2-step verification enabled). For this use:
```
firebase functions:config:set gmail.email="" gmail.password=""
```

## Development server

Run `ng serve` for a dev server. The app will automatically reload if you change any of the source files.

Navigate to `http://localhost:4200/` to access the front end.

Navigate to `http://localhost:4200/login` to access the login page (login is via Google).

Navigate to `http://localhost:4200/admin` to access the CMS (user must be logged in and must be part of '/admins' in the Firebase database to access the CMS).

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Deploy

Run `npm run deploy` to deploy your project. This command will first build the app for production and then deploy it to Firebase hosting.

## Admin Roles

There are 3 Admin Roles:
* super-admin
* admin
* editor

| Permission | super-admin | admin | editor |
| ------------------------------------|:-----------:|:-----------:|:-----------:|
| create new entities | ✓ | ✓ | ✓ |
| edit entities | ✓ | ✓ | ✓ |
| submit entities for approval | ✓ | ✓ | ✓ |
| save entities | ✓ | ✓ | × |
| delete entities | ✓ | ✓ | × |
| publish/unpublish entities | ✓ | ✓ | × |
| edit items awaiting approval | ✓ | ✓ | × |
| approve/disapprove changes | ✓ | ✓ | × |
| view/add/edit/delete orders | ✓ | ✓ | × |
| view/add/edit/delete customers | ✓ | ✓ | × |
| view/add/edit/delete menus | ✓ | ✓ | × |
| view/add/edit/delete theme settings | ✓ | ✓ | × |
| view/add/edit/delete admins | ✓ | × | × |