Crypto Dashboard App

Project Goal 🎯

cryptoapp

Authentication Middleware

This code defines an authentication middleware that manages access to certain routes. Public routes like `/`, `/signup`, and `/login` are accessible without authentication, while other routes likely require the user to be authenticated.

BNB to Fiat Conversion

This code defines an asynchronous function `binanceToFiat`, which converts a given amount of BNB to a specified fiat currency using an exchange rate. It takes `amountInBnb` and `convertTo` (a supported currency) as parameters, fetches the conversion rate, and calculates the equivalent fiat amount.

Fetch Balance Using Web3

This code fetches the user's balance from MetaMask using Web3. It retrieves the balance in Wei and converts it to Ether. Additionally, it uses the BNB to fiat conversion function to display the balance in USD as well. Error handling is implemented in case MetaMask is not found or the balance retrieval fails.

Fetch Total Transactions

This function fetches the total number of transactions for the user's Ethereum account using Web3. It interacts with MetaMask and retrieves the total transaction count for the user's wallet, handling errors if MetaMask is not found or the fetching process fails.

Lightweight Chart Creation

This code defines the creation of a lightweight chart using the `createChart` function from TradingView. It sets the layout options, grid lines, and visibility of the price scale and time scale for the chart. The chart is rendered inside a container with a responsive width and height.

3D Globe with Three.js

This code creates a 3D globe using Three.js. It loads textures for the globe's surface and specular highlights. The globe is displayed within a Canvas, and the OrbitControls are used to manage user interaction, such as rotating the globe. The ambient light adds illumination to the scene.

Skills Gained

Working on this project has helped me develop the following skills:

Future Plans

Ideas I have for expanding and improving this project in the future:

  • Current Market Data Integration: Fetch live cryptocurrency prices using an API and display them on the dashboard, with the option to set price alerts.
  • User’s Recent Transactions: Display a list of recent transactions with details like hash, timestamp, gas fees, and status. Add transaction filtering based on criteria.
  • Portfolio Overview: Fetch and display all tokens in the user's wallet and visualize portfolio performance with historical charts.
  • Watchlist Feature: Allow users to create a watchlist of cryptocurrencies or tokens and track metrics like price, market cap, etc.
  • Staking and Earning Features: Show staking options for tokens held by the user and display available yield farming opportunities.
  • Gas Fee Estimation: Display real-time gas prices (low, average, high) and offer a gas fee estimator for optimizing transaction costs.
  • NFT Integration: Display NFTs held by the user and allow them to track the value of NFTs by integrating with platforms like OpenSea.
  • Analytics and Insights: Provide transaction analytics and insights, and integrate a risk assessment tool to flag suspicious transactions.