README: Turnitin Viewer Team Front-end Coding Exercise

Welcome! We're excited you've decided to talk with us about a position on our engineering team.

The purpose of this exercise is so we can have a conversation about your technical background and abilities. We think that asking you to code on a whiteboard during an interview isn't a great way to have a conversation. And even if we sit down and pair during an interview it's a higher pressure situation than it could be.

Instead we ask that you read these instructions and do at most a few hours of work, on your time, to complete the exercise. During the interview we'll talk about decisions you've made, the resulting application, and how you might change it given different circumstances. We don't necessarily expect you to complete every aspect of the challenge, but wanted to provide enough specification/ideas that you have direction if you complete the more basic aspects quickly.

Below are two sections:

• Instructions: the problem we'd like you to solve along with expectations we have about your solution.
• Logistics: constraints around the problem, and how we'd like you to communicate your solution to us

Instructions

Problem

We're launching a new application to help search and store gifs (to improve our team's communication and morale in Slack, of course!). We'd like you to create a single-page application that meets the following requirements:

• The application uses React. You may use whatever other packages or frameworks you'd like.
• The application should use the Giphy api to fetch and display gifs that match a keyword provided by the user. (DO NOT use the Giphy SDK that Giphy also provides. Use only their API for this exercise.)
• We'll provide an api key you can use, or you can create your own key and app.
• The application should conform to the provided wireframes.

Part One (search and display)

• The user can search for gifs by typing in the input box and interacting with the 'search' button. The current search term should remain displayed in the input field as the results are displayed.
• Searches will load and display the first 12 gifs per the wireframes.
• Interacting with the 'reset' button will remove the current search term and any currently displayed gif results.
• Conducting a new search by keying a new term and interacting with the 'search' button should clear any existing results before displaying the new ones.
• Interacting with the 'more results' button will load the next 12 gifs and append them to the current display.
• If there are no gifs, or are no more gifs, this should be indicated to the user in some way.

Part Two (save your faves)

• The user can 'favorite' gifs in the results list that they like by interacting with the 'favorite' button (star icon)
• 'Favoriting' a gif will add it to the 'Favorites' display and remove it from the 'Search Results' display.
• The 'favorite' gifs are displayed within the 'Favorites' display under the heading of the search term that was active when the gif was returned as part of the result set, in the order in which they were added to the favorites.
• Clearing or changing the search term in the input does not remove a gif from the favorites display.
• Clearing the favorites display removes all gifs (and headings) from the favorites display. Any gifs that were added under the currently active search term are returned to their place in the active search display.
• Removing a single gif from the favorites display... removes it from the display :). If it is from the current search result set it re-appears in its previous location in the results list. If it is not from the currently active search, it just vanishes.

Documentation

• Please update this readme with any other instructions about stuff we might want to look at: minmally how to run the app, and if applicable how to run tests, how to produce a production bundle, etc.
• Please preserve your commit history in the posted repo! We'll likely take a look through how the app was produced in addition to where it ended up.

Wireframes

1. On Load
2. Search Results
3. No Results
4. Favorite
5. Reset
6. New Search
7. Mobile / Small Screen

Logistics

1. Timeframe

You should take a max of around three hours to complete this exercise. We want to be both respectful of your time and fair to other candidates who might not have a whole weekend to work on it. If you don't get all the way through all of the things, no worries.

2. Git

You will need to use git for this exercise. To get these instructions and a repo with test scripts do the following:

1. Create a Github account if you don't already have one. For the examples below we assume a user myusername.
2. Clone our repository:

# Using ssh
$ git clone [email protected]:turnitin/viewer-coding-exercise.git

# Using https
$ git clone https://[email protected]/turnitin/viewer-coding-exercise.git

3. Remote

Once you are done you can put your solution in your own repository by adding it as a remote and pushing to it.

1. Create a new repo via the github UI, let's assume you call it viewer-coding-exercise to mirror ours.
2. If possible use a private repo (we'd just like to make sure that every candidate's work is his or her own).
3. Add your repo as a remote and push:

$ git remote add my-github-remote [email protected]:myusername/viewer-coding-exercise.git
$ git push my-github-remote master

4. Access

Give Github user milogreen94 read access to your repository.

5. Notify us

At least a day before your next interview or when you are done, email [email protected] your repo address.

6. Questions, Feedback, etc.

Feel free to contact any of us if you have questions or feedback about this challenge:

• Chris "Milo" Miles ([email protected])
• Neil West ([email protected])
• Nelson Wong ([email protected])
• Luis Vasquez ([email protected])