React Tech Challenge

Introduction

Thank you for your interest in joining our team here at Servall Development! This challenge is designed to showcase your development skills and should ideally take 30 to 60 minutes.

The goal of this challenge is to help users determine their MP Representative based on their postal code. You'll be using the API provided by opennorth.ca to determine this information.

Goals

Some of the things we'd love to see in your solution include:

• Code quality
• Layout and presentation
• Comments when necessary

Feel free to add your personal touches or make any changes that you feel would improve the application.

Setup

1. Login or setup a free account on GitLab. You'll just need this so that you can fork this repository.

2. First fork this repository into your own GitLab account by clicking the Fork button located at the top of the page.

3. Once forked, clone to your local machine by running git clone or your git tool of choice.

4. Install the app by running in a command prompt or terminal (Note: NodeJS needs to be installed):

   npm install
   or
   yarn install

5. Start the development environment by then running:

   npm start
   or
   yarn start

Technologies Used

• Uses React framework
• Based on the Create React App
• Representative API from opennorth.ca
• Data returned in the JSONP format

Guide

1. See src/App.js for a basic template to get started. Please feel free to change this file and add other components or visual elements that could provide what you feel is the best user experience.

2. For making requests to the Representative API, you can use the opennorth.ca Postal Code API. An example URL for the postal code T2Z 4M8:

   https://represent.opennorth.ca/postcodes/T2Z4M8/.

   Note we are looking for representatives whose elected_office is MP.

3. Please note that since this is a web application, their API will require you to use JSONP to make the request. To make it easier, we have included fetch-jsonp in this project. It can be used in the same format as a regular fetch request. To use fetch-jsonp, simply import it using the following code:

   import fetchJsonp from "fetch-jsonp";

4. Once you have retrieved the data, please display the first and last name and any other data you feel will be useful to the user. Feel free to be creative!