Challenge Overview
Welcome to Implement Organization Screens / Integrate with POL Org API contest. As part of this contest, you will implement some screens from our existing UI Prototype.
Contest Details
We currently have a prototype for the front end of our application. We would like you to use Vue.js and re-build the prototype using this framework. Not all pages are in scope for this contest. Thus, before refactoring the code, please ensure that you focus only on the pages listed below. You need to integrate the following pages with the Organization API that can be found in our client’s Change-Maker repository:
-admin-user-register-as-organization.html
This page is accessed by clicking on Register in the login page and then clicking on Register My Organization.
On this page, in Step 1, the Contact Information section need not be filled up. It will be taken up later. The mapping of the organization information to the form body (that will be sent to the API) is as follows:
Organization Name -> name
Tell Us About the Good… -> description
City -> city
Country -> country
State / Province -> region. Use the two letter code for states in USA. Only applicable if country is USA.
Postal Code -> postalCode
EIN -> ein. This can be a random number with 9 digits. It has to be a unique field.
Fields that exist but not specified above can be ignored for now. Include them in the form but do not pass their values to the API. Skip this Step for Now needs to be hidden. The user cannot skip this step.
Step 2, 3 and 4 are all mock for now. Finally, on clicking Finish in Step 4, call the API to create the organization. Hide the Skip this Step for now button in Step 4. After the organization has been created, hide the Finish button and instead show a message “Organization Registered. Login.” where login is a link to the login page.
Additionally, kindly note that although the page says “admin-user-...”, we currently have no way to distinguish between admin users and non admin users. So, you are requested to ignore the filename and implement the page without thinking much about it.
- browse-groups.html
Page visible only after the user has logged in.
In this you need to list out all the organizations. Use can click on an organization to view more details - this is rendered in the groups-organization-profile.html page below.
For the “Share” button, you can proceed to implement the Facebook Share. You need to share the organization’s profile (groups-organization-profile.html page below). Features such as Like, Donate and other fields that cannot be mapped to the API are dummy fields for now.
- groups-organization-profile.html
In this you need to give the details of the selected organization. Additionally, the user should be able to Follow / Unfollow an organization. Other fields in this page will be dummy for now.
We will share a POSTMAN collection with you which you can make use of and verify the APIs to call for each page, which are:
1. Get All Organizations
2. Get a specific Organization’s details
3. Follow an Organization
4. Unfollow an Organization
5. Create an Organization
Points to Note
- There is no server required. You need to use Surge to host your app or on heroku.
- You are required to use ES2015 (ES6) along with Babel and Webpack for the front end. Please make sure that you organize the front end code efficiently and make it easy to maintain the code base.
- Pages in the prototype that are not in scope need not be submitted
- Since the endpoint is providing very minimal information on the organization, you can use mock data for the components that do not have corresponding data from the API.
- Organize your code well. Build components and then integrate these components as opposed to building everything together at the same time. The client is looking for reusable components.
- Make sure that you follow the existing conventions used in the app.