- Please complete all tasks outline in the tasks section below
- There is no time limit
- Generally, this assessment should take around 4 to 8 hours to complete.
- You will not be graded on how long it takes you to complete it, but please be aware of the time expectation.
- Estimating the amount of time it takes to complete a task is a common practice within our team
- NOTE - The time estimation does not include installation or tasks marked as extra-credit
- Not every change required is outlined in the tasks section
- We want to see how you think through a problem
- Some tasks require updating multiple files for that task to be completed
- Don't be afraid to add, move, or change parts of the app. Show us what you can do
- You are encouraged to show your work through comments
- You don't have to comment every little change, but we would like to see your thought process
- While styles, look, and feel are not a priority, the app should look decent
- You will need the following installed:
- Fork this repo
- See the github docs on how to fork a repository if needed
- Clone your forked version locally
- Command:
git clone https://github.com/<github-user-name>/keg-tech-assessment
- Be sure to replace
<github-user-name>
with your own user name
- Command:
- Install the node_modules
- Command:
yarn install
- Command:
- Get the project running
- Command:
yarn start
- This will start two servers; a Webpack server and an API server
- To start them separately run the commands
yarn web
- Webpack Serveryarn api
- API Server
- Command:
-
Setup the environment
- Use the commands listed in the
Installation
section above - Open your browser to http://localhost:3000
- It should load the test application
- Use the commands listed in the
-
Fix the error messages
- Open your browser's inspector, to see all the errors on the page
- In the following steps, you will be asked to implement features, marked by errors in the inspector. As you work on and complete each one, please remove the error message.
- Once you have finished all the steps, there should be no errors showing in the browser's inspector
-
Get Goat Facts
- When clicking the
Get Goat Facts
button, it should call theonGetGoatFacts
method
- When clicking the
-
Add Goat Facts JSON API
- The server API has an endpoint that returns facts about goats when called
- See the code in
server/endpoints/goats.js
- Goat Facts Endpoint
- Method:
GET
- Path:
/goats
- Method:
- See the code in
- Update the
server code
to ensure the/goats
API endpoint is reachable - Next update the
code
ingetGoatFacts.js
- It should make a
GET /goats
call to the server API - It should return a
json
response with an array of goat facts under the data property
- It should make a
- The server API has an endpoint that returns facts about goats when called
-
Add Goat Facts to the Dom
- After getting the goat facts from the server API in step 4
- Update the code in
addGoatFacts.js
to do the following- Clear out any past goat facts under the
ul#goat-facts-list
element - Add each new goat fact to the dom as an
li
element- Each element should be a child of the
ul#goat-facts-list
element
- Each element should be a child of the
- Clear out any past goat facts under the
-
Alternative Facts
- Add 2 new input elements to the dom
- One should be for text
- The text input should only allow a single word (i.e. No Spaces)
- The other should be for numbers
- The numbered input should only allow numbers
- One should be for text
- Update the code in
filterGoatFacts.js
to filter the goat facts with the following rules- The text input defines a word
- The numbered input defines the index of that word within a sentence
- Any goat fact that has a matching word at the defined index should be displayed
- All non-matching goat facts should be hidden
- For example, if the text input content is
test
, and the numbered input content is3
- Then only a sentence with the word
test
as the third word, would match This test is lame
=> DOES NOT MATCH (should be hidden)Doing this test is fun
=> DOES MATCH (should be displayed)- Test is the third word in this sentence, so it would match the above defined filter
- For example, if the text input content is
- When a word is entered into the text input, and a number is entered into the numbered input
- Then the
filterGoatFacts
code should run - It should only display goat facts that match the defined inputs
- All other goat facts should be hidden
- If either or both text inputs are empty, all loaded goat facts should be displayed
- Then the
- Add 2 new input elements to the dom
-
Dockerfile
- In the
container
folder there is aDockerfile
- Write a docker file for this application
- You should be able to run the following commands successfully
yarn doc:build
- Command should build the docker imageyarn doc:run
- Command should run the docker image, starting the app within ityarn doc:test
- Command should complete without throwing any errors- Run this command in a separate terminal tab while the docker container is running
- You should be able to run the following commands successfully
- In the
-
Testing Framework
- Choose and implement a unit testing framework for the appplication.
- Make sure that running yarn doc:test includes these unit tests.
- For purposes of this assessment, only the backend needs to be tested.
-
Update API
- Update the Goat Facts API so that it no longer uses a flat-file data source but instead uses a database.
- You may use any database you like.
- Import the current contents of the flat file into the database so that the functionality of the API remains unchanged from the front end.
-
Deploy to the Cloud - extra credit
- How this is done is not important. It just needs to be accessible via the internet in some way
- Submit a pull request to this repo
- Send an us an email, letting us know it has been submitted