Crypto Converter and Watchlist

This web application accumulates different information about crypto currencies using CryptoRank API.

Here you can:

• convert crypto currencies,
• see extensive list of crypto currencies with prices and other information.

It is deployed to Vercel and is available at https://crypto-converter-and-watchlist.vercel.app/

Features

Converter

• Retrieves information about crypto currencies via CryptoRank API;
• Allows to choose crypto currencies and input the number you want to convert;
• Allows to quickly switch left-hand and right-hand currencies.

Watchlist

• Retrieves information about crypto currencies via CryptoRank API;
• Allows to see following information about crypto currencies in a table format: Name, Price (USD), Circulating supply, Market cap (USD), Category, and Historical price (USD) from 24 hours / 7 days / 30 days / 3 months / 6 months ago;
• Pagination is implemented using limit and offset parameters from CryptoRank API.

calculateHistoricalPrice function

• Accepts current price and percentChange as its arguments and returns historicalPrice;
• Price and Percent change from 24 hours / 7 days / 30 days / 3 months / 6 months ago are received from CryptoRank API;
• Resulting Historical prices are displayed in separate columns in the Watchlist table.

Tests

• Integration & unit tests for React components;
• Unit tests for utility functions (including calculateHistoricalPrice).

Other notable features

• big.js library is used to save precision in arithmetical operations;
• Dropdown is searchable;
• Skeleton component is used as a placeholder in table cells for a loading state;
• For a nicer formatting of numbers, formatNumberToSI utility function is written.

Tools & Technologies

• Next.js
• React
• TypeScript
• styled-components
• SWR
• big.js
• Jest & React Testing Library
• Eslint & Prettier
• npm & Node.js
• Vercel

If you want to run this application locally

1. Clone this repository to your computer.

   If you are not familiar with cloning GitHub repositories, check GitHub Docs.

   In the Terminal, go to the cloned project directory.

2. Sign up on Cryptorank website and generate API key.

3. Create .env.local file in the root folder of the project with following contents: NEXT_PUBLIC_CRYPTORANK_API_KEY='YOUR_API_KEY', where YOUR_API_KEY is the API key you generated in the previous step.

4. Run following command to install all necessary dependencies:

   If you don't have npm installed on your computer, follow npm Docs tutorial to install it.

   npm i && npm run dev
   

5. After that, your browser should automatically open a new tab and display the application. If it didn't happen, type

   http://localhost:3000/
   

   in the address bar of your browser.

   You are now ready to explore the application!

6. To run tests, first create .env.test.local file in the root folder of the project, and insert there the same contents as in your .env.local file.

7. After that, run

   npm run test
   

   to start tests and to see test coverage.