Aim of this challange:

  1. Test HTML/CSS (preferable SCSS) skills within Vue.js APP by implementing typical&simple provided Figma screens
  2. Test backend integration skills by simplest WebSocket server (no REST, only one WebSocket connection, no authorization, no databases, as simple as possible)
  3. Test environment setup skills (WebSocket library on a node)
  4. Test ability to quickly work with new staff e.g. node backend project which is new to an executor
  5. Test minimal logic skills by crafting simple backend logic of traditional CRASH game (logic described here)
  6. Test task understanding skills
  7. Check whether candidate can understand simple English
  8. Test ability to describe in clear way the steps how to run his code on local PC of other developers (via Readme file)

Deliverables

Public GitHub Repository.

😉 All rights on code created in the task are reserved by you (an executor), and executor can use it for any future purposes without agreeing with Devforth, e.g. CV, Portfolio, OpenSource, commercial development, etc. In this way you can make sure this is only a test task and we can't sell your code (just in case if it is not obvious).

Repo should contain a README.md file in a root which should have a minimal set of instructions to run the app e.g.

git clone


cd xx


npm ci


npm run serve


# etc.. in other terminal:


cd back


npm run x


# etc.

The started app should have a design provided in Figma (only desktop resolution) and backend on nodejs.

UX & UI

Link to a Figma file: https://www.figma.com/file/dminjXCYQ4mdSIbw7lIysB/Devforth-CrashGame-Task?node-id=1%3A5.

Look at the first screen:

Image for a hint

UI has:

  • 1 panel
  • 1 button
  • 1 input
  • several dynamic texts

Only box-shadow and text-shadow features are enough to implement it with HTML+CSS (no images, no gradients, etc), please look carefully at Figma. You can also use flexbox, position: relative/absolute etc, fixed widths, no responsive features are needed.

Use Figma Clone feature to copy file into your account and make measurements and take a look on props.

Image for a hint

You could also use figma inspect to copy some styles if it makes work easier:

Image for a hint

Logic requirement

When user opens an app he should get some fixed balance, let it be $100.

Then user has a 5 seconds to place bet for an upcoming round (bet should be limited from 1 to CURRENT_BALCANCE_VALUE). User should see countdown: 5,4,3,2,1

Image for a hint

Then round starts. If user have not made a bet then we should count his bet only to next round or freeze INPUT and BUTTON (make them not clickable and put opacity: 0.1).

If user made a bet we should freeze only INPUT so user can't change a bet until round finishes, also in this case we shoud replace PLACE A BET button with red state and TAKE button (see below).

When round starts user should see so called multiplier (orange one):

Image for a hint

User should see updates of the multiplier with best frequency (idially > 25 FPS)

If user hits TAKE before so called crash then he wins and receives new balance. E.g. if in the round exmple user will hit TAKE on x2.5, but crash will happen on 2.7 user should see:

Image for a hint

He won $25 🏆

Otherwise we should show:

Image for a hint

User lost a $10 🔥

Backend

Suggested technology - simplest node project with npm init and index.js

Backend send messages:

  • round_countdown args: {countdown:int} - 5,4,3,2,1, when round preparation in progress
  • multiplier_update args {multiplier:int} - when round in progress, 25 times per second or more oftenly
  • new_balance args {balance:int}- when user have new balance updated

Backend accepts message from frontend:

  • make_bet - args {value:int}
  • take - args {}

Frontend

Vue.js 2.x or 3.x.

When app loaded make a direct connection to the backend on localhost.

Subscribe to messages.

⚠️ Please consider next warning before starting:

This is only a test task, so we will not pay you for it. So please start it only if you believe it will not hurt your time. According to our tests: most skilled developer we hired made it within ~1.5 hour (by his words), longest execution took near 18 hours but anyway the guy is one of our best frontend developers now.