Skip to content

zumalabs/frontend-challenge

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

The Zuma Labs Frontend Challenge

Welcome to the Zuma Labs Frontend Developer Challenge. Please read all of the instructions in this ReadMe before beginning and refer back to it as required.

This task is designed to see how you like to code. There are no right or wrong ways to complete the challenge but we have some acceptance criteria we would like you to hit.

What are we asking you to build?

A React component(s) that fulfills the following brief:

Given a value that is changing over time, highlight the value each time it changes, with different highlights if the value increments or decrements.

Acceptance Criteria:

  1. Your component must display the value
  2. Your component must have resting state with no highlighting
  3. Your component must highlight increments in the value
  4. Your component must highlight decrements in the value

Is that all?

Pretty much, yep. You can take it as far as you want though. We want to see your style and approach.

Some Side Notes

  • Highlight can mean whatever you want it to mean, but bear UI and UX in mind. Want to add flashy bells, whistles or emojis, we will only learn more if you do but you won't fail if you don't.

  • You are welcome to use whatever aditional libraries, components or code you wish to complete the challenge. Want to style in SCSS SASS or LESS, go right ahead, StyledComponents more your thing? Treat yourself.

How does this all work?

Glad you asked!

  1. Fork this repo
  2. Clone it to your local machine
  3. npm i or yarn to install the dependencies
  4. Check out a branch on your local
  5. Have a dig about, its always good to get familiar (its create-react-app based)
  6. Head to src/Javascript/Tickable.jsx for Javascript or src/Typescript/Tickable.tsx for Typescript
  7. Build your component logic (we've already supplied you the ticking value as a prop)
  8. Check your work using yarn start or npm run start
  9. Once you are happy with your creation, commit your changes and push your branch to your remote fork
  10. create a Pull/Merge request with your changes on our repo (Your name as the title)
  11. Sit back and drink a beverage of your choice (optional).

Arrrrrgh Typescript!? I only know Javascript!

If your palms are sweating at the sight of all this Typescript malarkey, fear not intrepid programmatorial pugilist. While the repo you clone will be in predominantly in Typescript you won't need to know Typescript. There is a Javascript directory containing a file Tickable.jsx setup ready for your Javascript wizardry. If you want to take a crack at Typescript though, feel free.

EXTRA CREDIT (sort of)

Testing code is important, so if you know how add a test or two, show us your skills. Each of the language directories containing the component also have an empty test file. Like the main challenge, you are welcome to use any other testing libraries/frameworks to complete the verification of your tickable's solid and unfaultering foundations.

Don't panic!

Has it all gone wrong? Is Rome aflame? Fear not!

If you need to contact us regarding this challenge for questions, queries, or to notify us of something that isn't working as it should be, please respond to the email we sent you containing this challenge.

Did you read this all? If so, let us know by adding a 🐸 in a comment in your code.