rocketacademy · spenceryang · Sep 16, 2023 · Sep 17, 2023 · Sep 18, 2023 · Sep 19, 2023
diff --git a/README.md b/README.md
@@ -1,6 +1,23 @@
 # Rocket Academy Coding Bootcamp: Project 1: Frontend App
 
-https://bc.rocketacademy.co/1-frontend/1.p-frontend-app
+# Biquidity Simple Investment Trading Game
+
+Mockups for planning and future improvement:
+https://www.figma.com/proto/6PhcnGVWwq74I4ozikwntv/Binary-Options-Trading-Game?type=design&node-id=2-841&t=keSz7eYPZi4f7VVS-1&scaling=scale-down&page-id=0%3A1&starting-point-node-id=2%3A841&mode=design
+
+Future improvements:
+
+1. Rewrite in function / hook
+2. Utilize React Router
+3. Incorporate backend
+4. Store news and prices by time intervals
+5. Live data
+6. User profile
+7. Portfolio
+8. Analytics of investment performance
+9. Additional investment research and indicators
+10. TradingView integration
+11. Mobile and Web optimized
 
 ## Available Scripts
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,13 +1,24 @@
 {
   "name": "project1-bootcamp",
   "version": "0.1.0",
+  "homepage": "https://game.biquidity.com",
   "private": true,
   "dependencies": {
+    "@chakra-ui/react": "^2.8.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "chart.js": "^4.4.0",
+    "framer-motion": "^10.16.4",
+    "gh-pages": "^6.0.0",
     "react": "^18.1.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1"
   },
   "scripts": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build"
   },

diff --git a/public/CNAME b/public/CNAME
@@ -0,0 +1 @@
+game.biquidity.com
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/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"
-    />
+    <meta name="description" content="Project 1: Biquidity Trading Game" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -24,7 +21,7 @@
       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>Rocket Bootcamp Project</title>
+    <title>Project 1: Biquidity</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  min-height: 100%;
 }
 
 .App-logo {

diff --git a/src/App.js b/src/App.js
@@ -1,18 +1,43 @@
-import React from "react";
-import logo from "./logo.png";
-import "./App.css";
+import React, { Component } from "react";
+import { Flex } from "@chakra-ui/react";
+import Stock from "./stock";
+import Trading from "./trading";
+import Navigation from "./navigation";
+import GetStarted from "./getstarted";
+
+class App extends Component {
+  state = {
+    currentRoute: "/", // default route
+    tradingParams: {}, // to pass parameters to the Trading component
+  };
+
+  navigateTo = (route, params = {}) => {
+    this.setState({ currentRoute: route, tradingParams: params });
+  };
+
+  renderCurrentComponent = () => {
+    switch (this.state.currentRoute) {
+      case "/getstarted":
+        return <GetStarted navigateTo={this.navigateTo} />;
+      case "/stock":
+        return <Stock navigateTo={this.navigateTo} />;
+      case "/trading":
+        return <Trading {...this.state.tradingParams} />;
+      default:
+        return <GetStarted navigateTo={this.navigateTo} />; // handle default case
+    }
+  };
 
-class App extends React.Component {
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-        </header>
-      </div>
+      <Flex direction="column" flex="1" minH="100%" bgColor="background">
+        <Navigation navigateTo={this.navigateTo} />
+        <Flex direction="column" align="center" p={4} flex="1">
+          <Flex flex={1} w="100%">
+            {this.renderCurrentComponent()}
+          </Flex>
+        </Flex>
+      </Flex>
     );
   }
 }

diff --git a/src/Stock.js b/src/Stock.js
@@ -0,0 +1,100 @@
+import {
+  Box,
+  Button,
+  Flex,
+  Table,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from "@chakra-ui/react";
+import React, { Component } from "react";
+import assetData from "./stocks/assets.json";
+
+/**
+ * The Stock component represents the main container for the asset selector screen.
+ */
+
+class Stock extends Component {
+  render() {
+    return (
+      <Flex direction="column" w="100%">
+        <StockList navigateTo={this.props.navigateTo} />
+      </Flex>
+    );
+  }
+}
+
+/**
+ * The StockList component displays a list of stocks with options to trade.
+ */
+
+class StockList extends Component {
+  static defaultProps = {
+    navigateTo: () => {
+      console.warn("navigateTo not provided!");
+    },
+  };
+
+  state = {
+    stocks: assetData,
+  };
+
+  /**
+   * Handles the link click and navigates to the trading page of the selected ticker.
+   * @param {string} ticker - The ticker of the stock.
+   * @param {number} price - The price of the stock.
+   * @param {Event} event - The click event.
+   */
+
+  handleLinkClick = (ticker, price, event) => {
+    event.preventDefault(); // Prevent the default behavior of the anchor tag
+    this.props.navigateTo("/trading", {
+      ticker: ticker,
+      price: price,
+    });
+  };
+
+  /**
+   * Render method for the StockList component.
+   * @return {JSX.Element} - Rendered StockList component.
+   */
+
+  render() {
+    return (
+      <Box overflowX="auto">
+        <Table variant="simple" bgColor="background" color="text">
+          <Thead>
+            <Tr>
+              <Th color="text">Name</Th>
+              <Th color="text">Ticker</Th>
+              <Th></Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {this.state.stocks.map((stock) => (
+              <Tr key={stock.ticker}>
+                <Td>{stock.name}</Td>
+                <Td>{stock.ticker}</Td>
+                <Td>
+                  <Button
+                    bgColor="primary"
+                    color="text"
+                    onClick={(event) =>
+                      this.handleLinkClick(stock.ticker, stock.price, event)
+                    }
+                  >
+                    Trade
+                  </Button>
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </Box>
+    );
+  }
+}
+
+export default Stock;