# Live coding task: fetch data from an api based on a date range

At Topsort we frequently use a pattern of decoupling the frontend from the backend, fetching data via API calls.

Our clients are now asking us to create an analytics page that shows clicks and impressions for a given product.

The client wants to choose a date range (last 7 days by default) between now and up to 90 days back in time. As the date is selected, the api is queried and data is returned back to user.

## Task

- Create an api in either python or typescript/javascript that, given a date range (and optional product id), returns the product id, clicks and impressions grouped by day.
- Create a frontend component/page that allows the client to choose dates and show that the data is returned. a user should be able to change the date range and retrieve new data without refreshing the page.
- Work within the restrictions of what the client wants

## Optionals (suggestions)

Here are a few example improvements you can implement if you have time. You can do other things as well; the idea is to improve the client experience as much as possible.

- Instead of only showing data via `console.table()` or similar, list it in a table view or even a simple graph component
- Error handling for both api and component (fetch error, invalid input, ..)
- Keep state such as date selection while refreshing the page
- Set proper cache headers to allow the client to keep state in the browser
- Unit tests for restrictions in API
- Support passing multiple product id's (for instance an input or dropdown) and return data with different factors

## Restrictions / guidelines

- Any open source framework, component library or template starters can be used to achieve the task.
- Feel free to use google, chatgpt or anything else that you usually go to for work
- Using tooling such as git, docker testing or linting frameworks and other collaboration tools are encouraged
- Ask questions as you see fit