new views

frontend/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

frontend/README.md

@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

frontend/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@devexpress/dx-react-chart-material-ui": "^2.7.6",
+    "@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",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "d3": "^7.3.0",
+    "express": "^4.17.2",
+    "heroku": "^7.59.2",
+    "heroku-cli": "^7.0.9",
+    "react-minimal-pie-chart": "^8.2.0",
+    "react-multi-carousel": "^2.6.5",
+    "react-router-dom": "^6.2.1",
+    "react-scripts": "5.0.0",
+    "react-simply-carousel": "^5.1.4",
+    "styled-components": "^5.3.3",
+    "web-vitals": "^2.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

frontend/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/public/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="/public/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="manifest" href="/public/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

frontend/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

frontend/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

frontend/server/server.js

@@ -0,0 +1,12 @@
+const path = require('path');
+const express = require('express');
+const app = express();
+const publicPath = path.join(__dirname, '..', 'public');
+const port = process.env.PORT || 3000;
+app.use(express.static(publicPath));
+app.get('*', (req, res) => {
+   res.sendFile(path.join(publicPath, 'index.html'));
+});
+app.listen(port, () => {
+   console.log('Server is up!');
+});

frontend/src/App.js

@@ -0,0 +1,13 @@
+import './App.css';
+import RoutedApplication from './Views'
+//import background from './Assets/background.png'
+
+function App() {
+  return (
+    <div className="App" >
+      <RoutedApplication />
+    </div>
+  );
+}
+
+export default App;

frontend/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

frontend/src/Components/AutoComplete.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import Autocomplete from '@mui/material/Autocomplete';
+
+export default function ComboBox() {
+  return (
+    <Autocomplete
+      disablePortal
+      id="combo-box-demo"
+      options={crypto}
+      sx={{ width: 300 }}
+      renderInput={(params) => <TextField {...params} label="Choose coin" />}
+    />
+  );
+}
+
+const crypto = [
+  { label: 'Bitcoin', abbreviation: 'BTC' },
+  { label: 'Ethereum', abbreviation: 'ETH' },
+  { label: 'Cardano', abbreviation: 'ADA' },
+  { label: 'Polkadot', abbreviation: 'DOT' },
+  { label: 'Solana', abbreviation:'SOL' },
+  { label: 'XRP', abbreviation: 'XRP' },
+];

frontend/src/Components/Box.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+export default function BoxSx() {
+  return (
+    <Box
+      sx={{
+        width: 300,
+        height: 300,
+        backgroundColor: 'primary.dark',
+        '&:hover': {
+          backgroundColor: 'primary.main',
+          opacity: [0.9, 0.8, 0.7],
+        },
+      }}
+    />
+  );
+}

frontend/src/Components/Carousel

@@ -0,0 +1,37 @@
+import React, { Component } from "react";
+import Carousel from "react-simply-carousel";
+
+export class CarouselCrypto extends Component {
+  state = {
+    activeSlideIndex: 0,
+  };
+
+  setActiveSlideIndex = (newActiveSlideIndex) => {
+    this.setState({
+      activeSlideIndex: newActiveSlideIndex,
+    });
+  };
+
+  render() {
+    return (
+      <Carousel
+        activeSlideIndex={this.state.activeSlideIndex}
+        onRequestChange={this.setActiveSlideIndex}
+        itemsToShow={3}
+        itemsToScroll={3}
+      >
+        <div style={{ width: 300, height: 300 }}>slide 0</div>
+        <div style={{ width: 300, height: 300 }}>slide 1</div>
+        <div style={{ width: 300, height: 300 }}>slide 2</div>
+        <div style={{ width: 300, height: 300 }}>slide 3</div>
+        <div style={{ width: 300, height: 300 }}>slide 4</div>
+        <div style={{ width: 300, height: 300 }}>slide 5</div>
+        <div style={{ width: 300, height: 300 }}>slide 6</div>
+        <div style={{ width: 300, height: 300 }}>slide 7</div>
+        <div style={{ width: 300, height: 300 }}>slide 8</div>
+        <div style={{ width: 300, height: 300 }}>slide 9</div>
+      </Carousel>
+    );
+  }
+}
+export default CarouselCrypto

frontend/src/Components/Container.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import CssBaseline from '@mui/material/CssBaseline';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+
+export default function SimpleContainer() {
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <Container maxWidth="xl">
+        <Box sx={{ bgcolor: '#D3D3D3', height: '100vh' }} />
+      </Container>
+    </React.Fragment>
+  );
+}

frontend/src/Components/DatePicker.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import AdapterDayjs from '@mui/lab/AdapterDayjs';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
+import DatePicker from '@mui/lab/DatePicker';
+
+export default function BasicDatePicker() {
+  const [value, setValue] = React.useState(null);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DatePicker
+        label="Choose a date"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={(params) => <TextField {...params} />}
+      />
+    </LocalizationProvider>
+  );
+}

frontend/src/Components/Header.js

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import Menu from '@mui/material/Menu';
+import MenuIcon from '@mui/icons-material/Menu';
+import Container from '@mui/material/Container';
+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, Link} 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);
+  };
+  const handleOpenUserMenu = (event) => {
+    setAnchorElUser(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
+  return (
+    <AppBar position="static" >
+      <Container maxWidth="xl" style={{ background: '#000000' }}>
+        <Toolbar disableGutters >
+          <Link to="/home">
+          <Typography
+            variant="h6"
+            noWrap
+            component="div"
+            color = "gold"
+            sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
+          >
+            BITSEARCH
+          </Typography>
+          </Link>
+
+          <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+            <IconButton
+              size="large"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleOpenNavMenu}
+              color="inherit"
+            >
+              <MenuIcon />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorElNav}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'left',
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'left',
+              }}
+              open={Boolean(anchorElNav)}
+              onClose={handleCloseNavMenu}
+              sx={{
+                display: { xs: 'block', md: 'none' },
+              }}
+            >
+              {pages.map((page) => (
+                <MenuItem key={page} onClick={handleCloseNavMenu}>
+                  <Typography textAlign="center">{page}</Typography>
+                </MenuItem>
+              ))}
+            </Menu>
+          </Box>
+          <Typography
+            variant="h6"
+            noWrap
+            component="div"
+            sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
+          >
+            BITSEARCH
+          </Typography>
+          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
+            {pages.map((page) => (
+              <Button
+                key={page}
+                onClick={handleOnClick}
+                sx={{ my: 2, color: 'white', display: 'block' }}
+              >
+                {page}
+              </Button>
+            ))}
+          </Box>
+
+          <Box sx={{ flexGrow: 0 }}>
+            <Tooltip title="Open settings">
+              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
+              </IconButton>
+            </Tooltip>
+            <Menu
+              sx={{ mt: '45px' }}
+              id="menu-appbar"
+              anchorEl={anchorElUser}
+              anchorOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              open={Boolean(anchorElUser)}
+              onClose={handleCloseUserMenu}
+            >
+              {settings.map((setting) => (
+                <MenuItem key={setting} onClick={handleCloseNavMenu}>
+                  <Typography textAlign="center">{setting}</Typography>
+                </MenuItem>
+              ))}
+            </Menu>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+};
+export default ResponsiveAppBar;

frontend/src/Components/Treemap.js

@@ -0,0 +1,120 @@
+import * as d3 from 'd3';
+import React, { useRef, useEffect } from 'react';
+
+function Treemap({ width, height, data }){
+    const ref = useRef();
+
+    useEffect(() => {
+        const svg = d3.select(ref.current)
+            .attr("width", width)
+            .attr("height", height)
+            .style("border", "1px solid black")
+    }, []);
+
+    useEffect(() => {
+        draw();
+    }, [data]);
+
+    const draw = () => {
+        const svg = d3.select(ref.current);
+
+        // Give the data to this cluster layout:
+        var root = d3.hierarchy(data).sum(function(d){ return d.value});
+
+        // initialize treemap
+        d3.treemap()
+            .size([width, height])
+            .paddingTop(28)
+            .paddingRight(7)
+            .paddingInner(3)
+            (root);
+        
+        const color = d3.scaleOrdinal()
+            .domain(["boss1", "boss2", "boss3"])
+            .range([ "#402D54", "#D18975", "#8FD175"]);
+
+        const opacity = d3.scaleLinear()
+            .domain([10, 30])
+            .range([.5,1]);
+
+
+        // Select the nodes
+        var nodes = svg
+                    .selectAll("rect")
+                    .data(root.leaves())
+
+        // draw rectangles
+        nodes.enter()
+            .append("rect")
+            .attr('x', function (d) { return d.x0; })
+            .attr('y', function (d) { return d.y0; })
+            .attr('width', function (d) { return d.x1 - d.x0; })
+            .attr('height', function (d) { return d.y1 - d.y0; })
+            .style("stroke", "black")
+            .style("fill", function(d){ return color(d.parent.data.name)} )
+            .style("opacity", function(d){ return opacity(d.data.value)})
+
+        nodes.exit().remove()
+
+        // select node titles
+        var nodeText = svg
+            .selectAll("text")
+            .data(root.leaves())
+
+        // add the text
+        nodeText.enter()
+            .append("text")
+            .attr("x", function(d){ return d.x0+5})    // +10 to adjust position (more right)
+            .attr("y", function(d){ return d.y0+20})    // +20 to adjust position (lower)
+            .text(function(d){ return d.data.name.replace('mister_','') })
+            .attr("font-size", "19px")
+            .attr("fill", "white")
+        
+        // select node titles
+        var nodeVals = svg
+            .selectAll("vals")
+            .data(root.leaves())  
+
+        // add the values
+        nodeVals.enter()
+            .append("text")
+            .attr("x", function(d){ return d.x0+5})    // +10 to adjust position (more right)
+            .attr("y", function(d){ return d.y0+35})    // +20 to adjust position (lower)
+            .text(function(d){ return d.data.value })
+            .attr("font-size", "11px")
+            .attr("fill", "white")
+    
+        // add the parent node titles
+        svg
+        .selectAll("titles")
+        .data(root.descendants().filter(function(d){return d.depth==1}))
+        .enter()
+        .append("text")
+            .attr("x", function(d){ return d.x0})
+            .attr("y", function(d){ return d.y0+21})
+            .text(function(d){ return d.data.name })
+            .attr("font-size", "19px")
+            .attr("fill",  function(d){ return color(d.data.name)} )
+    
+        // Add the chart heading
+        svg
+        .append("text")
+            .attr("x", 0)
+            .attr("y", 14)    // +20 to adjust position (lower)
+            .text("What's hot in Cryptocurrency world")
+            .attr("font-size", "19px")
+            .attr("fill",  "grey" )
+    }
+
+
+    return (
+        <div className="chart">
+            <svg ref={ref}>
+            </svg>
+        </div>
+        
+    )
+
+}
+
+export default Treemap;

frontend/src/Views/BNB3.js

@@ -0,0 +1,126 @@
+import './CoinStat.css';
+import Header from '../Components/Header'
+import Container from '@mui/material/Container';
+//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 {useCallback, Component} from 'react';
+
+import { Link } from "react-router-dom";
+import { PieChart } from 'react-minimal-pie-chart';
+
+
+export class BNB extends Component {
+  componentDidMount() {
+    fetch('https://bitsearch-api.azurewebsites.net/search/analise/bnb')
+      .then((res) => res.json())
+      .then((json) => this.setState({ pos: json.results }));
+  }
+  render() {
+  return (
+    <div>
+      <Header/>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'right'
+        }}>
+      <ImageList sx={{ width: '75vw', height: 200 }} cols={10} rowHeight={164}>
+      {itemData.map((item) => (
+        <Link to={`/coinStat/${item.title}`}>
+        <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 className = 'innerSpace'>
+      <Container maxWidth="xl">
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+      <img src={waluta3} alt='currentVal' style={{
+          borderWidth: 5,
+          height: 200,
+          width: 200
+        }} />
+        </div>
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+        <PieChart
+        viewBoxSize = {700,700}
+        reveal = {100}
+  data={[
+    { title: 'Positive', value: 0.1, color: '#82dd55' },
+    { title: 'Negative', value: 0.008, color: '#E23636' },
+  ]}
+/>
+</div>
+        </Container>
+        </div>
+    </div>
+  );
+}
+}
+const itemData = [
+    {
+      img: waluta1,
+      title: 'Dash',
+    },
+    {
+      img: waluta2,
+      title: 'Bitcoin',
+    },
+    {
+      img: waluta3,
+      title: 'BNB',
+    },
+    {
+      img: waluta4,
+      title: 'Ethereum',
+    },
+    {
+      img: waluta5,
+      title: 'TRON',
+    },
+    {
+      img: waluta6,
+      title: 'ZCash',
+    },
+    {
+      img: waluta7,
+      title: 'Steem',
+    },
+    {
+      img: waluta8,
+      title: 'Tether',
+    },
+    {
+      img: waluta9,
+      title: 'Cardano',
+    },
+    {
+      img: waluta10,
+      title: 'neo',
+    },
+  ];
+
+export default BNB;

frontend/src/Views/Bitcoin2.js

@@ -0,0 +1,129 @@
+import './CoinStat.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, Component} from 'react';
+import { Link } from "react-router-dom";
+import { PieChart } from 'react-minimal-pie-chart';
+
+
+export class Bitcoin extends Component {
+  componentDidMount() {
+    fetch('https://bitsearch-api.azurewebsites.net/search/analise/btc')
+      .then((res) => res.json())
+      .then((json) => this.setState({ pos: json.results }));
+  }
+  render() {
+  return (
+    <div>
+      <Header/>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'right'
+        }}>
+      <ImageList sx={{ width: '75vw', height: 200 }} cols={10} rowHeight={164}>
+      {itemData.map((item) => (
+        <Link to={`/coinStat/${item.title}`}>
+        <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 className = 'innerSpace'>
+      <Container maxWidth="xl">
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+      <img src={waluta2} alt='currentVal' style={{
+          borderWidth: 5,
+          height: 200,
+          width: 200
+        }} />
+        </div>
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+        <PieChart
+        viewBoxSize = {700,700}
+        reveal = {100}
+  data={[
+    { title: 'Positive', value: 0.1, color: '#82dd55' },
+    { title: 'Negative', value: 0.008, color: '#E23636' },
+  ]}
+/>
+</div>
+        </Container>
+        </div>
+    </div>
+  );
+}
+}
+const itemData = [
+    {
+      img: waluta1,
+      title: 'Dash',
+    },
+    {
+      img: waluta2,
+      title: 'Bitcoin',
+    },
+    {
+      img: waluta3,
+      title: 'BNB',
+    },
+    {
+      img: waluta4,
+      title: 'Ethereum',
+    },
+    {
+      img: waluta5,
+      title: 'TRON',
+    },
+    {
+      img: waluta6,
+      title: 'ZCash',
+    },
+    {
+      img: waluta7,
+      title: 'Steem',
+    },
+    {
+      img: waluta8,
+      title: 'Tether',
+    },
+    {
+      img: waluta9,
+      title: 'Cardano',
+    },
+    {
+      img: waluta10,
+      title: 'neo',
+    },
+  ];
+
+export default Bitcoin;

frontend/src/Views/Cardano9.js

@@ -0,0 +1,126 @@
+import './CoinStat.css';
+import Header from '../Components/Header'
+import Container from '@mui/material/Container';
+//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 {useCallback, Component} from 'react';
+
+import { Link } from "react-router-dom";
+import { PieChart } from 'react-minimal-pie-chart';
+
+
+export class Cardano extends Component {
+  componentDidMount() {
+    fetch('https://bitsearch-api.azurewebsites.net/search/analise/ada')
+      .then((res) => res.json())
+      .then((json) => this.setState({ pos: json.results }));
+  }
+  render() {
+  return (
+    <div>
+      <Header/>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'right'
+        }}>
+      <ImageList sx={{ width: '75vw', height: 200 }} cols={10} rowHeight={164}>
+      {itemData.map((item) => (
+        <Link to={`/coinStat/${item.title}`}>
+        <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 className = 'innerSpace'>
+      <Container maxWidth="xl">
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+      <img src={waluta9} alt='currentVal' style={{
+          borderWidth: 5,
+          height: 200,
+          width: 200
+        }} />
+        </div>
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+        <PieChart
+        viewBoxSize = {700,700}
+        reveal = {100}
+  data={[
+    { title: 'Positive', value: 0.1, color: '#82dd55' },
+    { title: 'Negative', value: 0.008, color: '#E23636' },
+  ]}
+/>
+</div>
+        </Container>
+        </div>
+    </div>
+  );
+}
+}
+const itemData = [
+    {
+      img: waluta1,
+      title: 'Dash',
+    },
+    {
+      img: waluta2,
+      title: 'Bitcoin',
+    },
+    {
+      img: waluta3,
+      title: 'BNB',
+    },
+    {
+      img: waluta4,
+      title: 'Ethereum',
+    },
+    {
+      img: waluta5,
+      title: 'TRON',
+    },
+    {
+      img: waluta6,
+      title: 'ZCash',
+    },
+    {
+      img: waluta7,
+      title: 'Steem',
+    },
+    {
+      img: waluta8,
+      title: 'Tether',
+    },
+    {
+      img: waluta9,
+      title: 'Cardano',
+    },
+    {
+      img: waluta10,
+      title: 'neo',
+    },
+  ];
+
+export default Cardano;

frontend/src/Views/CoinStat.css

@@ -0,0 +1,11 @@
+.innerSpace
+{
+  width: 1200px;
+  height: 350px;
+  margin: auto;
+  background: #dadada;
+  border-radius: 5px;
+  transition: all .3s;
+  display: 'flex';
+  justify-Content: space-around;
+}

frontend/src/Views/CoinStat.js

@@ -0,0 +1,130 @@
+import './CoinStat.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, Component} from 'react';
+import { Link } from "react-router-dom";
+import { PieChart } from 'react-minimal-pie-chart';
+
+
+export class CoinStat extends Component {
+  componentDidMount() {
+    fetch('https://bitsearch-api.azurewebsites.net/search/analise/btc/?format=json')
+    .then(response => response.json())
+      .then(data => this.setState({ data }));
+  }
+  
+  render() {
+  return (
+    <div>
+      <Header/>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'right'
+        }}>
+      <ImageList sx={{ width: '75vw', height: 200 }} cols={10} rowHeight={164}>
+      {itemData.map((item) => (
+        <Link to={`/coinStat/${item.title}`}>
+        <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 className = 'innerSpace'>
+      <Container maxWidth="xl">
+        <div style={{
+        display: 'flex',
+        justifyContent: 'space-between'
+        }}>
+      <img src={waluta1} alt='currentVal' style={{
+          borderWidth: 5,
+          height: 200,
+          width: 200
+        }} />
+        <PieChart
+        style={{
+          width: '80vw',
+        }}
+        radius = {80}
+        viewBoxSize = {[500,500]}
+        center = {[250,85]}
+        label={({ dataEntry }) => `${Math.round(dataEntry.percentage)} %`}
+  data={[
+    { title: 'Positive', value: 25, color: '#82dd55' },
+    { title: 'Negative', value: 30, color: '#E23636' },
+  ]}
+/>
+        </div>
+        </Container>
+        </div>
+    </div>
+  );
+}
+}
+const itemData = [
+    {
+      img: waluta1,
+      title: 'Dash',
+    },
+    {
+      img: waluta2,
+      title: 'Bitcoin',
+    },
+    {
+      img: waluta3,
+      title: 'BNB',
+    },
+    {
+      img: waluta4,
+      title: 'Ethereum',
+    },
+    {
+      img: waluta5,
+      title: 'TRON',
+    },
+    {
+      img: waluta6,
+      title: 'ZCash',
+    },
+    {
+      img: waluta7,
+      title: 'Steem',
+    },
+    {
+      img: waluta8,
+      title: 'Tether',
+    },
+    {
+      img: waluta9,
+      title: 'Cardano',
+    },
+    {
+      img: waluta10,
+      title: 'neo',
+    },
+  ];
+
+export default CoinStat;

frontend/src/Views/Dash1.js

@@ -0,0 +1,126 @@
+import './CoinStat.css';
+import Header from '../Components/Header'
+import Container from '@mui/material/Container';
+//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 {useCallback, Component} from 'react';
+
+import { Link } from "react-router-dom";
+import { PieChart } from 'react-minimal-pie-chart';
+
+
+export class Dash extends Component {
+  componentDidMount() {
+    fetch('https://bitsearch-api.azurewebsites.net/search/analise/dash')
+      .then((res) => res.json())
+      .then((json) => this.setState({ pos: json.results }));
+  }
+  render() {
+  return (
+    <div>
+      <Header/>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'right'
+        }}>
+      <ImageList sx={{ width: '75vw', height: 200 }} cols={10} rowHeight={164}>
+      {itemData.map((item) => (
+        <Link to={`/coinStat/${item.title}`}>
+        <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 className = 'innerSpace'>
+      <Container maxWidth="xl">
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+      <img src={waluta1} alt='currentVal' style={{
+          borderWidth: 5,
+          height: 200,
+          width: 200
+        }} />
+        </div>
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+        <PieChart
+        viewBoxSize = {700,700}
+        reveal = {100}
+  data={[
+    { title: 'Positive', value: 0.1, color: '#82dd55' },
+    { title: 'Negative', value: 0.008, color: '#E23636' },
+  ]}
+/>
+</div>
+        </Container>
+        </div>
+    </div>
+  );
+}
+}
+const itemData = [
+    {
+      img: waluta1,
+      title: 'Dash',
+    },
+    {
+      img: waluta2,
+      title: 'Bitcoin',
+    },
+    {
+      img: waluta3,
+      title: 'BNB',
+    },
+    {
+      img: waluta4,
+      title: 'Ethereum',
+    },
+    {
+      img: waluta5,
+      title: 'TRON',
+    },
+    {
+      img: waluta6,
+      title: 'ZCash',
+    },
+    {
+      img: waluta7,
+      title: 'Steem',
+    },
+    {
+      img: waluta8,
+      title: 'Tether',
+    },
+    {
+      img: waluta9,
+      title: 'Cardano',
+    },
+    {
+      img: waluta10,
+      title: 'neo',
+    },
+  ];
+
+export default Dash;

frontend/src/Views/Ethereum4.js

@@ -0,0 +1,126 @@
+import './CoinStat.css';
+import Header from '../Components/Header'
+import Container from '@mui/material/Container';
+//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 {useCallback, Component} from 'react';
+
+import { Link } from "react-router-dom";
+import { PieChart } from 'react-minimal-pie-chart';
+
+
+export class Ethereum extends Component {
+  componentDidMount() {
+    fetch('https://bitsearch-api.azurewebsites.net/search/analise/eth')
+      .then((res) => res.json())
+      .then((json) => this.setState({ pos: json.results }));
+  }
+  render() {
+  return (
+    <div>
+      <Header/>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'right'
+        }}>
+      <ImageList sx={{ width: '75vw', height: 200 }} cols={10} rowHeight={164}>
+      {itemData.map((item) => (
+        <Link to={`/coinStat/${item.title}`}>
+        <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 className = 'innerSpace'>
+      <Container maxWidth="xl">
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+      <img src={waluta4} alt='currentVal' style={{
+          borderWidth: 5,
+          height: 200,
+          width: 200
+        }} />
+        </div>
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+        <PieChart
+        viewBoxSize = {700,700}
+        reveal = {100}
+  data={[
+    { title: 'Positive', value: 0.1, color: '#82dd55' },
+    { title: 'Negative', value: 0.008, color: '#E23636' },
+  ]}
+/>
+</div>
+        </Container>
+        </div>
+    </div>
+  );
+}
+}
+const itemData = [
+    {
+      img: waluta1,
+      title: 'Dash',
+    },
+    {
+      img: waluta2,
+      title: 'Bitcoin',
+    },
+    {
+      img: waluta3,
+      title: 'BNB',
+    },
+    {
+      img: waluta4,
+      title: 'Ethereum',
+    },
+    {
+      img: waluta5,
+      title: 'TRON',
+    },
+    {
+      img: waluta6,
+      title: 'ZCash',
+    },
+    {
+      img: waluta7,
+      title: 'Steem',
+    },
+    {
+      img: waluta8,
+      title: 'Tether',
+    },
+    {
+      img: waluta9,
+      title: 'Cardano',
+    },
+    {
+      img: waluta10,
+      title: 'neo',
+    },
+  ];
+
+export default Ethereum;

frontend/src/Views/Home.js

@@ -0,0 +1,135 @@
+import './Home.css';
+import Header from '../Components/Header'
+import Container from '@mui/material/Container';
+//import CarouselCrypto from '../Components/Carousel'
+//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";
+import Carousel from "react-multi-carousel";
+import "react-multi-carousel/lib/styles.css";
+
+
+const Home = () => {
+  const responsive = {
+    superLargeDesktop: {
+      // the naming can be any, depends on you.
+      breakpoint: { max: 4000, min: 3000 },
+      items: 5
+    },
+    desktop: {
+      breakpoint: { max: 3000, min: 1024 },
+      items: 3
+    },
+    tablet: {
+      breakpoint: { max: 1024, min: 464 },
+      items: 2
+    },
+    mobile: {
+      breakpoint: { max: 464, min: 0 },
+      items: 1
+    }
+  };
+  
+  return (
+    <div>
+        <Header/>
+        <div style={{
+        display: 'flex',
+        justifyContent: 'center'
+        }}>
+    <img src={logo} alt="logo" />
+    </div>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'center'
+        }}>
+          <Carousel responsive={responsive}>
+  <div>
+          <img
+            src={`${waluta1}?w=164&h=164&fit=crop&auto=format`}
+            srcSet={`${waluta2}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+            alt={'title'}
+            loading="lazy"
+          />
+</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+  <div>Item 4</div>
+</Carousel>;<ImageList sx={{ width: '70vw', height: 200 }} cols={10} rowHeight={164}>
+      {itemData.map((item) => (
+        <Link to={`/coinStat/${item.title}`}>
+        <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.css

@@ -0,0 +1,19 @@
+* {
+    box-sizing: border-box;
+  }
+
+.login
+{
+  width: 500px;
+  margin: auto;
+  background: #dadada;
+  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
+  padding: 5px 55px 45px 55px;
+  border-radius: 15px;
+  transition: all .3s;
+}
+
+.outer
+{
+  padding-top: 6vh;
+}

frontend/src/Views/Login.js

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Link from '@mui/material/Link';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+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 (
+    <Typography variant="body2" color="text.secondary" align="center" {...props}>
+      {'Copyright © '}
+      <Link color="inherit" href="https://mui.com/">
+        BitSearch
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}
+
+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);
+    console.log({
+      email: data.get('email'),
+      password: data.get('password'),
+    });
+  };
+
+  return (
+    <div className = 'outer'>
+    <div className = 'login'>
+    <ThemeProvider theme={theme}>
+      <Container component="main" maxWidth="sm">
+        <CssBaseline />
+        <Box
+          sx={{
+            marginTop: 8,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
+            <LockOutlinedIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign in
+          </Typography>
+          <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              id="email"
+              label="Email Address"
+              name="email"
+              autoComplete="email"
+              autoFocus
+            />
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label="Password"
+              type="password"
+              id="password"
+              autoComplete="current-password"
+            />
+            <FormControlLabel
+              control={<Checkbox value="remember" color="primary" />}
+              label="Remember me"
+            />
+            <Button
+              color="secondary"
+              type="submit"
+              fullWidth
+              variant="contained"
+              sx={{ mt: 3, mb: 2 }}
+              onClick={() => {
+                handleOnClick();
+              }}
+            >
+              Sign In
+            </Button>
+            <Grid container>
+              <Grid item xs>
+                <Link href="#" variant="body2">
+                  Forgot password?
+                </Link>
+              </Grid>
+              <Grid item>
+                <Link href="#" variant="body2">
+                  {"Don't have an account? Sign Up"}
+                </Link>
+              </Grid>
+            </Grid>
+          </Box>
+        </Box>
+        <Copyright sx={{ mt: 8, mb: 4 }} />
+      </Container>
+    </ThemeProvider>
+    </div>
+    </div>
+  );
+}

frontend/src/Views/Ranking.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import {Component} 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';
+import Treemap from '../Components/Treemap';
+
+//const heights = [500, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];
+const dataset = {"children":[{"name":"Bitcoin","children":[{"name":"tweets","group":"A","value":300,"colname":"level3"}]},{"name":"Ethereum","children":[{"name":"tweets","group":"A","value":100,"colname":"level3"}]},{"name":"Zcash","children":[{"name":"tweets","group":"A","value":50,"colname":"level3"}]},{"name":"Tether","children":[{"name":"tweets","group":"A","value":200,"colname":"level3"}]},{"name":"TRON","children":[{"name":"tweets","group":"A","value":200,"colname":"level3"}]},{"name":"Steem","children":[{"name":"tweets","group":"A","value":200,"colname":"level3"}]},{"name":"neo","children":[{"name":"tweets","group":"A","value":200,"colname":"level3"}]},{"name":"Dash","children":[{"name":"tweets","group":"A","value":200,"colname":"level3"}]},{"name":"BNB","children":[{"name":"tweets","group":"A","value":200,"colname":"level3"}]},{"name":"Cardano","children":[{"name":"tweets","group":"A","value":200,"colname":"level3"}]}],"name":"CEO"};
+/*
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  border: '1px solid black',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+*/
+export class Ranking extends Component {
+  componentDidMount() {
+    fetch('https://localhost:62241/Search/ranking')
+      .then((res) => res.json())
+      .then((json) => this.setState({ pos: json.results }));
+  }
+  render() {
+  return (
+      <div>
+    <Header/>
+    <div style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems:'center',
+        height: '100vh'
+        }}>
+    <Treemap width={800} height={500} data={dataset} />
+    </div>
+    </div>
+  );
+      }
+}
+export default Ranking;

frontend/src/Views/Steem7.js

@@ -0,0 +1,126 @@
+import './CoinStat.css';
+import Header from '../Components/Header'
+import Container from '@mui/material/Container';
+//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 {useCallback, Component} from 'react';
+
+import { Link } from "react-router-dom";
+import { PieChart } from 'react-minimal-pie-chart';
+
+
+export class Steem extends Component {
+  componentDidMount() {
+    fetch('https://localhost:62241/Search/analise/steem')
+      .then((res) => res.json())
+      .then((json) => this.setState({ pos: json.results }));
+  }
+  render() {
+  return (
+    <div>
+      <Header/>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'right'
+        }}>
+      <ImageList sx={{ width: '75vw', height: 200 }} cols={10} rowHeight={164}>
+      {itemData.map((item) => (
+        <Link to={`/coinStat/${item.title}`}>
+        <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 className = 'innerSpace'>
+      <Container maxWidth="xl">
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+      <img src={waluta7} alt='currentVal' style={{
+          borderWidth: 5,
+          height: 200,
+          width: 200
+        }} />
+        </div>
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+        <PieChart
+        viewBoxSize = {700,700}
+        reveal = {100}
+  data={[
+    { title: 'Positive', value: 0.1, color: '#82dd55' },
+    { title: 'Negative', value: 0.008, color: '#E23636' },
+  ]}
+/>
+</div>
+        </Container>
+        </div>
+    </div>
+  );
+}
+}
+const itemData = [
+    {
+      img: waluta1,
+      title: 'Dash',
+    },
+    {
+      img: waluta2,
+      title: 'Bitcoin',
+    },
+    {
+      img: waluta3,
+      title: 'BNB',
+    },
+    {
+      img: waluta4,
+      title: 'Ethereum',
+    },
+    {
+      img: waluta5,
+      title: 'TRON',
+    },
+    {
+      img: waluta6,
+      title: 'ZCash',
+    },
+    {
+      img: waluta7,
+      title: 'Steem',
+    },
+    {
+      img: waluta8,
+      title: 'Tether',
+    },
+    {
+      img: waluta9,
+      title: 'Cardano',
+    },
+    {
+      img: waluta10,
+      title: 'neo',
+    },
+  ];
+
+export default Steem;

frontend/src/Views/THROW5.js

@@ -0,0 +1,126 @@
+import './CoinStat.css';
+import Header from '../Components/Header'
+import Container from '@mui/material/Container';
+//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 {useCallback, Component} from 'react';
+
+import { Link } from "react-router-dom";
+import { PieChart } from 'react-minimal-pie-chart';
+
+
+export class THROW extends Component {
+  componentDidMount() {
+    fetch('https://bitsearch-api.azurewebsites.net/search/analise/trx')
+      .then((res) => res.json())
+      .then((json) => this.setState({ pos: json.results }));
+  }
+  render() {
+  return (
+    <div>
+      <Header/>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'right'
+        }}>
+      <ImageList sx={{ width: '75vw', height: 200 }} cols={10} rowHeight={164}>
+      {itemData.map((item) => (
+        <Link to={`/coinStat/${item.title}`}>
+        <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 className = 'innerSpace'>
+      <Container maxWidth="xl">
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+      <img src={waluta5} alt='currentVal' style={{
+          borderWidth: 5,
+          height: 200,
+          width: 200
+        }} />
+        </div>
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+        <PieChart
+        viewBoxSize = {700,700}
+        reveal = {100}
+  data={[
+    { title: 'Positive', value: 0.1, color: '#82dd55' },
+    { title: 'Negative', value: 0.008, color: '#E23636' },
+  ]}
+/>
+</div>
+        </Container>
+        </div>
+    </div>
+  );
+}
+}
+const itemData = [
+    {
+      img: waluta1,
+      title: 'Dash',
+    },
+    {
+      img: waluta2,
+      title: 'Bitcoin',
+    },
+    {
+      img: waluta3,
+      title: 'BNB',
+    },
+    {
+      img: waluta4,
+      title: 'Ethereum',
+    },
+    {
+      img: waluta5,
+      title: 'TRON',
+    },
+    {
+      img: waluta6,
+      title: 'ZCash',
+    },
+    {
+      img: waluta7,
+      title: 'Steem',
+    },
+    {
+      img: waluta8,
+      title: 'Tether',
+    },
+    {
+      img: waluta9,
+      title: 'Cardano',
+    },
+    {
+      img: waluta10,
+      title: 'neo',
+    },
+  ];
+
+export default THROW;

frontend/src/Views/Tether8.js

@@ -0,0 +1,126 @@
+import './CoinStat.css';
+import Header from '../Components/Header'
+import Container from '@mui/material/Container';
+//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 {useCallback, Component} from 'react';
+
+import { Link } from "react-router-dom";
+import { PieChart } from 'react-minimal-pie-chart';
+
+
+export class Tether extends Component {
+  componentDidMount() {
+    fetch('https://localhost:62241/Search/analise/usdt')
+      .then((res) => res.json())
+      .then((json) => this.setState({ pos: json.results }));
+  }
+  render() {
+  return (
+    <div>
+      <Header/>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'right'
+        }}>
+      <ImageList sx={{ width: '75vw', height: 200 }} cols={10} rowHeight={164}>
+      {itemData.map((item) => (
+        <Link to={`/coinStat/${item.title}`}>
+        <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 className = 'innerSpace'>
+      <Container maxWidth="xl">
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+      <img src={waluta8} alt='currentVal' style={{
+          borderWidth: 5,
+          height: 200,
+          width: 200
+        }} />
+        </div>
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+        <PieChart
+        viewBoxSize = {700,700}
+        reveal = {100}
+  data={[
+    { title: 'Positive', value: 0.1, color: '#82dd55' },
+    { title: 'Negative', value: 0.008, color: '#E23636' },
+  ]}
+/>
+</div>
+        </Container>
+        </div>
+    </div>
+  );
+}
+}
+const itemData = [
+    {
+      img: waluta1,
+      title: 'Dash',
+    },
+    {
+      img: waluta2,
+      title: 'Bitcoin',
+    },
+    {
+      img: waluta3,
+      title: 'BNB',
+    },
+    {
+      img: waluta4,
+      title: 'Ethereum',
+    },
+    {
+      img: waluta5,
+      title: 'TRON',
+    },
+    {
+      img: waluta6,
+      title: 'ZCash',
+    },
+    {
+      img: waluta7,
+      title: 'Steem',
+    },
+    {
+      img: waluta8,
+      title: 'Tether',
+    },
+    {
+      img: waluta9,
+      title: 'Cardano',
+    },
+    {
+      img: waluta10,
+      title: 'neo',
+    },
+  ];
+
+export default Tether;

frontend/src/Views/ZCash6.js

@@ -0,0 +1,126 @@
+import './CoinStat.css';
+import Header from '../Components/Header'
+import Container from '@mui/material/Container';
+//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 {useCallback, Component} from 'react';
+
+import { Link } from "react-router-dom";
+import { PieChart } from 'react-minimal-pie-chart';
+
+
+export class ZCash extends Component {
+  componentDidMount() {
+    fetch('https://bitsearch-api.azurewebsites.net/search/analise/zec')
+      .then((res) => res.json())
+      .then((json) => this.setState({ pos: json.results }));
+  }
+  render() {
+  return (
+    <div>
+      <Header/>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'right'
+        }}>
+      <ImageList sx={{ width: '75vw', height: 200 }} cols={10} rowHeight={164}>
+      {itemData.map((item) => (
+        <Link to={`/coinStat/${item.title}`}>
+        <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 className = 'innerSpace'>
+      <Container maxWidth="xl">
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+      <img src={waluta6} alt='currentVal' style={{
+          borderWidth: 5,
+          height: 200,
+          width: 200
+        }} />
+        </div>
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+        <PieChart
+        viewBoxSize = {700,700}
+        reveal = {100}
+  data={[
+    { title: 'Positive', value: 0.1, color: '#82dd55' },
+    { title: 'Negative', value: 0.008, color: '#E23636' },
+  ]}
+/>
+</div>
+        </Container>
+        </div>
+    </div>
+  );
+}
+}
+const itemData = [
+    {
+      img: waluta1,
+      title: 'Dash',
+    },
+    {
+      img: waluta2,
+      title: 'Bitcoin',
+    },
+    {
+      img: waluta3,
+      title: 'BNB',
+    },
+    {
+      img: waluta4,
+      title: 'Ethereum',
+    },
+    {
+      img: waluta5,
+      title: 'TRON',
+    },
+    {
+      img: waluta6,
+      title: 'ZCash',
+    },
+    {
+      img: waluta7,
+      title: 'Steem',
+    },
+    {
+      img: waluta8,
+      title: 'Tether',
+    },
+    {
+      img: waluta9,
+      title: 'Cardano',
+    },
+    {
+      img: waluta10,
+      title: 'neo',
+    },
+  ];
+
+export default ZCash;

frontend/src/Views/index.js

@@ -0,0 +1,42 @@
+import React from 'react'
+//routing, navigation through the page
+import { BrowserRouter as Router, Switch, Route, Routes, Link } from "react-router-dom";
+// view/pages/screens
+import Login from './Login';
+import Home from './Home';
+import CoinStat from './CoinStat';
+import Ranking from './Ranking';
+import Dash from './Dash1';
+import Bitcoin from './Bitcoin2';
+import BNB from './BNB3';
+import Ethereum from './Ethereum4';
+import THROW from './THROW5';
+import ZCash from './ZCash6';
+import Steem from './Steem7';
+import Tether from './Tether8';
+import Cardano from './Cardano9';
+import neoC from './neo10';
+const ReactRouterSetup = () => {
+    return (
+        <Router>
+            <Routes>
+            <Route path ='/home' element ={<Home />}/>
+            <Route path ='/' element ={<Login />}/>
+            <Route path ='/ranking' element ={<Ranking />}/>
+            <Route path ='/coinstat' element ={<CoinStat />}/>
+            <Route path ='/coinstat/Bitcoin' element ={<Bitcoin />}/>
+            <Route path ='/coinstat/Ethereum' element ={<Ethereum />}/>
+            <Route path ='/coinstat/Dash' element ={<Dash />}/>
+            <Route path ='/coinstat/BNB' element ={<BNB />}/>
+            <Route path ='/coinstat/THRON' element ={<THROW />}/>
+            <Route path ='/coinstat/ZCash' element ={<ZCash />}/>
+            <Route path ='/coinstat/Steem' element ={<Steem />}/>
+            <Route path ='/coinstat/Tether' element ={<Tether />}/>
+            <Route path ='/coinstat/Cardano' element ={<Cardano />}/>
+            <Route path ='/coinstat/neo' element ={<neoC />}/>
+            </Routes>
+        </Router>
+    );
+};
+
+export default ReactRouterSetup;

frontend/src/Views/neo10.js

@@ -0,0 +1,126 @@
+import './CoinStat.css';
+import Header from '../Components/Header'
+import Container from '@mui/material/Container';
+//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 {useCallback, Component} from 'react';
+
+import { Link } from "react-router-dom";
+import { PieChart } from 'react-minimal-pie-chart';
+
+
+export class neoC extends Component {
+  componentDidMount() {
+    fetch('https://bitsearch-api.azurewebsites.net/search/analise/neo')
+      .then((res) => res.json())
+      .then((json) => this.setState({ pos: json.results }));
+  }
+  render() {
+  return (
+    <div>
+      <Header/>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'right'
+        }}>
+      <ImageList sx={{ width: '75vw', height: 200 }} cols={10} rowHeight={164}>
+      {itemData.map((item) => (
+        <Link to={`/coinStat/${item.title}`}>
+        <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 className = 'innerSpace'>
+      <Container maxWidth="xl">
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+      <img src={waluta10} alt='currentVal' style={{
+          borderWidth: 5,
+          height: 200,
+          width: 200
+        }} />
+        </div>
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+        <PieChart
+        viewBoxSize = {700,700}
+        reveal = {100}
+  data={[
+    { title: 'Positive', value: 0.1, color: '#82dd55' },
+    { title: 'Negative', value: 0.008, color: '#E23636' },
+  ]}
+/>
+</div>
+        </Container>
+        </div>
+    </div>
+  );
+}
+}
+const itemData = [
+    {
+      img: waluta1,
+      title: 'Dash',
+    },
+    {
+      img: waluta2,
+      title: 'Bitcoin',
+    },
+    {
+      img: waluta3,
+      title: 'BNB',
+    },
+    {
+      img: waluta4,
+      title: 'Ethereum',
+    },
+    {
+      img: waluta5,
+      title: 'TRON',
+    },
+    {
+      img: waluta6,
+      title: 'ZCash',
+    },
+    {
+      img: waluta7,
+      title: 'Steem',
+    },
+    {
+      img: waluta8,
+      title: 'Tether',
+    },
+    {
+      img: waluta9,
+      title: 'Cardano',
+    },
+    {
+      img: waluta10,
+      title: 'neo',
+    },
+  ];
+
+export default neoC;

frontend/src/Views/temp

@@ -0,0 +1,14 @@
+<ImageList sx={{ width: '70vw', 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>

frontend/src/index.css

@@ -0,0 +1,17 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #000000;
+  background-image: linear-gradient(147deg, #000000 0%, #434343 74%);
+  width: 100vw;
+  height: 100vh;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

frontend/src/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import './index.css';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+

frontend/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

frontend/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';