Facebook Instant developer #1

The focus should be Setting up a way to deploy the app. The quick start guide uses Yarn and mock API for testing. We will need to set up something similar. Please document how to use whatever pipeline you are using. Properly intializing the app, loading required included resources (JS, CSS, images) through javascript and reporting loading progress. Setting up a way to add internationalization. Some static text elements in the app will need to be translated (i.e. “Share” in English, “Compartir” in Spanish). Setting up a proper framework for switching between the different screens of the app Demonstrating integration with our Backend API. Taking a HTML screenshot of the Result and sharing it Functionality Load all required javascripts and images and update [login to view URL](); accordingly Fetch user information and store it in a global setting User name User profile picture Base64 encoded version of the profile picture User locale (language) After intializing show a homepage with the following elements A Header on top with a logo of the app, clicking on the logo in the header should always take the user back to the main screen An area below with a list of quizzes (CSS is not important for now). A listing will contain of The quiz title and the quiz image. Each quiz must have an event handler attached which will then load the result of that quiz The list of quizzes is requested from an external API. The user’s Facebook locale should be passed as a parameter in the API call. The API will return a list of quizzes containing: Title, Subtitle, ID, Image The images in the list of quizzes should be lazy loaded. This means that the images should only be loaded once the user scrolls down. Before there’s a placeholder image. Blazy JS can be used for this. Check out OMG or [login to view URL] to see what I mean When the user clicks on a quiz show the quiz result page with the title of the quiz and a loading indicator that shows the user that the result is being fetched Request the quiz result from the API and insert the returned HTML into the designated area Show a share button below the result. The text on the share button should be localized according the user’s locale setting When the share button is clicked use html2canvas to create a screenshot of the result area and then call [login to view URL], while passing the screenshot to that method. [login to view URL] I have no design. we will use mockup datas for prototype: when you have done, we will promote it as soon, and will make lots of game like this