Dauntless React, NextJS and TypeScript Test

Overview

The purpose of this test is to assess your skills and approach to composing a simple NextJS React web app given an API feed.

This test is expected to take about 2-4 hours.

Getting Started

Download or clone this repo.

Install dependencies and run the development server:

npm install
npm run dev

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

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API for application test

For this test you will be making use of the the free CoinGecko API.

Keep in mind when building that their free API has a rate limit of 50 calls/minute, however this should be more than sufficient.

Application requirement

• Convert the static content generated by the array called cards in to a dynamic feed of crypto currencies that are traded against the dollar (USD).

• Access the CoinGecko api using the /coins/markets endpoint and return 45 results using USD for the vs_currency parameter

• With the returned data you will need to display the 45 results with the following information on the cards;

  • Image
  • Currency Name
  • Current Price
  • 24h High Price
  • 24H Low Price

• The cards currently have a "MORE" button that is not connected to any routes. This button needs to take the user to a route for the clicked on currency with the path following the following format /currency/{symbol} where {symbol} is a value from the returned data.

• Once the user lands on the /currency/{symbol} page for the selected crypto currency you need to display the following information;

  • Currency Name
  • Current Price
  • All time high price
  • Market Cap
  • Market Cap Rank

Additional items to consider

• Ensure you have navigation back from the currency specific pages back to the main list page.
• The code provided has no code or libraries related to data fetching and this is the main focus of what you are implementing. For this test we do not require that you use a specific library but would recommend Tanstack Query as this is our preferred option.
• Making use of Hooks where and if it may make sense would show us your understanding of this.
• If you would like to showcase your understanding of component styling then feel inspired to modify the basics that have been provided to you.

Steps to complete your project

• At the start of this project you would have forked the Dauntless React Test repository and once you are complete we would like you to push the code to a public repository in your github account and then provide the link to the repository to Dauntless.