goekhanak / zalmemo

A social memory game (Hackweek project)

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

zalmemo's Issues

Display users statistics

Display users statistics in a scoreboard

Use a better modal dialog

Use a better modal dialog than alert()

add x-client-name as a header for Zalando Shop API requests

Add header 'x-client-name’ 'zalmemo' for Zalando Shop API so that they can track those requests.

Integrate with Zalando login

Integrate with Zalando login

Display countdown with circular progress

Display countdown in the game with circular progress. Angular material 2 has a promising implementation.

Update to the latest version of angular 2

Persist users wins and losses

Persist users' wins and losses

Filter out the multiplayer games without active users

Filter out the multiplayer games without active users. Check the presence of the users to do that.