initial

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vercel

package.json

@@ -3,11 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/react": "^2.3.5",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.1.2",
+    "chart.js": "^3.9.1",
+    "framer-motion": "^7.5.3",
     "react": "^18.2.0",
+    "react-chartjs-2": "^4.3.1",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.6.0",
+    "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

public/index.html

@@ -10,10 +10,12 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
+      rel="stylesheet"
+    />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.

src/App.js

@@ -1,24 +1,24 @@
-import logo from './logo.svg';
-import './App.css';
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Header from "./components/Header";
+import Home from "./components/Home";
+import Coins from "./components/Coins";
+import Exchanges from "./components/Exchanges";
+import CoinDetails from "./components/CoinDetails";
+import Footer from "./components/Footer";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <Header />
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/coins" element={<Coins />} />
+        <Route path="/exchanges" element={<Exchanges />} />
+        <Route path="/coin/:id" element={<CoinDetails />} />
+      </Routes>
+
+      <Footer />
+    </Router>
   );
 }
 

src/components/Chart.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { Line } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+const Chart = ({ arr = [], currency, days }) => {
+  const prices = [];
+  const date = [];
+
+  for (let i = 0; i < arr.length; i++) {
+    if (days === "24h") date.push(new Date(arr[i][0]).toLocaleTimeString());
+    else date.push(new Date(arr[i][0]).toLocaleDateString());
+    prices.push(arr[i][1]);
+  }
+
+  const data = {
+    labels: date,
+    datasets: [
+      {
+        label: `Price in ${currency}`,
+        data: prices,
+        borderColor: "rgb(255,99,132)",
+        backgroundColor: "rgba(255,99,132,0.5)",
+      },
+    ],
+  };
+
+  return (
+    <Line
+      options={{
+        responsive: true,
+      }}
+      data={data}
+    />
+  );
+};
+
+export default Chart;

src/components/CoinCard.jsx

@@ -0,0 +1,37 @@
+import { Heading, Image, Text, VStack } from "@chakra-ui/react";
+import React from "react";
+import { Link } from "react-router-dom";
+
+const CoinCard = ({ id, name, img, symbol, price, currencySymbol = "₹" }) => (
+  <Link to={`/coin/${id}`}>
+    <VStack
+      w={"52"}
+      shadow={"lg"}
+      p={"8"}
+      borderRadius={"lg"}
+      transition={"all 0.3s"}
+      m={"4"}
+      css={{
+        "&:hover": {
+          transform: "scale(1.1)",
+        },
+      }}
+    >
+      <Image
+        src={img}
+        w={"10"}
+        h={"10"}
+        objectFit={"contain"}
+        alt={"Exchange"}
+      />
+      <Heading size={"md"} noOfLines={1}>
+        {symbol}
+      </Heading>
+
+      <Text noOfLines={1}>{name}</Text>
+      <Text noOfLines={1}>{price ? `${currencySymbol}${price}` : "NA"}</Text>
+    </VStack>
+  </Link>
+);
+
+export default CoinCard;