• Notes
• Getting Started
  • Prerequisites
  • Running locally
• Usage
• Original Challenge Prompt

1. I decided to try Nivo for the charting library. In the past, I've used chart.js the most, but it does not work well if SSR is a goal. I chose Nivo because it has an active developer community with over 11k stars on GitHub, is very customizable, and offers HTML + SVG charts that can be server-side rendered.
2. I used the Coin Metrics API to scrape the time-series data into a JSON file in the ./data directory.
3. I hit my time-box (got bored) for this PoC, so I did not get to add functionality to filter the chart by YTD, 12M, 3M and/or 1M. I would have also liked to make the components a little more generic, so you could show ETH, LTC, DOGE, ETC with little code duplication. And lastly, as a color-blind person, I would have liked to customize each line with a pattern or texture to make it easier to distinguish between them.

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

• Node.js >= v16.20.0 (needed for Next.js v13.x.x) - Install Node.js
• npm >= v9.7.1 - comes pre-installed with Node.js.

1. Install dependencies:

   npm i

1. Start the development server:

   npm run dev

2. Open http://localhost:3000 with your browser to see the app.

1. Create an area or line chart that displays an all-time historic view on btc address balances

2. Draw 5 lines in different colors displaying balances

• over $1k
• over $10k
• over $100k
• over $1M
• over $10M

3. Display a legend that labels each line color.

• Add buttons and filter functionality to filter the chart by YTD, 12M, 3M and 1M.
• Improve performance by leveraging server side rendering (SSR)