MonkeyDefine 🐒 🐵

Our monkey will help you to find any single word you're looking for 😆

▶️ Check our Website ◀️

Table of Contents

• Introduction
• User Story
• APIs
• Optimisation
• Deployment on Heroku

Introduction

We tried to create a website that enables users to quickly find and select words from a list of suggestions, as they type.The list is dynamically generated from a pre-populated list of values, leveraging searching and filtering.

The website will take the word that the user chosen from the options that he had on the screen and make an API call (Oxford Dictionary) where from that he's able to bring the defination of each single word . Furthermore, after getting the defination of the word, the website will make another API call (GIPHY) where we having a random GIF for the word which the user is searching for.

User Story

# 1st Scenario 
    - User: Entered the website and 
    clicked submit without typing anything
    - Result : Nothing happend until the user type
    something and click the submit button
    
# 2nd Scenario 
    - User: Entered the website and typed a word 
    - Result : Autolist of words will be generated where
    the user can choose from.
    
# 3rd Scenario

    - User: Entered the website, typed a word with an 
    existing definition/gif available on the API's, 
    and clicked submit.
    - Result : On submit, the autogenerated list of words will be 
    cleared and the definition of the word that the user typed
    will pop up on the screen with GIF related to the word itself 
    above the definition. 
    
# 4th Scenario

    - User: Entered the website, typed a word without an
     existing definition/gif available on the API's, 
     and clicked submit.
    - Result : On submit, the autogenerated list of words will 
    be cleared and an error message will appear, telling the user 
    that a definition is unavailable. In case there is no gif 
    available, a monkey will appear looking disappointed
    , and a message will advise the user that no gifs were
    returned from the search.

APIs

We used Oxford Dictionary and Giphy:

Oxford Dictionary

The Oxford Dictionary API had a handy feature in its documentation to sample and test API calls.

Optimisation

In order to improve th e user-experience speed, we decided to save a local file of words onto the server, in order to save the time that would otherwise have been spent frequently loading from a remote API.

Deployment on Heroku

We created a repository on Heroku and followed instructions to host our app.

How to set up heroku on your local app

In your command line interface, enter the following:

sudo snap install heroku --classic 
...

heroku login
...

cd <your local app location>
...

heroku git:remote -a stormy-tundra-48773
...

Heroku instructions

We followed the following steps in our terminal:

• heroku create
  • (creates a remote named 'heroku')
• git remote -v
  • Checks that a remote has been set.
• git push heroku master

We then encountered the following error:

So we viewed our application logs on our Heroku app page:

As shown, we had an error "H10", which is described in the omplete Heroku error codes. Or better still, here's a handy guide explaining the possible issues.

Basically, we needed the following process.env code in our server:

var port = process.env.PORT || 3000;

server.listen(port, () => console.log('node http server listening on http://localhost:' + port))

Other useful Heroku commands

heroku logs --tail 
(view logs)

git push heroku master
(pushes commited changes to the heroku repo)

Schedule of Tasks

• Create back end
• Linting
  • https://github.com/WebAhead/master-reference/blob/master/coursebook/week-6/linter.md
• Create front end
• Testing
  • https://github.com/foundersandcoders/ws-tdd-node-server
  • https://github.com/visionmedia/supertest
• Utilise Travis
• Decide how to optimise speed of user experience (should we preload any words?)