ramoneclarke / cryptotrkr

Crypto tracker and portfolio app using React & CoinGecko API

CryptoTracker

Crypto tracker and portfolio app using React & CoinGecko API

Demo

Here is a working live demo : https://cryptotrkr.com

Built with

• React
• MUI
• Coingecko API

License

MIT

cryptotrkr's Issues

Remove dashboard page and make Market the home page

Create settings page

Add alerts button to market and watchlist tables

Change the 'active' value inside set data maps to watchListActive

To differentiate between the value for the watchlist chip and portfolio chip

Move currency selector to the mobile navbar in every page

Change percentage number format for 7d% and 24h%

Fix add alert popup error that selects the wrong coin

Fix the filter bar on the watchlist and portfolio pages

Change all price & % change in tables to align left

Change the name column on all desktop tables to use symbols next to names

Change button labels

• Add to watchlist button on watchlist page header
• Add to portfolio button on portfolio page header

Add restrictions to add transaction form

• Holdings can't be less than 0
  textfield validation
• Invalid format

https://regex-generator.olafneumann.org/
https://regexr.com/

https://stackoverflow.com/questions/35901440/how-to-invalidate-a-textfield-in-material-ui

Add an interactive alerts icon to the navbar

A bell icon with an overlay with the number of activated alerts. When clicked, a small window should pop up with details of the alerts. When clicked, the user will be forwarded to the Alerts page

Make watchlist pop up selector receive and display watchlist data

Tasks:

• Get the coin data from the Context within the dialog
• Create a List with a ListItem for each coin
• Add coin to watchlist when the ListItem is clicked

Change watchlist icon from star to eye

Add validation to alert forms

Restructure project components

Create the Alerts page

Create the alerts page that displays all of the active alerts, their details and the option to cancel alerts.

Tasks:

• Create the table for the page
• Connect the alerts data to the table
• Create a cancel alert button for each alert
• Add an alerts route for this page
• Find a way to display activated alerts and dormant alerts separately

Add a button for the alerts page to the navbar

Change hover and selected colours

Change Market table to use red/green arrows for % gain/loss

Instead of the current +/- next to each figure.

Tasks:

Set up alerts system

Create an alerts system in the Context that allows the user to set up price alerts for any coin

An array that contains all alert objects.
Alerts will be triggered inside a useEffect which checks every time coin data/prices are updated.

Tasks:

Create watchlist popup selector

Toggled by clicking the +Watch button on the Watchlist page. Users will be able to add any coin from this selector to their watchlist.

Tasks:

• Create pop up with MUI Dialog
• Make the window pop up when +Watch button is clicked, and close when clicking away from the Dialog
• Style the window

Create the portfolio page with the portfolio table

Tasks:

• create page outline/elements
• create portfolio table

Change default currency

Add balance viewer to the portfolio page header

Change portfolio to only show coins with holdings

No coin will be deleted from the portfolio object. They will just have 0 holdings and not be visible on the portfolio page

Change alerts page form to not show error by default

Fix watchlist chip colour change on portfolio page

Add 'remove from watchlist' watchlist button on each row in the watchlist & market

Remove titles from all pages

Align numbers in rank column to the centre in each table

Add snackbar for new added alerts

Change all buttons to have the same border radius

Improve performance in Alert & Portfolio popup forms

Set up portfolio structure

In UserContext

Tasks:

• Add to portfolio function, which adds the coin to portfolio if not already added
• Prompts to add transaction if already in portfolio
• Add transaction function, which takes a buy or sell

Change number formats in market table

Tasks:

• Price column
• Market cap, volume and supply

Add alerts buttons to each row on portfolio table

Tasks:

• An 'add alert' button
• A 'manage alerts' button, which shows active alerts solely for the selected coin

Change data source to coinData in watchlist popup box to fix no data issue

Create a transactions page that displays all historic transactions

Restructure each page's mobile layout

Move add alert button to name column on mobile page tables

Setup 'add to watchlist' button on each coin on the market page

With an 'added to watchlist' message after it has been added, and a change in color of the star icon.

Tasks:

• Each coin is added to the watchlist when the star icon is clicked
• Implement the MUI Snackbar with the 'added to watchlist' message
• Make the eye button of all coins that are on the watchlist a different color
• Remove coins from watchlist when clicked
  • Change button color to default color after removal

Add search functionality to watchlist popup selector

Fix add to watchlist selector to enable instant watchlist rendering

Currently when you add a coin from the selector, it isn't displayed until the next click

Set auto-focus on all filter search bars after rendering

Improve performance of watchlist popup selector

Tasks:

• Use react-window to make the list a virtualised list

Implement 'add transaction' form for portfolio

Tasks:

• Create addTransactionForm component
• Replace portfolio pop up box with addTransactionForm component

There will be no need to add coins to the portfolio before adding transactions anymore. If the coin hasn't been added to the portfolio previously, clicking the portfolio button will add it to the portfolio and render the addTransactionForm component

• Open addTransactionForm for selected coin when the coin is selected from the portfolio pop up box selector

Use flex in all tables to make tables responsive

https://stackoverflow.com/questions/67970440/how-to-make-material-data-grid-width-to-fill-the-parent-component-in-react-js
https://medium.com/nerd-for-tech/how-to-implement-material-ui-data-grid-in-your-project-part-ii-e94d91bfea36

Link addTransactionForm to portfolio chips on all pages