ZalMemo a social memory game with Zalando API.

A simple Todo app example built with Angular 2. The app features a Firebase backend with OAuth authentication, and uses Zalando Shop API. It is built within Zalando hackweek 2015.

Try out the live demo at https://crackling-inferno-6105.firebaseapp.com

Check out the todo-angular2-firebase this project is based on.

• Angular 2.0.0-beta.0
• Firebase
  • JSON Datastore
  • OAuth authentication with GitHub, Google, and Twitter
  • Hosting
• Gulp 4.0.0-alpha.2
• Immutable
• RxJS 5.0.0-beta.0
• SASS
• Typescript ~1.7.5
• Webpack
  • Inlines external SCSS files
  • Inlines external HTML templates
  • Bundles and minifies release builds
  • Injects style and script tags into index.html

Hackweek Schedule

• First day
  • Get Familiar with Angular 2
    • go through tutorials and docs.
  • Find a seed project with Angular 2, Typescript and Firebase
    • todo-angular2-firebase
  • Get familiar with shop API
    • Zalando Shop API
  • Design the first GUI
• Second day
  • Develop the UI
    • Flip Cards with animations
  • Get articles from Shop API
• Third day
  • Responsive UI
  • Store the game @Firebase
    • https://www.youtube.com/watch?v=RD0xYicNcaY
  • Improve random article choosing
• Fourth day
  • Real-time Synchronization among various clients with Firebase
  • Choose game options like difficulty level and
• Fifth day
  • Prepare for project fair
  • Get feedback

Quick Start

$ git clone [email protected]:zalando/zalmemo.git
$ cd zalmemo
$ npm install
$ ./node_modules/.bin/gulp

Developing

Prerequisites

• node >=4.2

Installing Global Dependencies

$ npm install -g karma-cli

Webpack (optional)

$ npm install -g webpack
$ npm install -g webpack-dev-server

Gulp v4 (optional)

$ npm install -g gulpjs/gulp-cli#4.0

The gulp tasks for this project require gulp v4-alpha. If you don't wish to globally install the v4 gulp-cli, you can run the gulp tasks using the locally installed gulp under ./node_modules/.bin — for example:

$ ./node_modules/.bin/gulp run

Installing Project-local Dependencies

$ npm install

Commands

Develop

$ gulp

• Start the Webpack dev server at localhost:3000
• Watch for changes to your source files
• Live-reload the browser

Lint (tslint)

$ gulp lint

Test (single-run)

$ gulp test

Test (watch mode)

$ gulp test.watch

Build

$ gulp build

Dist build

$ gulp dist

Executes the following:

• gulp lint
• gulp test
• gulp build