├── .env.sample ├── README.md ├── index.js ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.js ├── components ├── CurrencyConverter.js ├── ExchangeRate.js └── NewsFeed.js ├── index.css └── index.js /.env.sample: -------------------------------------------------------------------------------- 1 | REACT_APP_RAPID_API_KEY={your_api_key} 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Crypto Dashboard in React and Nodejs 2 | 3 | This project is in support of the tutorial found [here](https://www.youtube.com/watch?v=_itMdiSc0KI) 4 | 5 | ### To Start This Project 6 | 7 | ### `npm i` 8 | 9 | Install all the packages you need by running the command in your terminal. 10 | 11 | ### create a `.env` file 12 | 13 | Create a .env file with the following code and your own RapidAPI Key, in the root of your project. 14 | 15 | ``` 16 | REACT_APP_RAPID_API_KEY={your_api_key} 17 | ``` 18 | 19 | ### `npm run start:frontend` 20 | 21 | Runs the app in the development mode.\ 22 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 23 | 24 | The page will reload if you make edits.\ 25 | You will also see any lint errors in the console. 26 | 27 | ### `npm run start:backend` 28 | 29 | This will start the server on [http://localhost:8000](http://localhost:8000). 30 | 31 | The page will reload if you make edits.\ 32 | You will also see any lint errors in the console. 33 | 34 | 35 | ### MIT Licence 36 | 37 | Copyright (c) 2020 Ania Kubow 38 | 39 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 40 | 41 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 42 | 43 | *Translation: Ofcourse you can use this for you project! Just make sure to say where you got this from :) 44 | 45 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 46 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const PORT = 8000 2 | const express = require('express') 3 | const cors = require('cors') 4 | const axios = require('axios') 5 | require('dotenv').config() 6 | 7 | const app = express() 8 | 9 | app.use(cors()) 10 | 11 | app.get('/', (req,res) => { 12 | res.json('hi') 13 | }) 14 | 15 | app.get('/convert', (req,res) => { 16 | const toCurrency = req.query.to_currency 17 | const fromCurrency = req.query.from_currency 18 | 19 | 20 | const options = { 21 | method: 'GET', 22 | url: 'https://alpha-vantage.p.rapidapi.com/query', 23 | params: {from_currency: chosenPrimaryCurrency, function: 'CURRENCY_EXCHANGE_RATE', to_currency: chosenSecondaryCurrency}, 24 | headers: { 25 | 'x-rapidapi-host': 'alpha-vantage.p.rapidapi.com', 26 | 'x-rapidapi-key': process.env.REACT_APP_RAPID_API_KEY 27 | } 28 | } 29 | 30 | axios.request(options).then((response) => { 31 | res.json(response.data['Realtime Currency Exchange Rate']['5. Exchange Rate']) 32 | }).catch((error) => { 33 | console.error(error) 34 | }) 35 | }) 36 | 37 | app.get('/news', (req,res) => { 38 | const options = { 39 | method: 'GET', 40 | url: 'https://crypto-news-live.p.rapidapi.com/news', 41 | headers: { 42 | 'x-rapidapi-host': 'crypto-news-live.p.rapidapi.com', 43 | 'x-rapidapi-key': process.env.REACT_APP_RAPID_API_KEY 44 | } 45 | } 46 | 47 | axios.request(options).then((response) => { 48 | res.json(response.data) 49 | 50 | }).catch((error) => { 51 | console.error(error) 52 | }) 53 | }) 54 | 55 | 56 | app.listen(8000, () => console.log(`Server is running on port ${PORT}`)) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "crypto-dashboard", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "axios": "^0.24.0", 10 | "cors": "^2.8.5", 11 | "dotenv": "^10.0.0", 12 | "express": "^4.17.1", 13 | "react": "^17.0.2", 14 | "react-dom": "^17.0.2", 15 | "react-scripts": "4.0.3", 16 | "web-vitals": "^1.0.1" 17 | }, 18 | "scripts": { 19 | "start:backend": "nodemon index.js", 20 | "start:frontend": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | }, 43 | "devDependencies": { 44 | "stylelint": "^14.0.1", 45 | "stylelint-config-standard": "^23.0.0" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kubowania/crypto-dashboard-react/331dd5e746cb79f7b424c7cbf73044384a1ce0cf/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kubowania/crypto-dashboard-react/331dd5e746cb79f7b424c7cbf73044384a1ce0cf/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kubowania/crypto-dashboard-react/331dd5e746cb79f7b424c7cbf73044384a1ce0cf/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import NewsFeed from './components/NewsFeed' 2 | import CurrencyConverter from './components/CurrencyConverter' 3 | 4 | const App = () => { 5 | return ( 6 |
7 |

Crypto Dashboard

8 |
9 | 10 | 11 |
12 | 13 |
14 | ) 15 | } 16 | 17 | export default App 18 | 19 | -------------------------------------------------------------------------------- /src/components/CurrencyConverter.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import ExchangeRate from './ExchangeRate' 3 | import axios from 'axios' 4 | 5 | const CurrencyConverter = () => { 6 | const currencies = ['BTC', 'ETH', 'USD', 'XRP', 'LTC', 'ADA' ] 7 | const [chosenPrimaryCurrency, setChosenPrimaryCurrency] = useState('BTC') 8 | const [chosenSecondaryCurrency, setChosenSecondaryCurrency] = useState('BTC') 9 | const [amount, setAmount] = useState(1) 10 | const [exchangedData, setExchangedData] = useState({ 11 | primaryCurrency: 'BTC', 12 | secondaryCurrency: 'BTC', 13 | exchangeRate: 0 14 | }) 15 | const [result, setResult] = useState(0) 16 | 17 | console.log(exchangedData) 18 | 19 | const convert = () => { // should say flex not dlex, comment this out for now 20 | 21 | 22 | 23 | const options = { 24 | method: 'GET', 25 | url: 'http://localhost:8000/convert', 26 | params: {from_currency: chosenPrimaryCurrency, function: 'CURRENCY_EXCHANGE_RATE', to_currency: chosenSecondaryCurrency} 27 | } 28 | 29 | axios.request(options).then((response) => { 30 | console.log(response.data) 31 | setResult(response.data * amount) 32 | 33 | setExchangedData({ 34 | primaryCurrency: chosenPrimaryCurrency, 35 | secondaryCurrency: chosenSecondaryCurrency, 36 | exchangeRate: response.data 37 | }) 38 | }).catch((error) => { 39 | console.error(error) 40 | }) 41 | } 42 | 43 | return ( 44 |
45 |

Currency Converter

46 | 47 |
48 | 49 | 50 | 51 | 52 | 53 | 61 | 71 | 72 | 73 | 74 | 81 | 91 | 92 | 93 |
Primary Currency: 54 | setAmount(e.target.value)} 59 | /> 60 | 62 | 70 |
Secondary Currency: 75 | 80 | 82 | 90 |
94 | 95 | 96 | 97 | 98 |
99 | 100 | 101 | 104 |
105 | ) 106 | } 107 | 108 | export default CurrencyConverter 109 | -------------------------------------------------------------------------------- /src/components/ExchangeRate.js: -------------------------------------------------------------------------------- 1 | const ExchangeRate = ({exchangedData}) => { 2 | return ( 3 |
4 |

Exchange Rate

5 |

{exchangedData.exchangeRate}

6 |

{exchangedData.primaryCurrency} to {exchangedData.secondaryCurrency}

7 |
8 | ) 9 | } 10 | 11 | export default ExchangeRate 12 | -------------------------------------------------------------------------------- /src/components/NewsFeed.js: -------------------------------------------------------------------------------- 1 | import {useEffect, useState} from 'react' 2 | import axios from 'axios' 3 | 4 | const NewsFeed = () => { 5 | const [articles, setArticles] = useState(null) 6 | 7 | useEffect(() => { 8 | 9 | const options = { 10 | method: 'GET', 11 | url: 'http://localhost:8000/news' 12 | } 13 | 14 | axios.request(options).then((response) => { 15 | console.log(response.data) 16 | setArticles(response.data) 17 | 18 | }).catch((error) => { 19 | console.error(error) 20 | }) 21 | }, []) 22 | 23 | console.log(articles) 24 | 25 | const first7Articles = articles?.slice(0,7) 26 | 27 | return ( 28 |
29 |

News Feed

30 | {first7Articles?.map((article, _index) => ( 31 |
32 |

{article.title}

 33 |
))} 34 |
35 | ) 36 | } 37 | 38 | export default NewsFeed 39 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 13 | monospace; 14 | } 15 | 16 | .app { 17 | display: flex; 18 | flex-direction: column; 19 | align-items: center; 20 | } 21 | 22 | .app-wrapper { 23 | display: flex; 24 | } 25 | 26 | .news-feed { 27 | background-color: rgb(204, 204, 231); 28 | padding: 10px; 29 | margin: 5px; 30 | box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); 31 | max-width: 300px; 32 | } 33 | 34 | .currency-converter { 35 | background-color: rgb(230, 223, 211); 36 | padding: 10px; 37 | margin: 5px; 38 | box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); 39 | text-align: center; 40 | } 41 | 42 | .exchange-rate { 43 | background-color: rgb(221, 230, 221); 44 | padding: 20px; 45 | margin-top: 10px; 46 | box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); 47 | border-radius: 10px; 48 | } 49 | 50 | .input-box { 51 | background-color: rgb(218, 227, 238); 52 | padding: 30px; 53 | border-radius: 10px; 54 | box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); 55 | } 56 | 57 | button { 58 | border: none; 59 | float: right; 60 | margin: 2px; 61 | } 62 | 63 | button:hover { 64 | background-color: coral; 65 | } 66 | 67 | input, select { 68 | border: none; 69 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.css' 4 | import App from './App' 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ) 12 | --------------------------------------------------------------------------------