Instructions

Use the given minimal app project to implement the User Stories
Take your time. This coding challenge is not designed to get finished
Focus on functionality, but do not neglect appearance
Try to write generic and re-usable code
You are free to implement the application logic any way you like, using any library you think is suited for the task. However, we expect you to be able to justify with solid motives every choice you make (and please be advised that we LOVE vanilla JS)
We request you to implement all renderings with React.

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 Explorer: 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
$ npm install

Usage during development

$ npm start to preview and watch for changes

Verify a successful initialisation of the environment

open an incognito window on your favorite browser (if on Firefox, exclude Tracking Protection!)
start the console of the developer tools
go to localhost:9000 and click the green button
log into Facebook using the credentials of the test user
watch the messages in the console: you should witness a successful login

...now you can start your work!

Muzietto/Instructions.md