Merge pull request #66 from quiknode-labs/con-191-sample-app-about-cr…

…ypto-market-data-api-marketplace-add-on

[CON-191] Crypto Portfolio Tracker with the Crypto Market Data API Marketplace Add-on

sample-dapps/crypto-portfolio-tracker-with-the-crypto-market-data-api/.env.sample

@@ -0,0 +1 @@
+VITE_QUICKNODE_ENDPOINT="YOUR_QUICKNODE_ENDPOINT"

sample-dapps/crypto-portfolio-tracker-with-the-crypto-market-data-api/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

sample-dapps/crypto-portfolio-tracker-with-the-crypto-market-data-api/.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Local environment variables
+.env

sample-dapps/crypto-portfolio-tracker-with-the-crypto-market-data-api/README.md

@@ -0,0 +1,121 @@
+# Crypto Portfolio Tracker
+
+## Overview
+
+The Crypto Portfolio Tracker is a web application that allows users to input their cryptocurrency holdings and track their portfolio value over time. The app fetches current and historical exchange rates to display the total portfolio value and a chart of historical portfolio values in various currencies. It is built using TypeScript, Vite, and Tailwind CSS.
+
+> For a detailed guide on how to build this application and utilize the [Crypto Market Data API](https://marketplace.quicknode.com/add-on/crypto-market-data-api), please visit our [comprehensive guide on QuickNode](https://www.quicknode.com/guides/quicknode-products/marketplace/how-to-build-a-crypto-portfolio-tracker-with-the-crypto-market-data-api).
+
+![Crypto Portfolio Tracker Overview](public/overview.png)
+
+## Features
+
+- **Add and Manage Holdings**: Users can add, edit, and remove cryptocurrency holdings.
+- **Current Portfolio Value**: Fetches and displays the current value of the portfolio in the selected currency.
+- **Currency Selection**: Users can select the currency in which to view the portfolio value (default is USD).
+- **Time Interval Selection**: Users can select the time interval for viewing the historical portfolio value.
+- **Historical Portfolio Value**: Displays a chart of the portfolio's value over time.
+- **Pie Chart**: Visual representation of the portfolio distribution in percentage and USD value.
+- **Export Data**: Users can export the historical portfolio value data as a CSV file.
+
+## Getting Started
+
+### Prerequisites
+
+Before you begin, ensure you have the following:
+- [Node.js](https://nodejs.org/en/) installed on your system.
+- A QuickNode account with the [Crypto Market Data API](https://marketplace.quicknode.com/add-on/crypto-market-data-api) enabled.
+> Crypto Market Data API is a paid add-on. Please check the details [here](https://marketplace.quicknode.com/add-on/crypto-market-data-api) based on your needs.
+- [Typescript](https://www.typescriptlang.org/) and [ts-node](https://typestrong.org/ts-node/)
+
+You can install TypeScript and ts-node globally using the commands below:
+
+```bash
+npm install -g typescript ts-node
+```
+
+### Installation Dependencies
+
+1. Clone the repository to your local machine:
+```bash
+git clone https://github.com/quiknode-labs/qn-guide-examples.git
+```
+
+2. Navigate to the project directory:
+```bash
+cd sample-dapps/crypto-portfolio-tracker
+```
+
+3. Install the necessary dependencies:
+```bash
+npm install
+```
+
+### Setting Environment Variables
+
+Rename `.env.example` to `.env` and replace the `YOUR_QUICKNODE_ENDPOINT` placeholder with your QuickNode endpoint that the **Crypto Market Data API** is enabled.
+
+```sh
+VITE_QUICKNODE_ENDPOINT="YOUR_QUICKNODE_ENDPOINT"
+```
+
+> Please note that while we utilize `dotenv` for environment variable management, sensitive information like endpoints can still be visible on the frontend. This configuration is not recommended for production environments as-is.
+
+
+### Running the Application
+
+Run the development server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:5173/](http://localhost:5173/) with your browser to see the application.
+
+## Usage
+
+- **Add Holdings**: Input the cryptocurrency asset and amount, then click **Add**.
+- **Manage Holdings**: Edit or remove holdings as needed.
+- **Select Currency**: Choose the currency in which to view your portfolio value.
+- **Select Time Interval**: Choose the time interval for viewing historical portfolio value (e.g., 5 Minutes, 1 Hour, 1 Day).
+- **View Current Portfolio Value**: The current portfolio value and pie chart are fetched immediately after you add or update assets to your holding.
+- **View Historical Portfolio Value**: Click **Calculate Portfolio Value** to fetch the historical values.
+- **Export Data**: Click **Export as CSV** to download your historical portfolio value data.
+
+## Project Structure
+
+- `src/`: Contains the source code for the application.
+  - `components/`: Contains React components.
+  - `interfaces/`: TypeScript interfaces for type definitions.
+  - `services/`: Functions for fetching data from APIs.
+  - `utils/`: Utility functions.
+- `public/`: Static assets.
+- `.env`: Environment variables.
+- `vite.config.ts`: Vite configuration.
+
+## API Integration
+
+The application integrates with the following APIs:
+- **QuickNode Crypto Market Data API**: For fetching current and historical exchange rates.
+  - `v1/getAssets`: Fetch all available assets.
+  - `v1/getCurrentExchangeRates`: Fetch current exchange rates.
+  - `v1/getHistoricalExchangeRates`: Fetch historical exchange rates.
+
+## Contributing
+
+Contributions are welcome! Please open an issue or submit a pull request for any changes.
+
+## Acknowledgements
+
+- [QuickNode](https://www.quicknode.com/) for providing the Crypto Market Data API.
+- [CoinAPI](https://www.coinapi.io/) for the market data.
+
+## Contact
+
+For any inquiries or issues, please contact [[email protected]](mailto:[email protected]).
+
+## Conclusion
+
+The **Crypto Portfolio Tracker** effectively utilizes **Crypto Market Data API** to provide a functional tool for managing and analyzing cryptocurrency portfolios. This application demonstrates how to integrate real-time and historical market data to track portfolio performance and gain valuable insights.
+
+The features implemented here are just a starting point. You can customize and extend the application to suit your specific needs, whether for personal use, financial analysis, or development of crypto-related projects.

sample-dapps/crypto-portfolio-tracker-with-the-crypto-market-data-api/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Crypto Portfolio Tracker</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

sample-dapps/crypto-portfolio-tracker-with-the-crypto-market-data-api/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "crypto-portfolio-tracker-crypto-market-data-api",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.18",
+    "@mui/material": "^5.15.18",
+    "axios": "^1.7.2",
+    "chart.js": "^4.4.3",
+    "chartjs-adapter-date-fns": "^3.0.0",
+    "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  }
+}

sample-dapps/crypto-portfolio-tracker-with-the-crypto-market-data-api/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

sample-dapps/crypto-portfolio-tracker-with-the-crypto-market-data-api/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}