cc_frontend_fb.md

Instructions

• Use the given framework to implement the User Stories
• Take your time. This coding challenge is not designed to get finished
• Focus on functionality; design is nice to have
• Try to write generic and re-usable code
• You can use google, docs, github, angular, ... whatever you want

User Stories

Mainpage

The user can choose between of n Game previews, displayed on the Mainpage. Each Game is playable on it's Subpage.

Subpage (for each Game)

The user can play a Game by clicking a Play button. When the logic is finished, the user can see the images + names of n places he visited.

Logic for every Game

• (Re-)Login with Facebook to get all needed permissions
• Display a loading animation
• Request the data from the facebook graph api
• Transform the data
• Display the data

Games

ID	Name	Endpoints	Permissions
plc	Places by Tags	/me/tagged_places	['public_profile', 'email', 'user_tagged_places']
pst	Places by Posts	/me/posts	['public_profile', 'email', 'user_posts']
evt	Places by Events	/me/events	???
pho	Places by Photos	???	???
all	All Places	???	???

Additional information

• Images of places are stored in different object properties. best quality prefered
• Order the places by:
  1. places with images first
  2. most frequency
  3. last visit
• Transform each place in an object like this:

place: {
    id: undefined,
    name: undefined,
    img_url: undefined,
    last_visit: undefined,
    visit_counter: undefined,
    extra_data: undefined //store additional data here
}

• Facebook Graph API Exporer: https://developers.facebook.com/tools/explorer/
• Remove Permissons of the App: https://www.facebook.com/settings?tab=applications
• FB App-ID: 1449454701748571
• FB App-Name: cc_frontend_sample
• Redirect URL: http://localhost:9000
• Test User:
  • Mail: [email protected]
  • Password: Robert123  

---

Installation

• $ sudo npm install gulp -g
• $ sudo npm install bower -g
• $ npm install
• $ bower install

Usage

• $ npm start to preview and watch for changes