Milestone Project 2 - GetIT Application

By Pawel Wodyk

GetIT is interactive jobsearch Single-Page Application for IT professionals located in UK. It allows you to search for the current job opportunities using the job title or location. Once the job ads are acquired from Adzuna API you can view their location on the interactive map and read more details about them in the cards provided bellow the map.

The main aim for the site is to provide clear and readable interface with minimal interruptions and unnecessary features, that will help to speed up the process of finding the best suited job.

Note: the site displays max 48 results per API call because of API limitations

Status: DEPLOYED on GitHub Pages

Resources Used and Credits

Content

all the information used in the job listings are acquired via API from Adzuna UK.

API

Bing Maps API
- used to display jobs' locations on the map
Adzuna API
- used to get job listing information

Images

Loading Gif
- Source: http://www.mytreedb.com
Photo by rawpixel from Unsplash
- Author: @rawpixel
- Licence: https://unsplash.com/license
Adzuna Logo
Bing maps Logo

Guides / Instructions / Code Samples

I used following code snippets from Bing Maps Documentation in my project:

UX

This Single-Page Application was design with the simplicity and transparency in mind. I wanted to make an interface as minimal and unobtrusive as possible, while allowing the user interaction with the map as a main feature, I decided that the map will be helpful feature that will help to visualize the job search.

The search itself was designed to be very simple with very little customization by the user. While the Adzuna API provides a lot of customization of the API call I decided to hard-code most of the variables.

it search only for jobs taged as IT jobs - the site is catered to Developers and IT professionals hence it will only display this type of jobs, makes it clearer by not displaying other jobs that use the key word in other professions eg. job ad for barista could also have java keyword which could cause annoyment and make it less readable.
the search results are caped to 15 days old and displayed in the newest to oldest order - this is based on my own experience. I decided that the most recent jobs are the most likely to be still available hence the data is displayed in the order of newest first, and at most 15 days old (2 weeks + 1 day) which should be enough for most jobsearches.
the search looks for positions within 30km of the location specified - this is to show the user all the available position within reasonable distance of their search location.

Unfortunately the API allows for maximum of 50 results per API call. Hence for a better readability I decided to request 48 job ads per API request. This number was derived from the biggest common denominator of 2 and 3 since the job cards are displayed in the rows of 3 on desktop, rows of 2 on tablets and single card per row on mobile. To help with readability the jobs are displayed in the intervals of six jobs or in case of selecting the job from pin/clusters on the map, all the jobs that were clicked will be displayed, with the option to display all jobs.

Responsive Design

The application is responsive and has full functionality on all common resolutions used on smartphones, tablets and desktops.

The site utilize the bootstrap to scale all the panels to provide clear and comfortable viewing on different display sizes. The number of cards that is displayed in each row is dependent on the screen size and is as follows:

Large screens (desktops/laptops): 3 cards per row,
Medium screens (tablets): 2 cards per row,
Small screens (smartphones and small Tablets): 1 card per row
Extra Small screens (smartphones with display less then 576 px wide) 1 card per row, with scalable card height

The ads have set height on resolutions over 576px wide to look better in the card format but on smartphones each card is automatically scaled to it's content size to prevent scrolling through blank space beteen description and apply button. Which could be very discouraging on smartphones. Also the job details are automatically aligned vertically instead of two columns to help with readability on the small screen.

The description is truncated to 400 characters to look better and to not overwhelm the user with too much informations.

Back to the top button is situated on the bottom to help user quickly return to the search.

User stories

Project was designed with following Users in mind:

I want to see what ads were posted today for my profession (eg. Front-end Developer)
- allows searching the jobs by position keywords, display them sorted by date.
- Each job offer is listed with the most important information and is clearly visible in the rows.
- Apply button underneath each job card allows user to apply for a job.
I want to see all recent ads in UK and see where the jobs are located
- the search allows for the "blank search" for all IT jobs in all of UK
- the map provides quick glance at the jobs and their locations.
- the map is iterative and allows the user to click on each pin/cluster to display only those jobs and their details
I want to quickly find all job listings from last two weeks in my city (eg. Belfast)
- User can search for a specific location (eg. town name) or more general location (eg. counties or region)
- The map will focus on the clusters once the clusters are displayed
- user can then click on the specific pin/cluster on the map to display only jobs in that place.

UX Design Documentation:

backup link

Features

Existing Features

Feature 1 - The Input boxes allows user to enter position keyword and/or location. Both are optional for more generic searches like "All positions in London" or "All JavaScript front-end positions in UK".
Feature 2 - The Job offers display as a cards which allows users to view each job details in clear and readable manner. The job title is the clearly visible at the top and the job details are visible underneath the job title and they include:
- Company name
- Location
- Salary
- How old is the ad
The Details will be truncated if they are too long but each detail displayed has the full name showing on hover.
Feature 3 - The apply button under each job offer allows the user to apply for the position and it is clearly visible under each job listing.
Feature 4 - Once the jobs are received they are displayed on the map so user can see their location
Feature 5 - The map is interactive and allows the user to select the jobs in the specific location by clicking them on the map. Which will display only selected job cards. It also creates button to display all jobs again at the top of the job list and at the bottom for better user interaction.
Feature 6 - Once the Pin or Pin Cluster is clicked on the map the message under the map will be displayed with the selected location. If the Pin Cluster has jobs from more then one location it shows Multiple locations selected.
Feature 7 - The map will focus on the clusters once they are added to the map for the better user experience.
Feature 8 - Responsive design - the site is scalable and respond to the different device sizes.
Feature 9 - The jobs are display in intervals of 6 for better presentation and readability. User can then press on more button to display next 6 jobs. Once all the jobs acquired from the API are displayed The button will change to request next 48 jobs from the server. At this point user can also go back to the top pressing the button Back to the top that is also always visible at the bottom of the page in the footer.
Feature 10 - The job list is saved in the local array and all the operations are done on the array until the user request another page from API. This saves on the Internet usage and lowers API calls.

Features Left to Implement

The API supports following country codes: // gb au at br ca de fr in it nl nz pl ru sg us za - which could be added in the future as an option to search for jobs in the different countries.

This feature however will cause the need to implement timezone for different locations and customize the currency and possibly the language.

I decided that this would make the site less readable and the better solution would be - if needed in the future - to just make different sites for a different countries.

[ADDED AFTER TESTING]

Add the coordinates value to the results received from API without them the possible solution would have to be not very resource hungry and preferably do not involve API calls since acquiring 20+ results from API could slow down displaying of data and might affect user experience.

Technologies Used

HTML5
- This website uses HTML5.
SASS/SCSS & CSS3
- SCSS was used for custom styling of some element that could not be styled by using bootstrap, and was compiled to CSS3. However most of the web styling and design was done with bootstrap.
Bootstrap 4.3.1
- I used the Bootstap framework for designing the page layout and implementing flex design elements.
- I also used predefined bootstrap styles to customize elements on the page, ie. buttons, cards, footer etc.
Font Awesome Icons
- I used FA icons mostly for icons displaying in the details section of the job card. Clear and colorful icons looks better then the label like company name or location as well as save space.
- Also used for up arrow icon in the back to the top button.
JavaScript
- JavaScript used for API request and providing functionality to the website. In tandem with JQuery to modify the HTML document.
JQuery
- I utilize JQuery queries to help me modify the HTML document. I used it to inject HTML elements to the document, modify the classes on the fly, and to remove some elements to prevent duplication.

Testing

Note: The testing has been done manually to preserve API calls.

The Testing was done Manually and was divided into 4 Testing Groups

1. Searching and API calls
2. Map
3. User Interface
4. Responsive Design

Testing Process

Testing searching and API calls
- ☑ Test 1 - search with single word position name only
  1. Entered javascript into search input box
  2. Pressed Find IT! button
    - Search displayed 6 job cards
    - 48 results received
    - Map was rendered correctly with the pins all over UK
  3. Entered full stack developer
  4. Pressed ENTER key
    - Search returned 6 job cards
    - 48 results received
    - Map rendered correctly
    - Search results included all the keywords in either title or description. Results also included Full-Stack Developer
- ☑ Test 2 - search with location only
  1. Entered London
  2. Pressed Find IT! button
    - Search displayed 6 job cards
    - 48 results received
    - Displayed jobs in London and area.
  3. Entered Scotland
  4. Pressed ENTER key
    - Search displayed 6 job cards
    - 48 results received
    - Displays jobs in correct location.
- ☑ Test 3 - searching with position and location
  1. Entered "backend developer" in position
  2. Entered "Scotland"
  3. Pressed ENTER key
    - Search displayed 6 job cards
    - Only 9 results received from API
    - Displayed correctly on the map
  4. Entered "Java" in Position
  5. Entered "London" in Place
  6. Pressed ENTER key
    - 48 results received - 6 displayed initially, in cards
    - Map renders correctly
- ☑ Test 4 - empty search no parameters
  1. Removed all data from Job and Place input boxes
  2. Clicked Find IT! button
    - ENTER key only works when the pointer is in the input box since the event is set on .input element
    - Jobs are displayed correctly
- ☑ Test 5 - searching for unrecognized keyword
  1. Entered qwertyuiop in Job input box
  2. Clicked Find IT! button
    - message "!!! No Jobs Found..." is displayed under the map as expected
    - no pins or job cards were displayed
Testing pins and clusters displaying on the map
- ☑ Test 1 - Test Map rendering and focusing on the pins/clusters
  - Previous test of different searches proves the map renders correctly and focus on correct location as expected
- ☒ Test 2 - Checking the number of pins/clusters displayed
  1. Entered javascript into Job search box and London into Location
  2. Pressed Enter
    - 48 results received but Map renders as expected but with only 24 pins
    - Console logs 24 invalid coordinates which correctly adds up to the number of jobs received
    - On further inspection some jobs in the returned array do not have parameter for longitude and latitude, this indicated that the coordinates are not mandatory and API do not return them every time. they have a location in string format though.
    - This could be improved in the future by assigning default location to the jobs that don't have it, or alternatively write the code to Bing REST API requesting coordinates for their position.
- ☑ Test 3 - Clicking on the Pins
  1. Entered Javascript in the job search box, location left blank
  2. Pressed Enter
    - 34 pins renders as expected
    - 14 pins missing coordinates
    - Map focus correctly on the pins
  3. Pressed on the cluster of 7 pins around London Area
    - Message "Displaying jobs in : Multiple Locations" is displayed correctly
    - 7 job cards are displayed under the map as expected
  4. Zoomed in to Manchester as close as possible
  5. Pressed on the 4 pins in a cluster over Manchester city
    - Displaying jobs in : Manchester appears under the map as expected
  6. Zoomed out slightly until some other single pin was visible
  7. Pressed on the single blue pin over Liverpool
    - Message displayed: Displaying jobs in : Liverpool
  8. Pressed on Display All button
    - all 48 jobs were displayed again
Testing User Interface
- ☑ Test 1 - Testing Main Search button and Event on pressing Enter in the input fields
  - This test was proved successful by the previous tests. Both button and pressing Enter, correctly calls acquireResponse function which then gets data from the server as expected.
- ☑ Test 2 - Testing More Button
  1. Entered Javascript in the job search box, location left blank
  2. Pressed Enter
    - Search displayed initial 6 job cards
    - 48 results received
    - pins are rendered on the map
  3. Pressing MORE! button underneath the job cards
    - next 6 jobs displayed as expected
  4. Pressed MORE! button 6 more times until it has changed to Request next 48 jobs from the server
- ☒ Test 3 Testing Request next 48 jobs from the server Button
  1. Steps Carried on from the previous Test 2 - Testing More Button
  2. Pressed on Request next 48 jobs from the server Button
    - The site did not collapse correctly leaving me at the bottom of the page and displaying white background.
  3. Scrolled back up
    - The site displayed the new search results but the white background was still present and some items were not aligning correctly.
  4. I refreshed the page and repeated the steps
    - The page renders correctly this time and takes me back to the top on pressing the Request next 48 jobs from the server Button.
    - I repeated the steps 2 times but was unable to replicate the error. It could have been a browser error.
  5. Resuming the test
  6. Requested new data with the search keyword Python
  7. Pressed More! Button 7 times
    - Button changed to Request next 48 jobs from the server
  8. Pressing Request next 48 jobs from the server
    - Next page was rendered with another 6 results
    - Map push-pins have changed
    - new 48 results were returned
- ☑ Test 4 - Testing Show All Button displayed when clicked on the cluster or push-pin
  1. Entered Software Developer in the job search box, location: Northern Ireland
  2. Pressed Single Pin Titles Derry Software Tester
    - Message displayed: Displaying jobs in : Derry
    - Button Display All added to the top and bottom
  3. Clicked on the Display All Button at the top
    - all 48 jobs displayed
    - message between job-list and map was hidden as expected
  4. Clicked on the cluster of 32 pins over Belfast
    - Displaying jobs in : Belfast displayed
    - 32 jobs displayed all with location Belfast, Northern Ireland
  5. Clicked on the Display All Button at the bottom
    - all 48 jobs were displayed
    - the button at the bottom was changed to Request next 48 jobs from the server
- ☑ Test 5 - Tested Request next 48 jobs from the server Button after pin was pressed and after display all button was pressed to display all the results to see will it display correct values
  1. Continuing from the previous test
  2. Pressing the Request next 48 jobs from the server Button
    - New request was sent to the server and new 48 Software Developer jobs in Northern Ireland were returned
    - 6 jobs displayed in cards
    - pins have been changed and map rendered correctly
    - button was changed back to More!!
- ☑ Test 6 - Testing the Back to the top Button
  1. scrolled to the bottom of the screen
  2. pressed the button "Back to the top"
    - As expected takes me back to the top
Testing Responsive design

Each test preformed for each Bootsrtap responsive breakpoints
```
 //staring resolution set to 320x568 since its a resolution of iPhone 5 one of the most common phones in US hence was chosen as a minimal tested resolution
```
- Test 1 - Initial site - when the site loads
  1. Reloaded Page
  2. Changed resolution to 320x568
    - Title and Search box scales correctly and respond to the display width button is moved to under the input boxes and displayed correctly
    - the only minor issue is that the footer is only partially visible on smaller resolutions, possible improvement
  3. Expanding the resolution
    - all the elements respond correctly to the expanding resolution
- Test 2 - After Requesting the jobs from the server
  1. Changed the resolution to 320x568
  2. Searched for Java Jobs in Wales
  3. Scrolled down to the bottom
    - job cards scale correctly and placed in the single column
    - job details are stacked in the single column as expected
  4. Repeated steps 1 to 3 for other resolutions
    - everything is scaling as expected
    - the number of jobs per row changes per resolution and each element is scalable
    - no problems with usability on smaller screens

Testing Conclusion

The site has mainly behaved as expected through all tests, with one exception on pressing the button responsible for requesting more jobs in Step 3 of "Test 3 Testing Request next 48 jobs from the server Button". I have tested the same scenario 3 more times on the chrome browser and 1 more time in the FireFox but I was unable to reproduce the bug.

Other issue with some jobs returned from API do not have lang and long variables. I was aware of this issue during development, and was mitigated by inserting the check for numeric values before they are added as a coordinated.

Possible solution could be requesting the location everytime the job do not have correct coordinates however this would put a lot of strain on the API calls and potentially might slow down the rendering of the pins. Therefore without future testing it cannot be added to the application at this point. This feature was added to Features Left to Implement section of this document.

Deployment

The Website was deployed on GitHub Pages from the Master Branch.

The link to the deployed website: https://pwodyk.github.io/CI_MilestoneProject2/

pawodyk / ci_milestoneproject2 Goto Github PK

ci_milestoneproject2's Introduction