Challenge Overview
We are working on a new project for the Hercules client for Facebook Live integration into an app that will be displayed on TVs. This challenge will update the initial proof of concept to allow for personalisation by a user of the feeds they see.
Note: You will need Facebook access for this challenge. If you cannot access Facebook, you won't be able to compete in this challenge.
Heroku / Node.js
This app will target deployment to Heroku using Node.js.
Personalisation
Currently, in the app, there are two tabs:
* For All
* For You
This challenge will focus on the "For You" tab
Currently, when a user hits "For You", they are prompted to login with their Facebook credentials. This will remain in place.
New functionality
The new functionality will include:
* Tracking user's preferences for public feeds
* Allowing a user to add and remove public feeds
Database
We don't really track anything for the user currently, but now with personalization, we'll need to store configuration options per-user. Please add a dependency on MongoDB and target the Mongolab Heroku plugin to store user preferences / configuration.
First selected after authentication:
When "For You" is first selected, after the user registers the device code, we will show a grid of available public feeds the user can turn on or off for themselves. This will be a 3x3 grid of icons and names. The list of feeds needs to be configurable the current way it is now, through the global_source array in config.js, but we can add new fields in the hash for things like the icon to show.
The user will be able to go through the grid (which will support going left and right to show more items - don't just assume there will be 16 max). They can then toggle cells to turn those feeds on and off for themselves.
There should be a cell labeled "Done" in the list that applies the selected feeds to the user's account record in the MongoDB and goes to the next step
After initial setup
Coming back to "For You" after the initial setup will display recent videos from the user's list of configured feeds. This is similar to what we do for the "For All" page, where we pull one video from each feed as the user paginates to the right.
Similar to "For All", if the user clicks "For You", we should expand to show a list of their configured feeds so the can scroll down and select a specific feed and show just the videos from that page / feed.
Modifying settings
In the drop down menu when the user clicks on "For You", we should have the very last option in the list be "Customize". When the user selects "Customize", they will be presented with the grid of cells for different pages / feeds that they saw in the initial setup. The user can then turn on and off new and existing feeds.
User interface
The user interface needs to be updated to be fully navigable by 6 keys. Make sure that no mouse is required and that all parts of the UI can get accessed appropriately. Also, make sure to ensure that the selection state is very obvious when using the keyboard to select elements / buttons / tabs. You are free to update the UI as you see fit, just make sure the same data shown now is accessible.
* Left
* Right
* Up
* Down
* Enter
* Escape (back)
Submission
Existing code:
The existing code is available in Gitlab here: https://gitlab.com/hercules-facebook-live/fblive-mosaic
You will be expected to submit a Git patch file that can be applied to the commit hash 1a5f3373f7fa4ad46d088e984dd0337adeaa42d4.
Your submission must include a Git patch file against the commit hash above. The Git patch file should include any relevant changes to the README for this challenge. A video detailing the functionality is required. The video doesn't have to include setup information, just a demo of the UI and changes required.
Note: You will need Facebook access for this challenge. If you cannot access Facebook, you won't be able to compete in this challenge.
Heroku / Node.js
This app will target deployment to Heroku using Node.js.
Personalisation
Currently, in the app, there are two tabs:
* For All
* For You
This challenge will focus on the "For You" tab
Currently, when a user hits "For You", they are prompted to login with their Facebook credentials. This will remain in place.
New functionality
The new functionality will include:
* Tracking user's preferences for public feeds
* Allowing a user to add and remove public feeds
Database
We don't really track anything for the user currently, but now with personalization, we'll need to store configuration options per-user. Please add a dependency on MongoDB and target the Mongolab Heroku plugin to store user preferences / configuration.
First selected after authentication:
When "For You" is first selected, after the user registers the device code, we will show a grid of available public feeds the user can turn on or off for themselves. This will be a 3x3 grid of icons and names. The list of feeds needs to be configurable the current way it is now, through the global_source array in config.js, but we can add new fields in the hash for things like the icon to show.
The user will be able to go through the grid (which will support going left and right to show more items - don't just assume there will be 16 max). They can then toggle cells to turn those feeds on and off for themselves.
There should be a cell labeled "Done" in the list that applies the selected feeds to the user's account record in the MongoDB and goes to the next step
After initial setup
Coming back to "For You" after the initial setup will display recent videos from the user's list of configured feeds. This is similar to what we do for the "For All" page, where we pull one video from each feed as the user paginates to the right.
Similar to "For All", if the user clicks "For You", we should expand to show a list of their configured feeds so the can scroll down and select a specific feed and show just the videos from that page / feed.
Modifying settings
In the drop down menu when the user clicks on "For You", we should have the very last option in the list be "Customize". When the user selects "Customize", they will be presented with the grid of cells for different pages / feeds that they saw in the initial setup. The user can then turn on and off new and existing feeds.
User interface
The user interface needs to be updated to be fully navigable by 6 keys. Make sure that no mouse is required and that all parts of the UI can get accessed appropriately. Also, make sure to ensure that the selection state is very obvious when using the keyboard to select elements / buttons / tabs. You are free to update the UI as you see fit, just make sure the same data shown now is accessible.
* Left
* Right
* Up
* Down
* Enter
* Escape (back)
Submission
Existing code:
The existing code is available in Gitlab here: https://gitlab.com/hercules-facebook-live/fblive-mosaic
You will be expected to submit a Git patch file that can be applied to the commit hash 1a5f3373f7fa4ad46d088e984dd0337adeaa42d4.
Your submission must include a Git patch file against the commit hash above. The Git patch file should include any relevant changes to the README for this challenge. A video detailing the functionality is required. The video doesn't have to include setup information, just a demo of the UI and changes required.