Enhancing the features

Author: rollendxavier

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+src/.env

README.md

@@ -1,7 +1,8 @@
 # Cryptocurrency Tracker
 
 This project is a cryptocurrency tracker built with React JS and the CoinGecko API. It allows you to monitor real-time prices of your favorite cryptocurrencies and visualize their historical data.
-![image](https://github.com/rollendxavier/crypto-portfolio-tracker-react/assets/42246854/1fb4d23d-e272-442e-aee0-14b2a9145485)
+
+![image](public/crypto-dashboard.jpg)
 
 ## Prerequisites
 

images/bf483fcd-bc37-4ce6-a36c-cf27b9ece928-cover.png

@@ -19,7 +19,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
     "extends": [
@@ -41,6 +43,8 @@
     ]
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
-  }
-}
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "gh-pages": "^6.3.0"
+  },
+  "homepage": "https://rollendxavier.github.io/crypto-portfolio-tracker-react"
+}

package-lock.json

@@ -1,32 +1,35 @@
 body {
-  font-family: Arial, sans-serif;
+  background: #1F1F1F;
+  color: #A9A9A9;
+  font-size: 14px;
+  margin: 0;
+  padding: 15px 0 30px;
+  font-family: 'Roboto', sans-serif;
 }
 
 .App {
-  text-align: center;
+  margin: 0 auto;
+  width: 1000px;
 }
 
 .App-header {
-  background-color: #ffffff;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: rgb(7, 7, 7);
+  margin: 0 auto;
+  width: 100%;
+  display: inline;
+  float: left;
 }
 
 .news-ticker {
-  font-size: 0.9em; /* Adjust the font size */
-  padding: 5px; /* Adjust the padding */
-  background-color: #f9f9f9;
+  font-size: 0.9em;
+  padding: 5px;
+  background-color: #333;
   text-decoration: none;
   display: inline-block;
   margin-right: 10px;
   border-radius: 3px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
   transition: transform 0.3s ease-in-out;
-  color: #690c0c; /* Make the text really black */
+  color: #fff;
 }
 
 .news-ticker:hover {
@@ -35,19 +38,20 @@ body {
 
 .news-ticker h1 {
   margin: 0;
-  font-size: 1em; /* Adjust the font size */
+  font-size: 1em;
   font-weight: bold;
+  color: #fff;
 }
 
 .news-ticker p {
   margin: 2;
-  font-size: 0.7em; /* Adjust the font size */
-  text-align: left; /* Align the text to the left */
-  color: rgba(25, 10, 245, 0.932);
+  font-size: 0.7em;
+  text-align: left;
+  color: #bbb;
 }
 
 h1, h2, h3 {
-  color: rgba(31, 28, 28, 0.842);
+  color: #ddd;
 }
 
 table {
@@ -56,7 +60,7 @@ table {
 }
 
 table, th, td {
-  border: 1px solid #111111;
+  border: 1px solid #333;
   padding: 8px;
 }
 
@@ -69,7 +73,7 @@ th {
 }
 
 tr:nth-child(even) {
-  background-color: #d4aeae;
+  background-color: #2f2f2f;
 }
 
 .coin-details {
@@ -83,15 +87,15 @@ tr:nth-child(even) {
 .ReactDatePicker input {
   width: 100%;
   padding: 10px;
-  border: 1px solid #ddd;
+  border: 1px solid #333;
   border-radius: 4px;
   margin-bottom: 10px;
 }
 
 select {
   width: 100%;
   padding: 10px;
-  border: 1px solid #ddd;
+  border: 1px solid #333;
   border-radius: 4px;
   margin-bottom: 10px;
 }
@@ -100,4 +104,17 @@ select {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-}
+}
+
+.crypto-news-analyzer {
+  width: 71%;
+}
+
+.suggested-coin {
+  font-family: 'Roboto', sans-serif;
+  color: #FFA600;
+  text-decoration: none;
+  border: 1px solid #333;
+  background-color: #1F1F1F;
+  color: #A9A9A9;
+}

package.json

@@ -5,6 +5,7 @@ import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import './App.css'; // Import the CSS
 import NewsTicker from './components/News'; // Import the News components
+import CryptoNewsAnalyzer from './components/CryptoNewsAnalyzer'; // Import the CryptoNewsAnalyzer components
 
 function CoinDetails({ coin, history }) {
   // Prepare the data for the line chart
@@ -15,7 +16,7 @@ function CoinDetails({ coin, history }) {
     <div className="coin-details">
       <h2>{coin.name} ({coin.symbol.toUpperCase()})</h2>
       <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', width: '100%' }}>
-        <span style={{ color: priceChangeColor, fontSize: '0.8em' }}>
+        <span style={{ color: priceChangeColor, fontSize: '0.8em', top: 2, right: 1200, }}>
           {coin.price_change_24h > 0 && '+'}{coin.price_change_24h?.toFixed(2)}%
         </span>
         <p style={{ fontSize: '2em', margin: 0 }}>
@@ -43,17 +44,32 @@ const holdingsData = [
 
 function App() {
   const [coins, setCoins] = useState([]);
+  const [allCoins, setAllCoins] = useState([]);
   const [selectedCoin, setSelectedCoin] = useState(null);
   const [history, setHistory] = useState([]);
   const [loading, setLoading] = useState(true);
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(new Date());
-  const api_key = 'YOUR_API_KEY'; // replace this with your own API key
+  const api_key = process.env.REACT_APP_COIN_GECKP_API_KEY;
 
   const holdings = useMemo(() => holdingsData, []);
 
   const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']; // add more colors if you have more coins
 
+  useEffect(() => {
+    axios.get(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd`, {
+      headers: {
+        'X-CoinAPI-Key': api_key
+      }
+    })
+      .then(response => {
+        setAllCoins(response.data);
+      })
+      .catch(error => {
+        console.error('Error fetching all coins', error);
+      });
+  }, []);
+
   useEffect(() => {
     axios.get(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=${holdings.map(holding => holding.id).join(',')}`, {
       headers: {
@@ -81,7 +97,7 @@ function App() {
 
   const handleCoinSelect = (id) => {
     setLoading(true);
-    const selected = coins.find(coin => coin.id === id);
+    const selected = allCoins.find(coin => coin.id === id);
     setSelectedCoin(selected);
 
     // Fetch historical data for the selected date range
@@ -90,7 +106,7 @@ function App() {
     while (date <= endDate) {
       const formattedDate = `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
 
-      const promise = axios.get(`http://localhost:3001/api/v3/coins/${id}/history?date=${formattedDate}`, {
+      const promise = axios.get(`https://api.coingecko.com/api/v3/coins/${id}/history?date=${formattedDate}`, {
         headers: {
           'X-CoinAPI-Key': api_key
         }
@@ -133,7 +149,7 @@ function App() {
         ) : (
           <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100vh' }}>
             <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '100%', height: '100%' }}>
-              <div style={{ flex: 1, border: '1px solid black', margin: '10px', padding: '20px', borderRadius: '10px', boxSizing: 'border-box' }}>
+              <div style={{ flex: 1, border: '1px solid #333', margin: '10px', padding: '20px', borderRadius: '10px', boxSizing: 'border-box', backgroundColor: '#1F1F1F', color: '#A9A9A9' }}>
                 <h2>Portfolio Tracker</h2>
                 <ResponsiveContainer width="100%" height={400}>
                   <PieChart>
@@ -180,16 +196,19 @@ function App() {
                 <h3>ROI: {roi.toFixed(2)}%</h3>
                 <h3>P&L: ${pnl.toFixed(2)}</h3>
               </div>
-              <div style={{ flex: 1, border: '1px solid black', margin: '10px', padding: '20px', borderRadius: '10px', boxSizing: 'border-box' }}>
+              <div style={{ flex: 1, border: '1px solid #333', margin: '10px', padding: '20px', borderRadius: '10px', boxSizing: 'border-box', backgroundColor: '#1F1F1F', color: '#A9A9A9' }}>
                 <h2>Trends</h2>
                 <select value={selectedCoin ? selectedCoin.id : ''} onChange={e => handleCoinSelect(e.target.value)}>
-                  {coins.map(coin => (
+                  {allCoins.map(coin => (
                     <option key={coin.id} value={coin.id}>{coin.name} ({coin.symbol.toUpperCase()})</option>
                   ))}
                 </select>
                 <DatePicker selected={startDate} onChange={date => setStartDate(date)} />
                 <DatePicker selected={endDate} onChange={date => setEndDate(date)} />
                 {selectedCoin && <CoinDetails coin={selectedCoin} history={history} />}
+                </div>
+              <div style={{ flex: 1, border: '1px solid #333', margin: '10px', padding: '20px', borderRadius: '10px', boxSizing: 'border-box', backgroundColor: '#1F1F1F', color: '#A9A9A9' }}>
+                <CryptoNewsAnalyzer coins={allCoins} />
               </div>
             </div>
           </div>

public/crypto-dashboard.jpg

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+function CryptoNewsAnalyzer({ coins }) {
+    const [suggestedCoins, setSuggestedCoins] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const apiKey = process.env.REACT_APP_NEWS_API_KEY; // Use the environment variable
+        axios.get(`https://newsapi.org/v2/everything?q=cryptocurrency&apiKey=${apiKey}`)
+            .then(response => {
+                const positiveKeywords = ['bull', 'rally', 'rise', 'gain', 'positive', 'buy', 'up'];
+                const articles = response.data.articles;
+                const suggestedCoins = [];
+
+                articles.forEach(article => {
+                    const title = article.title ? article.title.toLowerCase() : '';
+                    const description = article.description ? article.description.toLowerCase() : '';
+
+                    positiveKeywords.forEach(keyword => {
+                        if (title.includes(keyword) || description.includes(keyword)) {
+                            // Check if a cryptocurrency name is mentioned in the title or description
+                            coins.forEach(coin => {
+                                if (coin.name && (title.includes(coin.name.toLowerCase()) || description.includes(coin.name.toLowerCase()))) {
+                                    suggestedCoins.push(coin);
+                                }
+                            });
+                        }
+                    });
+                });
+
+                // Remove duplicates
+                const uniqueSuggestedCoins = Array.from(new Set(suggestedCoins.map(coin => coin.id)))
+                    .map(id => suggestedCoins.find(coin => coin.id === id));
+
+                // Sort by 24h price change and select top 10
+                uniqueSuggestedCoins.sort((a, b) => b.price_change_24h - a.price_change_24h);
+                setSuggestedCoins(uniqueSuggestedCoins.slice(0, 10));
+
+                setIsLoading(false);
+            })
+            .catch(error => {
+                console.error(error);
+                setError('Failed to fetch news');
+                setIsLoading(false);
+            });
+    }, [coins]);
+
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
+
+    if (error) {
+        return <div>{error}</div>;
+    }
+
+    return (
+        <div className="crypto-news-analyzer">
+          <h2>Top 10 Cryptocurrencies to Buy Based on News Sentiment</h2>
+          {suggestedCoins.map((coin, index) => (
+            <div key={index} className="suggested-coin" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '300px' }}>
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <img src={coin.image} alt={coin.name} style={{ width: '20px', height: '20px', marginRight: '10px' }} />
+                <h3 style={{ margin: 0 }}>{coin.name} ({coin.symbol.toUpperCase()})</h3>
+              </div>
+              <div style={{ position: 'relative', width: '100%' }}>
+                <p style={{ fontSize: '1.9em' }}>{coin.current_price.toFixed(2)}</p>
+                <span style={{ position: 'absolute', top: 2, right: 120, color: coin.price_change_24h < 0 ? 'red' : 'green' }}>
+                  {coin.price_change_24h.toFixed(2)}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+export default CryptoNewsAnalyzer;

src/App.css

@@ -8,7 +8,8 @@ function NewsTicker() {
   const [error, setError] = useState(null);
 
   useEffect(() => {
-    axios.get(`https://newsapi.org/v2/everything?q=cryptocurrency&apiKey=YOUR_API_KEY`)
+    const apiKey = process.env.REACT_APP_NEWS_API_KEY; // Use the environment variable
+    axios.get(`https://newsapi.org/v2/everything?q=cryptocurrency&apiKey=${apiKey}`)
       .then(response => {
         setNews(response.data.articles);
         setIsLoading(false);