---
# System prepended metadata

title: Price app challenge

---

# Price app challenge


## Instructions: Code the price App
* Try to get as far as possible in the challenge while **always explaining your thinking process**.
* Avoid looking in google for snippets, but if you **really** need it, you can.
* You start with some boiler plate code [Code Sandbox](https://codesandbox.io/s/adoring-glitter-zhspsn?file=/src/App.tsx) (Basic React + Typescript project)
* Share your screen or use live sharing
* If you can't complete any of the parts, you can try to explains how you would do it
* You can skip any point if you are stuck

## Price App
👇👇👇👇 Let's try to make this app (reference) 👇👇👇👇
![](https://i.imgur.com/cICYYUR.png)


## Requirements (no particular order required)
1. Right now the data is shown in the UI as an unformatted JSON via a synchronous mock function. Convert the mock function to an async one and load/display the data. 
2. Add some markup for the price cards.
3. Some of the prices refer to the same date. Can we aggregate them into only one **average** price? 
4. Render the app logo and fix any broken types.
5. Let the user specify the currency via any method of your choosing.
6. Style the prices in a grid format (e.g css grid or flex).
7. Periodically refresh.

## Bonus
* Make it look nice. Try to make it as close as possible as the picture.
* Implement the progress bar. The bar is proportional to the number 1.
* Can you make it more efficient?
* Can you make it responsive?
* How can this app be improved?
