leonardtng / cryptoscapes

✨Cryptoscapes✨ : A Cryptocurrency Information Dashboard for the Casual Enthusiast!

⭐ About

Cryptoscapes started out from a few skills I wanted to learn and practice over my summer break from college, the state management library Redux, atomic design, and project management.

After tinkering with a bunch of cryptocurrency data with Redux, I eventually decided to create a simple UI to display this data, through the use of charts and graphs in a clean dashboard. Certain visualisations such as a heatmap displaying metric correlations between cryptocurrencies, also involve further manipulation of the data.

The result was Cryptoscapes, an information dashboard that displays prices, trends, status updates, market snapshots and much more. Visit the website at cryptoscapes.org to check it out!

🛠️ Key Technologies

This project was deployed on AWS and built using:

• React
• Redux
• TypeScript
• Material-UI

📝 Data Sources

The information and data used in Cryptoscapes is provided kindly by the following sources:

• CoinGecko
• ETH Gas Station
• Alternative.me
• Blockchain.com

🚧 Project Board

The development and task management of this website was done with the help of GitHub Projects, and the project board can be found here.

😊 Contact Me

If you liked the website or just want to get in touch, email me at [email protected] or drop me a message at the various social media platforms listed at the bottom of my website. Cheers.

cryptoscapes's Issues

[TASK] Coins Search Bar

User Story
As a user, I want to be able to search for coins from a search bar in the main app bar.

Epic Parent
EPIC: Coins Page

API Dependencies

1. https://api.coingecko.com/api/v3/coins/list

[TASK] Top Coins Card

User Story
As a user, I want to be able to view a list of the top 15 cryptocurrencies, with their name, icon, price and chart for the most recent 24H range.

Epic Parent
EPIC: Overview Page

API Dependencies

1. https://api.coingecko.com/api/v3/coins/markets
2. https://api.coingecko.com/api/v3/coins/{id}/market_chart

[TASK] Exchange Card List

User Story
As a user, I want to be able to see the list of exchanges and view details such as the trading volume, trust score and rank. Scrolling to the bottom should load more exchanges

Epic Parent
EPIC: Exchanges Page

API Dependencies

1. https://api.coingecko.com/api/v3/exchanges?per_page=30

[EPIC] Trends Page

Epic Details
This feature will allow the user to track price correlation between coins using a heatmap.

Describe the solution you'd like
User can view the heatmap, and filter which coin data to appear as well as the date range of the data.

List of Tasks (Complete in order)
The tasks below can be completed in order (or not) to complete this feature.

1. TASK: Correlation Heatmap Chart
2. TASK: Fear and Greed Index Card
3. TASK: Market Sentiment Card

Additional context
Add any other context or screenshots about the feature request here.

[TASK] Responsive UI

User Story
As a user, I want to be able to view the website on mobile, tablet and web

Epic Parent
EPIC: UI Baseline

API Dependencies
NA

[TASK] Trending Coins Card

User Story
As a user, I want to be able to view the trending coins for today based on search.

Epic Parent
EPIC: Overview Page

API Dependencies

1. https://api.coingecko.com/api/v3/search/trending

[TASK] Back to Top Floating Button

User Story
As a user, I want to be able to scroll to the top of the list via a floating button in the coin table and exchanges list.

Epic Parent
EPIC: Coins Page
EPIC: Exchanges Page

API Dependencies
NA

[EPIC] Overview Page

Epic Details
This feature will add the main overview analytics page where the user will be able to see various data visualisations pertaining to cryptocurrency coins

Describe the solution you'd like
Charts and analytics on coins today Mainly, a Top coin chart, dominance chart, ETH gas fees, top institution holders and some global data.

List of Tasks (Complete in order)
The tasks below can be completed in order (or not) to complete this feature.

1. TASK: Top Coins Card
2. TASK: Top 2 Coin Dominance Chart
3. TASK: ETH Gas Fees Card
4. TASK: Trending Coins Card
5. TASK: Global Data Card

Additional: TASK: Top Institution Holders Card

Additional context
Add any other context or screenshots about the feature request here.

[TASK] Coin List Table

User Story
As a user, I want to be able to view a list of coins and sort them by coin market cap and volume. Also able to load more coins after scrolling to the end of the list.

Epic Parent
EPIC: Coins Page

API Dependencies

1. https://api.coingecko.com/api/v3/coins/markets
2. https://api.coingecko.com/api/v3/coins/list

[TASK] Fear and Greed Index Card

User Story
As a user, I want to be able to see the current and historical Fear and Greed index. I also want a help tooltip to let me know what data contributes to the fear and greed index.

Epic Parent
EPIC: Trends Page

API Dependencies

1. https://api.alternative.me/fng/?limit=

[TASK] Companies Card

User Story
As a user, I want to be able to see the top holders of Bitcoin and Ethereum.

Epic Parent
EPIC: News Page

API Dependencies

1. https://api.coingecko.com/api/v3/companies/public_treasury/{coinId}

[TASK] Exchange Card Volume Modal

User Story
As a user, I want to be able to click on an exchange card to view the exchange's volume chart and toggle the day range to display.

Epic Parent
EPIC: Exchanges Page

API Dependencies

1. https://api.coingecko.com/api/v3/exchanges/{id}/volume_chart?days={days}

[TASK] Theme Toggle

User Story
As a user, I want to be able to change the UI theme

Epic Parent
NA

API Dependencies
NA

[TASK] Coin Details Page

User Story
As a user, I want to be able to view the details of one particular coin which I selected in either the top coins list or coin list table. Details should include charts, stats and the main website of the coin.

Epic Parent
EPIC: Coins Page

API Dependencies

1. https://api.coingecko.com/api/v3/coins/list
2. https://api.coingecko.com/api/v3/coins/{id}

[TASK] Add GitHub Templates

Add GitHub templates to the project repository

[TASK] Top 2 Coin Dominance Chart

User Story
As a user, I want to be able to compare the market cap dominance of the top 2 coins

Epic Parent
EPIC: Coins Page

API Dependencies

1. "https://api.coingecko.com/api/v3/coins/bitcoin/market_chart

[TASK] Hash Rate Card

User Story
As a user, I want to be able to see the historical Bitcoin hash rate.

Epic Parent
EPIC: Trends Page

API Dependencies

1. https://api.blockchain.info/charts/hash-rate?daysAverageString=7D&timespan=1year&sampled=true&metadata=false&cors=true&format=json

[EPIC] Exchanges Page

Epic Details
This feature will allow the viewing of the list of exchanges available on CoinGecko.

Describe the solution you'd like
Users can view a list showing the detailed cards for each exchanges, depicting information such as trading volume, trust score and rank. Also able to load more exchanges after scrolling to the end of the list. Clicking on the card header should direct the user to the exchange, and clicking on the card should open a popup displaying the volume chart

List of Tasks (Complete in order)
The tasks below can be completed in order (or not) to complete this feature.

1. TASK: Exchange Card List
2. TASK: Exchange Card Volume Modal

Additional context
Add any other context or screenshots about the feature request here.

[TASK] Links to Coin Details Page

User Story
As a user, I want to be able to see the coin details upon clicking the respective coin in any of the analytics pages.

Epic Parent
EPIC: Coins Page

API Dependencies

1. https://api.coingecko.com/api/v3/coins/list
2. https://api.coingecko.com/api/v3/coins/{id}

[TASK] Correlation Heatmap Chart

User Story
As a user, I want to be able to view a heatmap depicting the correlation of the price of each coin against each other with a score from 0 to 1

Epic Parent
EPIC: Trends Page

API Dependencies

1. https://api.coingecko.com/api/v3/coins/markets
2. https://api.coingecko.com/api/v3/coins/{id}/market_chart

[TASK] Progressive Web App

User Story
As a user, I want to be able to download the website as an app

Epic Parent
EPIC: UI Baseline

API Dependencies
NA

[TASK] Status Update List Card

User Story
As a user, I want to be able to view a list of latest cryptocurrency updates and be able to filter it by category.

Epic Parent
EPIC: Updates Page

API Dependencies

1. https://api.coingecko.com/api/v3/status_updates

[EPIC] Updates Page

Epic Details
This feature will allow users to view a cryptocurrency updates feed and top company holders.

Describe the solution you'd like
This feature will allow users to view a cryptocurrency news feed that allows for filtering by coin and sentiment. Can also view the top company holders of Bitcoin and Ethereum.

List of Tasks (Complete in order)
The tasks below can be completed in order (or not) to complete this feature.

1. TASK: Companies Card
2. TASK: Status Update List Card

Additional context
Add any other context or screenshots about the feature request here.

[TASK] Global Data Card

User Story
As a user, I want to be able to view the market cap and volume overview of the whole crypto market and change the chart type from donut/pie to treemap

Epic Parent
EPIC: Overview Page

API Dependencies

1. https://api.coingecko.com/api/v3/global

[REFACTORING] Move API Calls to Page Level

User Story
NA

Epic Parent
NA

API Dependencies
NA

[TASK] ETH Gas Fees Card

User Story
As a user, I want to be able to check ETH network gas fees

Epic Parent
EPIC: Overview Page

API Dependencies

1. https://api.etherscan.io/api?module=gastracker&action=gasoracle&apikey=
2. https://api.etherscan.io/api?module=gastracker&action=gasestimate&gasprice=2000000000&apikey=
3. https://www.etherchain.org/api/gasPriceOracle
4. https://ethgasstation.info/json/ethgasAPI.json

[REFACTORING] Integrate Rounding Decimals in Format Number

User Story
NA

Epic Parent
NA

API Dependencies
NA

[EPIC] UI Baseline

Baseline

• Base theme
• Drawer navigation
• Page Layout template

List of Tasks (Complete in order)
The tasks below can be completed in order (or not) to complete this feature.

1. TASK: Theme Toggle
2. TASK: Responsive UI
3. TASK: Back to Top Floating Button
4. TASK: Progressive Web App

[TASK] Heatmap Coin and Date Filter

User Story
As a user, I want to be able to filter the heatmap data by coins and set the date range of the data

Epic Parent
EPIC: Trends Page

API Dependencies

1. https://api.coingecko.com/api/v3/coins/markets
2. https://api.coingecko.com/api/v3/coins/{id}/market_chart

[EPIC] Coins Page

Epic Details
This feature will allow the viewing of the entire list of support cryptocurrency coins on Coingecko

Describe the solution you'd like
User can view a list of coins and sort them by coin market cap and volume. Also able to load more coins after scrolling to the end of the list. Upon clicking a coin item, brings them to a detailed coin page.

List of Tasks (Complete in order)
The tasks below can be completed in order (or not) to complete this feature.

1. TASK: Coin List Table
2. TASK: Coin Details Page
3. TASK: Link to Coin Details Page
4. TASK: Coins Search Bar

Additional context
Add any other context or screenshots about the feature request here.

[REFACTORING] Refactor API to Call Conditionally inside Redux Slice

User Story
NA

Epic Parent
EPIC: Coins Page

API Dependencies
NA