Challenge Overview
Welcome to the Living Progress - Build - POL - Social Integration contest. As part of this contest, you will implement social features in our existing app.
Contest Details
We have an app built using Vue.js. This app is front end only. The app directly communicates with an API server created by our client. The API server is called Change Maker. It’s repository is here and the API itself is hosted for you here. Register on the website and set up a client and use the credentials to deploy the app and login.
As part of this contest, you will need to implement the following:
1. After the user logs in, the profile page is shown. In the prototype, check out my-profile.html. Here, you will find a new button called “Follow Friends”.
Initially, the button will be called Integrate with Facebook and will be blue in color (checkout step 5 in register-as-volunteer.html page for this button. It need not be as wide as seen in this step. Reduce the width so that it looks good.
When the user clicks on the button, the user is taken to Facebook where the user is asked for permission to share their details with our app. In particular, we are looking at the user_friends permission for our app to allow us to get the user’s friend list.
Once the user authorizes the app, the user is taken back to our app and the the button changes to the existing Follow Friends button. Additionally, you will pass the facebook user id to our app using the API specified in the contest forum.
At this point, you don’t have to fetch the user’s facebook friend list. The app is only authorized to make that call at this stage.
If the user refuses to authorize the app, take the user back to the profile page and show the “Integrate with Facebook” button itself.
2. When the user clicks on Follow Friends button, they are taken to the Follow Friends page, named follow-friends.html in the prototype. In this page, you will need to call the facebook API to get all the user’s facebook friends. Collect the friend’s facebook user ids into an array and pass the array to our API - the API will then respond with other users that have registered in our app and are also the user’s facebook friend.
The Followers and Following Tabs need not be implemented. Only implement the All Tab. In this tab, show the users returned after passing the facebook friend user ids to the ChangeMaker API. At this point of time, the user cannot follow or unfollow friends. Thus, show the Follow / Unfollow buttons on the page but they need not have any functionality associated with them and can be dummy. No search friends either. This will be dummy too. The profile pic can be dummy and so can the Friends / Followers count. The rest of the elements on that page are all dummy.
We understand that since the app does not have a backend and since there is no API to store the facebook authorizations granted by the user, the process of getting authorization will have to be repeated each time the user logs in and we are fine with it.
Point To Note
- You need to use Vue.js when building the app
- You need not implement the pages in the prototype that are not in scope. Best that you stick to the provided designs to know which pages to implement
- Follow the existing conventions used in the app.
- Make sure that there are no lint errors.