Hi there!
Since you're here, you're probably taking part in our recruitment process for a front-end developer position, right?
We're super happy to hear that! Getting right to it — the main purpose of this test is to check out your front-end skills. We'd like to get to know your approach of solving the following problems:
- Implement functionalities from user stories.
- Use Vuejs library with Typescript.
- Use the GraphQL api endpoint to get the data.
- Use Tailwind CSS for CSS.
- Provide the best possible User Experience (being strict with the designs, responsiveness, hover/focus states of interactive elements everything to your liking and ideas).
Feel free to open an issue if you got any questions or suggestions! Once it's ready, send us a repository link at [email protected].
Happy coding and cheers,
Louis, CTO @ Riot
- List all the profiles with the appropriated timer duration / color from the GraphQL API.
- When I click play the timer should start to countdown.
- When a timer is playing, I should be able to pause the timer.
- When a timer is paused, I should be able to resume the timer.
- I can play multiple timer in the same time.
- When the timer is 0, the button restart is shown and give the ability to restart the timer to its duration.
- See a circular progress bar that updates represents how far through their timer they are
You can find a Figma file of the User Interface here.
You will find a graphQL API on this endpoint: https://relaxing-pipefish-44.hasura.app/v1/graphql
you can use a GraphiQL online website: https://cloud.hasura.io/public/graphiql?endpoint=https://relaxing-pipefish-44.hasura.app/v1/graphql to preview and try the API.
Once finished, send me your repository link by email: [email protected] & book a call HERE