TpvCoffeeProjectTeamApp

is a progressive web app built with angular2 + google material design + foundation and + firebase real time database.

the app is a small scale communication hub for individuals and groups of professionals working together on projects that require several people being involved. for this purpose it is fitted not only with chat and bulletin board but also with more advanced project management features.

these include:

• calendar,
• to-do lists,
• user management features,
• form's submission interfaces,
• real-time database,
• responsive and blazing fast web app,
• which can be viewed as standard website in any web browser
• but also could be downloaded onto any device and work as native, mobile or desktop application.

the app was developed by rafszul of projekt:kreatywa for lukas, manager of and head barista at the peanut vendor coffee project a speciality coffee shop based by the victoria park in hackney, london, uk.

---

currently the application lives at tpv-coffee-project-team-app.firebaseapp.com

---

• TpvCoffeeProjectTeamApp
  • what is this
  • the app
  • used libraries, guides, etc.
    • libraries
    • guides
    • other resources
  • on angular-cli
    • development server
    • code scaffolding
    • build
    • running unit tests
    • running end-to-end tests
    • deploying to github pages
    • further help
  • installation
  • configuration
  • development
  • code scaffolding
  • build
  • tests
    • unit tests
    • e2e tests
  • deploying to github pages
  • further help
  • using @angular/flex-layout module
    • fast start
    • npm
    • application usages
    • further help
  • credits
  • license

what is this

coffee project is a progressive web app built with angular2 + firebase + google material design for the gang at the peanut vendor coffee project

currently it contains following features:

• social media login (facebook, twitter, google+ and github)
• personal 'todo' item list
• chat with other users

the project was generated with angular-cli version 1.0.0-beta.21 and is a clone of angular2-firebase-material-demo by tarleoo

the app

currently the application lives at [dev mode - sorry folks](dev mode - sorry folks)

[](dev mode - sorry folks)

while the demo of the seed application can be found at https://fir-todo-v3.firebaseapp.com/

used libraries, guides, etc.

libraries

• angular 2
• material design for angular 2
• angularfire2
• angular2-moment
• angular-cli

guides

• angular 2 style guide

other resources

• firebase
• material design

---

on angular-cli

this project was generated with angular-cli version 1.0.0-beta.24.

development server

run ng serve for a dev server. navigate to http://localhost:4200/. the app will automatically reload if you change any of the source files.

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.

running unit tests

run ng test to execute the unit tests via karma.

running end-to-end tests

run ng e2e to execute the end-to-end tests via protractor. before running the tests make sure you are serving the app via ng serve.

deploying to github pages

run ng github-pages:deploy to deploy to github pages.

further help

to get more help on the angular-cli use ng help or go check out the angular-cli readme.

---

installation

first of all you have to install npm and node.js to your box. installation instructions can be found here.

note that node.js 6.x is required.

$ git clone https://github.com/projekt-kreatywa/coffee-project.git
$ cd coffee-project

# install the project's dependencies with npm
$ npm install

# fast install (via yarn, https://yarnpkg.com)
$ yarn install  # or yarn

---

configuration

see /src/app/config/config.ts_example file and copy it to /src/app/config/config.ts file and make necessary changes to it. note that you need a firebase account to get all necessary config values.

if you are not familiar with firebase and/or don't have a firebase developer account, sign up quickly with your google id here: https://firebase.google.com/.

after you have created new application you will need to make some security rules for the used data storage. below is configuration that this demo application uses, so you can use the same within your application.

{
    "rules": {
      "messages": {
          ".write": "auth !== null",
          ".read": "auth !== null"
      },
      "todos": {
        "$uid": {
          // grants write access to the owner of this user account whose uid must exactly match the key ($uid)
          ".write": "auth !== null && auth.uid === $uid",
          // grants read access to any user who is logged in with facebook
          ".read": "auth !== null && auth.uid === $uid"
        }
      }
    }
}

these rules ensure that 'todo' items are show only to user who made those. also chat messages requires that user is logged in to read / write those.

---

development

to start developing in the project run:

$ npm start
# or
$ ng serve

then head to http://localhost:4200 in your browser.

code scaffolding

run ng generate component component-name to generate a new component. you can also use ng generate directive/pipe/service/class.

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.

tests

unit tests

to run tests run:

$ npm test
# or
$ ng test

e2e tests

to run tests run:

$ npm run e2e
# or
$ ng e2e

deploying to github pages

run ng github-pages:deploy to deploy to github pages.

further help

to get more help on the angular-cli use ng --help or go check out the angular-cli readme.

---

using @angular/flex-layout module

this will require a bit of footwork until npm install of @angular/flex-layout is available via standard npm i @angular/flex-layout which will be after the the flex-layout v1.0.0-beta.1 release (week of december 20, 2016).

fast start

installing flex-layout with npm is not yet available. developers can easily install this @angular/flex-layout library using a local build and directory copy:

gulp build:release
ditto ./dist/@angular/flex-layout <your project>/node_modules/@angular/flex-layout

npm

the expected deployment process to npm (and the standardized use of npm i @angular/flex-layout) is not yet available. npm installs will be available after the the flex-layout v1.0.0-beta.1 release (week of december 20, 2016).

application usages

in their application module, developers import the global layout api directives (as shown below):

// demo-app-module.ts

import { FlexLayoutModule } from '@angular/flex-layout';

@ngmodule({
  imports: [
    browsermodule, commonmodule, formsmodule, httpmodule,  // import ng2 core modules
    FlexLayoutModule.forRoot(),                            // import dependency on flex-layout
  ], 
)}
export class demoappmodule { }

in their component templates, developers easily use the layout api to build complex, dynamic layouts:

<div fx-layout="row">
  <div [fx-layout]="firstcol" [fx-flex]="firstcolwidth" >
    <div fx-flex="27%"> first item in row  </div>
    <div fx-flex      > second item in row </div>
  </div>
  <div [fx-layout]="secondcol" flex >
    <div fx-flex       > first item in column  </div>
    <div fx-flex="33px"> second item in column </div>
  </div>
</div>

further help

to get more help on the installation and use of @angular/flex-layout check out flex-layout readme

---

credits

• rafszul of projekt:kreatywa
• lukas of the peanut vendor coffee project

---

license

the mit license (mit)