add basic views: CoinStat, Home, Ranking, Login and Routing

frontend/package-lock.json

@@ -10,6 +10,7 @@
         "@emotion/react": "^11.7.1",
         "@emotion/styled": "^11.6.0",
         "@mui/icons-material": "^5.2.5",
+        "@mui/lab": "^5.0.0-alpha.64",
         "@mui/material": "^5.2.8",
         "@mui/styled-engine-sc": "^5.1.0",
         "@testing-library/jest-dom": "^5.16.1",
@@ -1848,6 +1849,75 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
       "integrity": "sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg=="
     },
+    "node_modules/@date-io/core": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-DvPBnNoeuLaoSJZaxgpu54qzRhRKjSYVyQjhznTFrllKuDpm0sDFjHo6lvNLCM/cfMx2gb2PM2zY2kc9C8nmuw=="
+    },
+    "node_modules/@date-io/date-fns": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.11.0.tgz",
+      "integrity": "sha512-mPQ71plBeFrArvBSHtjWMHXA89IUbZ6kuo2dsjlRC/1uNOybo91spIb+wTu03NxKTl8ut07s0jJ9svF71afpRg==",
+      "dependencies": {
+        "@date-io/core": "^2.11.0"
+      },
+      "peerDependencies": {
+        "date-fns": "^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/dayjs": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.11.0.tgz",
+      "integrity": "sha512-w67vRK56NZJIKhJM/CrNbfnIcuMvR3ApfxzNZiCZ5w29sxgBDeKuX4M+P7A9r5HXOMGcsOcpgaoTDINNGkdpGQ==",
+      "dependencies": {
+        "@date-io/core": "^2.11.0"
+      },
+      "peerDependencies": {
+        "dayjs": "^1.8.17"
+      },
+      "peerDependenciesMeta": {
+        "dayjs": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/luxon": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.11.1.tgz",
+      "integrity": "sha512-JUXo01kdPQxLORxqdENrgdUhooKgDUggsNRSdi2BcUhASIY2KGwwWXu8ikVHHGkw+DUF4FOEKGfkQd0RHSvX6g==",
+      "dependencies": {
+        "@date-io/core": "^2.11.0"
+      },
+      "peerDependencies": {
+        "luxon": "^1.21.3 || ^2.x"
+      },
+      "peerDependenciesMeta": {
+        "luxon": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/moment": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.11.0.tgz",
+      "integrity": "sha512-QSL+83qezQ9Ty0dtFgAkk6eC0GMl/lgYfDajeVUDB3zVA2A038hzczRLBg29ifnBGhQMPABxuOafgWwhDjlarg==",
+      "dependencies": {
+        "@date-io/core": "^2.11.0"
+      },
+      "peerDependencies": {
+        "moment": "^2.24.0"
+      },
+      "peerDependenciesMeta": {
+        "moment": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.7.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
@@ -2810,6 +2880,60 @@
         }
       }
     },
+    "node_modules/@mui/lab": {
+      "version": "5.0.0-alpha.64",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.64.tgz",
+      "integrity": "sha512-YqTWT4TBHSGyV3dS4/TQctpKh0s4CDgWNrA2UnEnXFAfXmFET2Zm6W06fJ1VZDmJfyCVD8Wq0WsiwVZj4ay+Uw==",
+      "dependencies": {
+        "@babel/runtime": "^7.16.3",
+        "@date-io/date-fns": "^2.11.0",
+        "@date-io/dayjs": "^2.11.0",
+        "@date-io/luxon": "^2.11.1",
+        "@date-io/moment": "^2.11.0",
+        "@mui/base": "5.0.0-alpha.64",
+        "@mui/system": "^5.2.8",
+        "@mui/utils": "^5.2.3",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2",
+        "react-transition-group": "^4.4.2",
+        "rifm": "^0.12.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "date-fns": "^2.25.0",
+        "dayjs": "^1.10.7",
+        "luxon": "^1.28.0 || ^2.0.0",
+        "moment": "^2.29.1",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.2.8",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.2.8.tgz",
@@ -13956,6 +14080,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rifm": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
+      "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -17717,6 +17849,43 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
       "integrity": "sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg=="
     },
+    "@date-io/core": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-DvPBnNoeuLaoSJZaxgpu54qzRhRKjSYVyQjhznTFrllKuDpm0sDFjHo6lvNLCM/cfMx2gb2PM2zY2kc9C8nmuw=="
+    },
+    "@date-io/date-fns": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.11.0.tgz",
+      "integrity": "sha512-mPQ71plBeFrArvBSHtjWMHXA89IUbZ6kuo2dsjlRC/1uNOybo91spIb+wTu03NxKTl8ut07s0jJ9svF71afpRg==",
+      "requires": {
+        "@date-io/core": "^2.11.0"
+      }
+    },
+    "@date-io/dayjs": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.11.0.tgz",
+      "integrity": "sha512-w67vRK56NZJIKhJM/CrNbfnIcuMvR3ApfxzNZiCZ5w29sxgBDeKuX4M+P7A9r5HXOMGcsOcpgaoTDINNGkdpGQ==",
+      "requires": {
+        "@date-io/core": "^2.11.0"
+      }
+    },
+    "@date-io/luxon": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.11.1.tgz",
+      "integrity": "sha512-JUXo01kdPQxLORxqdENrgdUhooKgDUggsNRSdi2BcUhASIY2KGwwWXu8ikVHHGkw+DUF4FOEKGfkQd0RHSvX6g==",
+      "requires": {
+        "@date-io/core": "^2.11.0"
+      }
+    },
+    "@date-io/moment": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.11.0.tgz",
+      "integrity": "sha512-QSL+83qezQ9Ty0dtFgAkk6eC0GMl/lgYfDajeVUDB3zVA2A038hzczRLBg29ifnBGhQMPABxuOafgWwhDjlarg==",
+      "requires": {
+        "@date-io/core": "^2.11.0"
+      }
+    },
     "@emotion/babel-plugin": {
       "version": "11.7.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
@@ -18418,6 +18587,26 @@
         "@babel/runtime": "^7.16.3"
       }
     },
+    "@mui/lab": {
+      "version": "5.0.0-alpha.64",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.64.tgz",
+      "integrity": "sha512-YqTWT4TBHSGyV3dS4/TQctpKh0s4CDgWNrA2UnEnXFAfXmFET2Zm6W06fJ1VZDmJfyCVD8Wq0WsiwVZj4ay+Uw==",
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "@date-io/date-fns": "^2.11.0",
+        "@date-io/dayjs": "^2.11.0",
+        "@date-io/luxon": "^2.11.1",
+        "@date-io/moment": "^2.11.0",
+        "@mui/base": "5.0.0-alpha.64",
+        "@mui/system": "^5.2.8",
+        "@mui/utils": "^5.2.3",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2",
+        "react-transition-group": "^4.4.2",
+        "rifm": "^0.12.1"
+      }
+    },
     "@mui/material": {
       "version": "5.2.8",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.2.8.tgz",
@@ -26371,6 +26560,12 @@
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
+    "rifm": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
+      "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
+      "requires": {}
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",

frontend/package.json

@@ -6,6 +6,7 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@mui/icons-material": "^5.2.5",
+    "@mui/lab": "^5.0.0-alpha.64",
     "@mui/material": "^5.2.8",
     "@mui/styled-engine-sc": "^5.1.0",
     "@testing-library/jest-dom": "^5.16.1",

frontend/src/App.css

@@ -1,2 +0,0 @@
-
-

frontend/src/App.js

@@ -1,6 +1,6 @@
 import './App.css';
 import RoutedApplication from './Views'
-import background from './Assets/background.png'
+//import background from './Assets/background.png'
 
 function App() {
   return (

frontend/src/Components/Header.js

@@ -11,15 +11,20 @@ import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
+import {useNavigate} from 'react-router-dom';
+import {useCallback} from 'react';
 
 //Adding new pages or settings
 const pages = ['Ranking'];
 //Settings that display after clicking Profile icon
 const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
 
+
 const ResponsiveAppBar = () => {
   const [anchorElNav, setAnchorElNav] = React.useState(null);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
+  const navigate = useNavigate();
+  const handleOnClick = useCallback(() => navigate('/ranking', {replace: true}), [navigate]);
 
   const handleOpenNavMenu = (event) => {
     setAnchorElNav(event.currentTarget);
@@ -38,7 +43,7 @@ const ResponsiveAppBar = () => {
 
   return (
     <AppBar position="static" >
-      <Container maxWidth="xl">
+      <Container maxWidth="xl" style={{ background: '#000000' }}>
         <Toolbar disableGutters >
           <Typography
             variant="h6"
@@ -98,7 +103,7 @@ const ResponsiveAppBar = () => {
             {pages.map((page) => (
               <Button
                 key={page}
-                onClick={handleCloseNavMenu}
+                onClick={handleOnClick}
                 sx={{ my: 2, color: 'white', display: 'block' }}
               >
                 {page}

frontend/src/Views/CoinStat.js

@@ -0,0 +1,94 @@
+import './Home.css';
+import Header from '../Components/Header'
+import Container from '@mui/material/Container';
+import AutoComplete from '../Components/AutoComplete'
+//import DatePicker from '../components/DatePicker'
+import ImageList from '@mui/material/ImageList';
+import ImageListItem from '@mui/material/ImageListItem';
+import waluta1 from '../Assets/1.png';
+import waluta2 from '../Assets/2.png';
+import waluta3 from '../Assets/10.png';
+import waluta4 from '../Assets/4.png';
+import waluta5 from '../Assets/5.png';
+import waluta6 from '../Assets/6.png';
+import waluta7 from '../Assets/7.png';
+import waluta8 from '../Assets/8.png';
+import waluta9 from '../Assets/9.png';
+import waluta10 from '../Assets/11.png';
+import ranking from '../Assets/ranking_vs.png';
+import logo from '../Assets/logo.png';
+import {useNavigate} from 'react-router-dom';
+import {useCallback} from 'react';
+import { Link } from "react-router-dom";
+
+
+
+const CoinStat = () => {
+  return (
+    <div>
+        <Header/>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'right'
+        }}>
+      <ImageList sx={{ width: '75vw', height: 200 }} cols={10} rowHeight={164}>
+      {itemData.map((item) => (
+        <ImageListItem key={item.img}>
+          <img
+            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
+            srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+            alt={item.title}
+            loading="lazy"
+          />
+        </ImageListItem>
+      ))}
+    </ImageList>
+    </div>
+
+    </div>
+  );
+}
+const itemData = [
+    {
+      img: waluta1,
+      title: 'Breakfast',
+    },
+    {
+      img: waluta2,
+      title: 'Burger',
+    },
+    {
+      img: waluta3,
+      title: 'Camera',
+    },
+    {
+      img: waluta4,
+      title: 'Coffee',
+    },
+    {
+      img: waluta5,
+      title: 'Hats',
+    },
+    {
+      img: waluta6,
+      title: 'Honey',
+    },
+    {
+      img: waluta7,
+      title: 'Basketball',
+    },
+    {
+      img: waluta8,
+      title: 'Fern',
+    },
+    {
+      img: waluta9,
+      title: 'Mushrooms',
+    },
+    {
+      img: waluta10,
+      title: 'Tomato basil',
+    },
+  ];
+
+export default CoinStat;

frontend/src/Views/Home.js

@@ -0,0 +1,102 @@
+import './Home.css';
+import Header from '../Components/Header'
+import Container from '@mui/material/Container';
+import AutoComplete from '../Components/AutoComplete'
+//import DatePicker from '../components/DatePicker'
+import ImageList from '@mui/material/ImageList';
+import ImageListItem from '@mui/material/ImageListItem';
+import waluta1 from '../Assets/1.png';
+import waluta2 from '../Assets/2.png';
+import waluta3 from '../Assets/10.png';
+import waluta4 from '../Assets/4.png';
+import waluta5 from '../Assets/5.png';
+import waluta6 from '../Assets/6.png';
+import waluta7 from '../Assets/7.png';
+import waluta8 from '../Assets/8.png';
+import waluta9 from '../Assets/9.png';
+import waluta10 from '../Assets/11.png';
+import ranking from '../Assets/ranking_vs.png';
+import logo from '../Assets/logo.png';
+import {useNavigate} from 'react-router-dom';
+import {useCallback} from 'react';
+import { Link } from "react-router-dom";
+
+
+
+const Home = () => {
+  return (
+    <div>
+        <Header/>
+        <div style={{
+        display: 'flex',
+        justifyContent: 'center'
+        }}>
+    <img src={logo} alt="logo" />
+    </div>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'center'
+        }}>
+      <ImageList sx={{ width: '75vw', height: 200 }} cols={10} rowHeight={164}>
+      {itemData.map((item) => (
+        <Link to="/coinstat">
+        <ImageListItem key={item.img}>
+          <img
+            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
+            srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+            alt={item.title}
+            loading="lazy"
+          />
+        </ImageListItem>
+        </Link>
+      ))}
+    </ImageList>
+    </div>
+
+    </div>
+  );
+}
+const itemData = [
+    {
+      img: waluta1,
+      title: 'Breakfast',
+    },
+    {
+      img: waluta2,
+      title: 'Burger',
+    },
+    {
+      img: waluta3,
+      title: 'Camera',
+    },
+    {
+      img: waluta4,
+      title: 'Coffee',
+    },
+    {
+      img: waluta5,
+      title: 'Hats',
+    },
+    {
+      img: waluta6,
+      title: 'Honey',
+    },
+    {
+      img: waluta7,
+      title: 'Basketball',
+    },
+    {
+      img: waluta8,
+      title: 'Fern',
+    },
+    {
+      img: waluta9,
+      title: 'Mushrooms',
+    },
+    {
+      img: waluta10,
+      title: 'Tomato basil',
+    },
+  ];
+
+export default Home;

frontend/src/Views/HomeSearch.js

@@ -0,0 +1,100 @@
+import './Home.css';
+import Header from '../Components/Header'
+import Container from '@mui/material/Container';
+import AutoComplete from '../Components/AutoComplete'
+//import DatePicker from '../components/DatePicker'
+import ImageList from '@mui/material/ImageList';
+import ImageListItem from '@mui/material/ImageListItem';
+import waluta1 from '../Assets/1.png';
+import waluta2 from '../Assets/2.png';
+import waluta3 from '../Assets/10.png';
+import waluta4 from '../Assets/4.png';
+import waluta5 from '../Assets/5.png';
+import waluta6 from '../Assets/6.png';
+import waluta7 from '../Assets/7.png';
+import waluta8 from '../Assets/8.png';
+import waluta9 from '../Assets/9.png';
+import waluta10 from '../Assets/11.png';
+import ranking from '../Assets/ranking_vs.png';
+import logo from '../Assets/logo.png';
+
+
+const HomeSearch = () => {
+  return (
+    <div>
+      <Container sx={{ bgcolor: '#F8F8F8' }}>
+      <h1> What coin are you after today? </h1>
+      <Container>
+        <AutoComplete/>
+      </Container>
+      </Container>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'center'
+        }}>
+      <ImageList sx={{ width: '75vw', height: 450 }} cols={10} rowHeight={164}>
+      {itemData.map((item) => (
+        <ImageListItem key={item.img}>
+          <img
+            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
+            srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+            alt={item.title}
+            loading="lazy"
+          />
+        </ImageListItem>
+      ))}
+    </ImageList>
+    </div>
+    <div style={{
+        display: 'flex',
+        justifyContent: 'center'
+        }}>
+    <img src={ranking} alt="ranking" />
+    </div>
+    </div>
+  );
+}
+const itemData = [
+    {
+      img: waluta1,
+      title: 'Breakfast',
+    },
+    {
+      img: waluta2,
+      title: 'Burger',
+    },
+    {
+      img: waluta3,
+      title: 'Camera',
+    },
+    {
+      img: waluta4,
+      title: 'Coffee',
+    },
+    {
+      img: waluta5,
+      title: 'Hats',
+    },
+    {
+      img: waluta6,
+      title: 'Honey',
+    },
+    {
+      img: waluta7,
+      title: 'Basketball',
+    },
+    {
+      img: waluta8,
+      title: 'Fern',
+    },
+    {
+      img: waluta9,
+      title: 'Mushrooms',
+    },
+    {
+      img: waluta10,
+      title: 'Tomato basil',
+    },
+  ];
+
+export default Home;

frontend/src/Views/Login.js

@@ -13,6 +13,8 @@ import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import './Login.css';
+import {useNavigate} from 'react-router-dom';
+import {useCallback} from 'react';
 
 function Copyright(props) {
   return (
@@ -29,7 +31,10 @@ function Copyright(props) {
 
 const theme = createTheme();
 
+
 export default function Login() {
+  const navigate = useNavigate();
+const handleOnClick = useCallback(() => navigate('/home', {replace: true}), [navigate]);
   const handleSubmit = (event) => {
     event.preventDefault();
     const data = new FormData(event.currentTarget);
@@ -90,6 +95,9 @@ export default function Login() {
               fullWidth
               variant="contained"
               sx={{ mt: 3, mb: 2 }}
+              onClick={() => {
+                handleOnClick();
+              }}
             >
               Sign In
             </Button>

frontend/src/Views/Ranking.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Paper from '@mui/material/Paper';
+import Masonry from '@mui/lab/Masonry';
+import Header from '../Components/Header';
+
+const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];
+
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  border: '1px solid black',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+export default function BasicMasonry() {
+  return (
+      <div>
+    <Header/>
+    <div style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems:'center',
+        height: '100vh'
+        }}>
+    <Box sx={{ width: 500, minHeight: 393 }}>
+      <Masonry columns={4} spacing={1}>
+        {heights.map((height, index) => (
+          <Item key={index} sx={{ height }}>
+            {index + 1}
+          </Item>
+        ))}
+      </Masonry>
+    </Box>
+    </div>
+    </div>
+  );
+}

frontend/src/Views/index.js

@@ -4,12 +4,16 @@ import { BrowserRouter as Router, Switch, Route, Routes, Link } from "react-rout
 // view/pages/screens
 import Login from './Login';
 import Home from './Home';
+import CoinStat from './CoinStat'
+import Ranking from './Ranking'
 const ReactRouterSetup = () => {
     return (
         <Router>
             <Routes>
             <Route path ='/home' element ={<Home />}/>
-            <Route path ='/login' element ={<Login />}/>
+            <Route path ='/' element ={<Login />}/>
+            <Route path ='/ranking' element ={<Ranking />}/>
+            <Route path ='/coinstat' element ={<CoinStat />}/>
             </Routes>
         </Router>
     );

frontend/src/index.css

@@ -5,7 +5,8 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: linear-gradient(#1c1c1c, #979797);
+  background-color: #000000;
+  background-image: linear-gradient(147deg, #000000 0%, #434343 74%);
   width: 100vw;
   height: 100vh;
 }