Main Layout
The main layout of the a with consist of a sticky header and the main content below it
Header wi have a nav menu, with two options, first the Home age, which wi be active by
default, second is the Trade
Header wi aso have the user info section on the far right of it if the user is not logged in,
then this section wi show the log-in button
Clicking the log-in button wi show a moda with an ogin form with two fields, email and
password.
Home Page
Home age wi show a crypto assets ist/tabe, initial it wi show 10 items and theist/tabe wi
be expandable, on-demand by clicking a button
Users can sort using the asset name or the asset rice
Each crypto item wi show the rice, icon, name, and a button that shows a dropdown with
two options, Buy and Se.
Trade Page
Trade age wi show a single form, user can interact with this form only if he is logged in, the
the form we have the following elements
The first find must be a Crypto amount input field, the same field wi show a dropdown menu to
select one of the available assets.
The goal of this project is to use ReactJS capabilities and its paradigms by creating a simple
Crypto Trading App.
The fully functional code must be uploaded to GitHub. The work must be yours, no other person
should be directly or indirectly involved. After you complete the work please provide us the GitHub
link where we can download and assess the work.
React
Developer Task
Licensed by the Central Bank of Bahrain
Trade Page (Cont.)
The second field must be a Fiat amount input field, this field will show the rate of the entered
crypto amount in the first field in USD currency
Users can use the first input field to enter the amount of crypto to show the rate for, second
the field will show the cost/rate of the crypto amount entered in the first field in the USD
currency, this all must happen while the user is entering the amount
Users can swap these two fields by clicking the swap button (third element), meaning, the user
can enter and select the fiat amount in the first field, and the second field will show the
amount of crypto he can get from paying the amount entered in the first field.
Technical Requirements
Resources
A must be written fully using Typescript
A must be following the latest Javascript, Typescript, and React latest standards and the best
practices
You must utilize React-query as much as possible when communicating, caching, filtering or
agitating
Feel free to use any state management library if needed (we refer to Zustand for the simplicity
and ease of use with hooks)
Authentication must be handled locally
Not using a UI components library and creating a basic design system (for the buttons, input,
text) or using a headless UI is a plus.
Job Type: Full-time
Pay: $7,000.00 – $7,500.00 per month
Schedule:
Experience:
Work Location: Remote