├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json ├── loupe.svg ├── index.html └── coinbase-logo.svg ├── postcss.config.js ├── src ├── components │ ├── hero-image.png │ ├── FooterHero.js │ ├── MarketStatus.js │ ├── PriceTable.js │ ├── Header.js │ ├── PriceTableItem.js │ ├── Footer.js │ └── Tops.js ├── setupTests.js ├── App.test.js ├── reportWebVitals.js ├── index.css ├── index.js ├── App.css ├── App.js └── logo.svg ├── README.md ├── craco.config.js ├── .gitignore ├── tailwind.config.js ├── LICENSE └── package.json /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yusufxcingoz/coinbase-clone/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yusufxcingoz/coinbase-clone/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yusufxcingoz/coinbase-clone/HEAD/public/logo512.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/components/hero-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yusufxcingoz/coinbase-clone/HEAD/src/components/hero-image.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ## coinbase clone with react.js, tailwind.css and coingecko api. 3 | 4 | ### demo: 5 | https://coinbase-clone2.herokuapp.com/ 6 | 7 | -------------------------------------------------------------------------------- /craco.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | style: { 3 | postcss: { 4 | plugins: [require("tailwindcss"), require("autoprefixer")], 5 | }, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | extend: { 6 | colors: { 7 | green: { 8 | coinbase: "#B5C6C6", 9 | }, 10 | blue: { 11 | hero: "#E9F6FF", 12 | }, 13 | }, 14 | }, 15 | }, 16 | variants: { 17 | extend: {}, 18 | }, 19 | plugins: [], 20 | }; 21 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | body { 6 | margin: 0; 7 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 8 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 9 | sans-serif; 10 | -webkit-font-smoothing: antialiased; 11 | -moz-osx-font-smoothing: grayscale; 12 | } 13 | 14 | code { 15 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 16 | monospace; 17 | } 18 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | import React, { useState, useEffect } from "react"; 4 | import Footer from "./components/Footer"; 5 | import FooterHero from "./components/FooterHero"; 6 | import Header from "./components/Header"; 7 | import MarketStatus from "./components/MarketStatus"; 8 | import PriceTable from "./components/PriceTable"; 9 | import Tops from "./components/Tops"; 10 | 11 | function App() { 12 | const [coins, setCoins] = useState([]); 13 | 14 | useEffect(() => { 15 | axios 16 | .get( 17 | "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=30&page=1&sparkline=false" 18 | ) 19 | .then((res) => { 20 | setCoins(res.data); 21 | }) 22 | .catch((error) => console.log(error)); 23 | }); 24 | 25 | return ( 26 |
27 |
28 |
29 | 30 | 31 |
32 |
33 | ); 34 | } 35 | 36 | export default App; 37 | -------------------------------------------------------------------------------- /src/components/FooterHero.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function FooterHero() { 4 | return ( 5 |
6 |
7 |
8 |

Earn up to $28 worth of crypto

9 |
10 |
11 |

12 | Discover how specific cryptocurrencies work — and get a bit of each 13 | crypto to try out for yourself. 14 |

15 |
16 | 19 |
20 |
21 | 25 |
26 |
27 | ); 28 | } 29 | 30 | export default FooterHero; 31 | -------------------------------------------------------------------------------- /src/components/MarketStatus.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SearchIcon from "@material-ui/icons/Search"; 3 | 4 | function MarketStatus() { 5 | return ( 6 |
7 |
8 |

9 | In past 24 hours 10 | 11 | Market is up 12 | 1.49% 13 | 14 |

15 |
16 | 17 |
18 |
19 | 20 | 26 |
27 |
28 |
29 | ); 30 | } 31 | 32 | export default MarketStatus; 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Yusuf Üzeyir Cingöz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /public/loupe.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "coinbase-clone", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@craco/craco": "^6.1.2", 7 | "@material-ui/core": "^4.11.4", 8 | "@material-ui/icons": "^4.11.2", 9 | "@testing-library/jest-dom": "^5.12.0", 10 | "@testing-library/react": "^11.2.7", 11 | "@testing-library/user-event": "^12.8.3", 12 | "autoprefixer": "^9.8.6", 13 | "axios": "^0.21.1", 14 | "postcss": "^7.0.35", 15 | "react": "^17.0.2", 16 | "react-dom": "^17.0.2", 17 | "react-scripts": "4.0.3", 18 | "react-select": "^4.3.1", 19 | "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2", 20 | "web-vitals": "^1.1.2" 21 | }, 22 | "scripts": { 23 | "start": "craco start", 24 | "build": "craco build", 25 | "test": "craco test", 26 | "eject": "react-scripts eject" 27 | }, 28 | "eslintConfig": { 29 | "extends": [ 30 | "react-app", 31 | "react-app/jest" 32 | ] 33 | }, 34 | "browserslist": { 35 | "production": [ 36 | ">0.2%", 37 | "not dead", 38 | "not op_mini all" 39 | ], 40 | "development": [ 41 | "last 1 chrome version", 42 | "last 1 firefox version", 43 | "last 1 safari version" 44 | ] 45 | }, 46 | "devDependencies": {} 47 | } 48 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/components/PriceTable.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PriceTableItem from "./PriceTableItem"; 3 | 4 | export default function PriceTable({ coin }) { 5 | return ( 6 |
7 |
8 |
9 |
10 | All assests 11 |
12 |
Tradable
13 |
Gainers
14 |
Losers
15 |
16 |
17 |
1H
18 |
24H
19 |
1W
20 |
1M
21 |
1Y
22 |
23 |
24 |
25 |
26 |

Name

27 |
28 | 29 |
30 |

Price

31 |

Change

32 |

Volume(24h)

33 |

34 | Market Cap 35 | 43 | 44 | 45 | 46 |

47 |

Supply

48 |

Trade

49 |
50 |
51 | 52 |
53 | ); 54 | } 55 | -------------------------------------------------------------------------------- /src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Header() { 4 | return ( 5 |
6 |
7 |

8 | coinbase 9 |

10 |
11 |
12 |

13 | Prices 14 |

15 |
16 | 17 |
18 | {" "} 19 |

20 | Learn 21 |

22 |
23 |
24 | {" "} 25 |

26 | Individulas 27 |

28 |
29 |
30 | {" "} 31 |

32 | Business 33 |

34 |
35 |
36 |

37 | Developers 38 |

39 |
40 |
41 | {" "} 42 |

43 | Company 44 |

45 |
46 |
47 |
48 | 49 | Sign in 50 | 51 |
52 | 55 |
56 |
57 |
58 |
59 | ); 60 | } 61 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/PriceTableItem.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function PriceTableItem({ coins }) { 4 | return ( 5 |
6 | {coins.map((e) => { 7 | if (e.market_cap_change_24h > 0) { 8 | return ( 9 |
10 |
11 |
12 | 13 |
14 |
15 |

{e.name}

16 |

17 | {e.symbol.toUpperCase()} 18 |

19 |
20 |
21 | 22 |
23 |
24 |

USD {e.current_price}

25 |
26 |
27 |

28 | % {e.price_change_percentage_24h.toString().substring(0, 5)} 29 |

30 |
31 |
32 |

33 | USD {e.total_volume.toString().substring(0, 5)} 34 |

35 |
36 |
37 |

38 | USD {e.market_cap_change_24h.toString().substring(0, 5)} 39 |

40 |
41 |

116.0M

42 | 45 |
46 |
47 | ); 48 | } else { 49 | return ( 50 |
51 |
52 |
53 | 54 |
55 |
56 |

{e.name}

57 |

58 | {e.symbol.toUpperCase()} 59 |

60 |
61 |
62 | 63 |
64 |
65 |

USD {e.current_price}

66 |
67 |
68 |

69 | % {e.price_change_percentage_24h.toString().substring(0, 5)} 70 |

71 |
72 | 73 |
74 |

75 | USD {e.total_volume.toString().substring(0, 5)} 76 |

77 |
78 |

79 | USD {e.market_cap_change_24h.toString().substring(0, 5)} 80 |

81 |

116.0M

82 | 85 |
86 |
87 | ); 88 | } 89 | })} 90 |
91 | ); 92 | } 93 | 94 | export default PriceTableItem; 95 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Select from "react-select"; 3 | 4 | function Footer() { 5 | return ( 6 |
7 |
8 |
9 |

10 | coinbase 11 |

12 | 19 |
20 |

© 2021 Coinbase

21 |

Blog • Twitter • Facebook

22 |
23 |
24 |
25 |
26 |
27 |

Compnay

28 |

About

29 |

Careers

30 |

Affiliates

31 |

Blog

32 |

Press

33 |

Investors

34 |

Legal & privacy

35 |

Cookie policiy

36 |
37 |
38 |

39 | Learn 40 |

41 |

42 | Browse crypto prices 43 |

44 |

Tips & tutorials

45 |

Market updates

46 |

What is Bitcoin?

47 |

48 | What is a blockchain? 49 |

50 |

51 | How to set up a crypto wallet? 52 |

53 |

54 | How to send crypto 55 |

56 |

Taxes

57 |
58 |
59 |
60 |
61 |

62 | Individuals 63 |

64 |

Buy & sell

65 |

Earn free crypto

66 |

Wallet

67 |

Card

68 |
69 |
70 |

Businnes

71 |

Prime

72 |

Custody

73 |

Asset Hub

74 |

Commerce

75 |
76 |
77 |

78 | Developers 79 |

80 |

Connect

81 |

Commerce

82 |

Pro

83 |

Bison Trails

84 |

WalletLink

85 |

Rosetta

86 |

USDC

87 |
88 |
89 |
90 |
91 |
92 |
93 |

Support

94 |

Contact us

95 |

Create account

96 |

ID verification

97 |

Account information

98 |

Payment methods

99 |

Account acces

100 |

Supported crypto

101 |

Supported countries

102 |

Status

103 |
104 |
105 |
106 |
107 | ); 108 | } 109 | 110 | export default Footer; 111 | -------------------------------------------------------------------------------- /public/coinbase-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/Tops.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import MarketStatus from "./MarketStatus"; 3 | import PriceTable from "./PriceTable"; 4 | 5 | function Tops({ coins }) { 6 | const slicedCoins = coins.slice(0, 6); 7 | 8 | return ( 9 |
10 |
11 | 12 |
13 |
14 |

Top gainer(24h)

15 |
16 |
17 |
18 |
19 | 0 && slicedCoins[0].image} /> 20 |
21 |
22 |

23 | {slicedCoins.length > 0 && 24 | slicedCoins[0].symbol.toUpperCase()} 25 |

26 |

27 | {" "} 28 | {slicedCoins.length > 0 && 29 | slicedCoins[0].price_change_percentage_24h 30 | .toString() 31 | .substring(0, 5)} 32 | % 33 |

34 |
35 |
36 |
37 |

38 | {" "} 39 | USD {slicedCoins.length > 0 && slicedCoins[0].current_price} 40 |

41 |
42 |
43 |

44 |
45 |
46 | 47 |
48 |

New listing

49 |
50 |
51 |
52 |
53 | 0 && slicedCoins[1].image} /> 54 |
55 |
56 |

57 | {slicedCoins.length > 0 && 58 | slicedCoins[1].symbol.toUpperCase()} 59 |

60 |

61 | {" "} 62 | {slicedCoins.length > 0 && 63 | slicedCoins[1].price_change_percentage_24h 64 | .toString() 65 | .substring(0, 5)} 66 | % 67 |

68 |
69 |
70 |
71 |

72 | {" "} 73 | USD {slicedCoins.length > 0 && slicedCoins[1].current_price} 74 |

75 |
76 |
77 |

78 |
79 |
80 |
81 |
82 |

83 | Crypto questions, answered{" "} 84 |

85 |

Learn with Coinbase

86 |
87 |
88 |
89 | 90 |
91 |
92 |

Highest volume(24h)

93 |
94 |
95 |
96 |
97 | 0 && slicedCoins[2].image} /> 98 |
99 |
100 |

101 | {slicedCoins.length > 0 && 102 | slicedCoins[2].symbol.toUpperCase()} 103 |

104 |

105 | {slicedCoins.length > 0 && 106 | slicedCoins[2].price_change_percentage_24h 107 | .toString() 108 | .substring(0, 5)} 109 | % 110 |

111 |
112 |
113 |
114 |

115 | {" "} 116 | USD {slicedCoins.length > 0 && slicedCoins[2].current_price} 117 |

118 |
119 |
120 |

121 |
122 |
123 | 124 |
125 |

Most visited(24h)

126 |
127 |
128 |
129 |
130 | 0 && slicedCoins[3].image} /> 131 |
132 |
133 |

134 | {slicedCoins.length > 0 && 135 | slicedCoins[3].symbol.toUpperCase()} 136 |

137 |

138 | {slicedCoins.length > 0 && 139 | slicedCoins[3].price_change_percentage_24h 140 | .toString() 141 | .substring(0, 5)} 142 | % 143 |

144 |
145 |
146 |
147 |

148 | {" "} 149 | USD {slicedCoins.length > 0 && slicedCoins[3].current_price} 150 |

151 |
152 |
153 |

154 |
155 |
156 |
157 |

Earn free crypto

158 |
159 |
160 |
161 |
162 |
163 |

Cartesi

164 |

+18.68%

165 |
166 |
167 |
168 |

TRY 10.31

169 |
170 |
171 |

172 |
173 |
174 |
175 | 176 |
177 |
178 | ); 179 | } 180 | 181 | export default Tops; 182 | --------------------------------------------------------------------------------