Project2 - MadeOfMoney

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

README.md

@@ -2,6 +2,11 @@
 
 https://bc.rocketacademy.co/2-full-stack/2.p-full-stack-app-firebase
 
+# Project Title: MadeOfeMoney
+
+Visit our project here: https://madeofmoney.web.app/
+If you wish to use this repository, do create your own .env files with your own firebase credentials.
+
 ## Available Scripts
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). In the project directory, you can run:

package.json

@@ -3,9 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "apexcharts": "^3.45.1",
+    "axios": "^1.6.5",
+    "bootstrap": "^5.3.2",
+    "bootstrap-icons": "^1.11.3",
+    "firebase": "^10.7.1",
     "react": "^18.1.0",
+    "react-apexcharts": "^1.4.1",
+    "react-bootstrap": "^2.9.1",
     "react-dom": "^18.1.0",
-    "react-scripts": "5.0.1"
+    "react-google-charts": "^4.0.1",
+    "react-responsive": "^9.0.2",
+    "react-router-dom": "^6.21.0",
+    "react-scripts": "5.0.1",
+    "react-toggle": "^4.1.3"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -8,12 +8,47 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #1e2436;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+  color: rgb(232, 222, 222);
+}
+/* App.css */
+.App {
+  transition: background-color 0.3s ease;
+}
+
+.App.dark {
+  background-color: #1e2436; /* Dark background color */
+  color: #e8dede; /* Light text color */
+}
+
+/* index.css */
+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;
+  transition: background-color 0.3s ease;
+}
+
+body.dark {
+  background-color: #1e2436; /* Dark background color */
+  color: #e8dede; /* Light text color */
+}
+
+/* Additional dark mode styles */
+/* App.css */
+
+/* ... (previous styles) */
+
+.App.dark Table {
+  background-color: #1e2436; /* Dark background color for the table */
+  color: #e8dede; /* Light text color for the table */
 }

src/App.js

@@ -1,20 +1,23 @@
-import React from "react";
-import logo from "./logo.png";
+import React, { useState } from "react";
+import Navbar from "./components/Navbar";
 import "./App.css";
+import Dashboard from "./pages/Dashboard";
 
-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>
-    );
-  }
-}
+const App = () => {
+  const [darkMode, setDarkMode] = useState(false);
+
+  const toggleDarkMode = () => {
+    setDarkMode(!darkMode);
+  };
+
+  return (
+    <div className={`App ${darkMode ? "dark" : ""}`}>
+      <Navbar toggleDarkMode={toggleDarkMode} darkMode={darkMode} />
+      <header className="py-5 my-5">
+        <Dashboard />
+      </header>
+    </div>
+  );
+};
 
 export default App;

src/components/Accountsummary.js

@@ -0,0 +1,36 @@
+import React from "react";
+// import { Link } from "react-router-dom";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+
+const Accountsummary = () => {
+  const data = { amountInvested: 1000, cash: 500, portoflioValue: 50000 };
+
+  return (
+    <Container className="mt-4">
+      <Row className="gx-1">
+        <Col>
+          <div className="d-flex align-items-center p-3 bg-primary text-white">
+            <span className="me-2 fw-bold">Amount Invested:</span>
+            <span>{data.amountInvested}</span>
+          </div>
+        </Col>
+        <Col>
+          <div className="d-flex align-items-center p-3 bg-success text-white">
+            <span className="me-2 fw-bold">Cash:</span>
+            <span>{data.cash}</span>
+          </div>
+        </Col>
+        <Col>
+          <div className="d-flex align-items-center p-3 bg-danger text-white">
+            <span className="me-2 fw-bold">Portfolio Value:</span>
+            <span>{data.portoflioValue}</span>
+          </div>
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+export default Accountsummary;

src/components/AuthPortal/AuthForm.js

@@ -0,0 +1,123 @@
+import React, { useState } from "react";
+import Button from "react-bootstrap/Button";
+import {
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  updateProfile,
+} from "firebase/auth";
+import { auth } from "../../firebase";
+
+const AuthForm = (props) => {
+  const [emailInputField, setEmailInputField] = useState("");
+  const [passwordInputField, setPasswordInputField] = useState("");
+  const [nameInputField, setNameInputField] = useState("");
+  const [isNewUser, setIsNewUser] = useState(true);
+  const [errorCode, setErrorCode] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const handleChange = (event, setter) => {
+    setter(event.target.value);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    const closeAuthForm = () => {
+      // Reset auth form state
+      setEmailInputField("");
+      setPasswordInputField("");
+      setNameInputField("");
+      setIsNewUser(true);
+      setErrorCode("");
+      setErrorMessage("");
+      // Toggle auth form off after authentication
+      props.toggleAuthForm();
+    };
+
+    const setErrorState = (error) => {
+      setErrorCode(error.code);
+      setErrorMessage(error.message);
+    };
+
+    // Authenticate user on submit
+    if (isNewUser) {
+      createUserWithEmailAndPassword(auth, emailInputField, passwordInputField)
+        .then(() => {
+          updateProfile(auth.currentUser, {
+            displayName: nameInputField,
+          });
+          closeAuthForm();
+        })
+        .catch(setErrorState);
+    } else {
+      signInWithEmailAndPassword(auth, emailInputField, passwordInputField)
+        .then(closeAuthForm)
+        .catch(setErrorState);
+    }
+  };
+
+  const toggleNewOrReturningAuth = () => {
+    setIsNewUser(!isNewUser);
+  };
+
+  return (
+    <div>
+      <p>{errorCode ? `Error code: ${errorCode}` : null}</p>
+      <p>{errorMessage ? `Error message: ${errorMessage}` : null}</p>
+      <p>
+        {isNewUser
+          ? "Enter your email and password to sign up."
+          : "Sign in with this form to post."}
+      </p>
+      <form onSubmit={handleSubmit}>
+        {isNewUser && (
+          <label>
+            <span>Name: </span>
+            <input
+              type="text"
+              name="nameInputValue"
+              value={nameInputField}
+              onChange={(event) => handleChange(event, setNameInputField)}
+            />
+            <span>(optional)</span>
+          </label>
+        )}
+        <br />
+        <label>
+          <span>Email: </span>
+          <input
+            type="email"
+            name="emailInputValue"
+            value={emailInputField}
+            onChange={(event) => handleChange(event, setEmailInputField)}
+          />
+        </label>
+        <br />
+        <label>
+          <span>Password: </span>
+          <input
+            type="password"
+            name="passwordInputValue"
+            value={passwordInputField}
+            onChange={(event) => handleChange(event, setPasswordInputField)}
+          />
+        </label>
+        <br />
+        <input
+          type="submit"
+          value={isNewUser ? "Create Account" : "Sign In"}
+          // Disable form submission if email or password are empty
+          disabled={!emailInputField || !passwordInputField}
+        />
+        <br />
+        <Button variant="link" onClick={toggleNewOrReturningAuth}>
+          {isNewUser
+            ? "If you have an account, click here to login"
+            : "If you are a new user, click here to create account"}
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+export default AuthForm;

src/components/Educationalmaterial.js

@@ -0,0 +1,12 @@
+// import { Link } from "react-router-dom";
+// import Container from "react-bootstrap/Container";
+
+const Educationalmaterial = () => {
+  return (
+    <div>
+      <h4 className="fw-bold">Educational material</h4>
+    </div>
+  );
+};
+
+export default Educationalmaterial;

src/components/Grid.js

@@ -0,0 +1,40 @@
+import Table from "react-bootstrap/Table";
+
+const Grid=()=> {
+  return (
+    <div className="Table">
+      <Table responsive>
+        <thead>
+          <tr>
+            <th>#</th>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <th key={index}>Table </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <td key={index}>Table  {index}</td>
+            ))}
+          </tr>
+          <tr>
+            <td>2</td>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <td key={index}>Table  {index}</td>
+            ))}
+          </tr>
+          <tr>
+            <td>3</td>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <td key={index}>Table  {index}</td>
+            ))}
+          </tr>
+        </tbody>
+      </Table>
+    </div>
+  );
+}
+
+export default Grid;