Merge pull request #5 from ckhawks/that-new-new

Little bit of cleanup + updated README.md

Author: ckhawks

README.md

@@ -1,15 +1,39 @@
-setup
-install docker desktop
-make sure docker desktop running
+![Stellection Header Image](/images/GitHub%20README%20Header%20Image.png)
+
+# Stellection
+Stellection is a tag-based file organization system geared toward digital asset curation.
+
+## Tech Stack
+### Frontend
+- Language: JavaScript (with a little bit of TypeScript)
+- Web Framework: [React](https://reactjs.org/) (through [create-react-app](https://create-react-app.dev/))
+- Component Library: [Geist-UI](https://geist-ui.dev/)
+- API Requests: [SWR](https://swr.vercel.app/) 
+### Backend
+- Language: Node.js (with a little bit of TypeScript)
+- Web Server: [Express](https://expressjs.com/)
+- Database ORM: [Sequelize](https://sequelize.org/)
+### Other
+Stellection also includes other microservices that accomplish tasks for the backend, such as a machine learning-based tagging engine. These are still a work-in-progress.
+
+# Setup
 
 ## First Time Setup
+1. Install Docker Desktop
+2. Open Docker Desktop, make sure the Docker engine has started
+
 ```
 git clone https://github.com/ckhawks/Stellection
 cd Stellection
 docker compose up --build
 ```
 
-## Future Running
+
+## Future
 ```
 docker compose up
+```
+You will have to build again if you install any new `npm` packages into any part of the repository.
+```
+docker compose up --build
 ```

frontend/src/components/NavbarMenu/NavbarMenu.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Image, Button, Tabs } from '@geist-ui/core';
-import { useLocation, redirect, Link, useNavigate } from 'react-router-dom'; // NavLink, useNavigate
+import { useLocation, Link, useNavigate } from 'react-router-dom'; // NavLink, redirect
 
 import './NavbarMenu.css';
 
@@ -57,7 +57,13 @@ const NavbarMenu = (props) => {
                                 <Tabs.Item label="Login" value="login" />
                             </Tabs>
                             <Link to="/register">
-                                <Button auto shadow type="secondary" ml=".5" /* onClick={redirect('/register') }*/><b>Sign Up</b></Button>
+                                <style jsx>{`
+                                    .btn:hover {
+                                        background-color: white !important;
+                                        color: black !important;
+                                    }
+                                `}</style>
+                                <Button auto shadow type="secondary" ml=".5"><b>Sign Up</b></Button>
                             </Link>
 
                         </div>

frontend/src/pages/Authentication/LoginPage.jsx

@@ -1,23 +1,18 @@
-import React, { useEffect, useState } from "react";
-import { Card, Input, Spacer, Text, Link, Button, Dot } from '@geist-ui/core';
+import React, {  } from "react";
+import { Card, Input, Spacer, Text, Link, Button } from '@geist-ui/core';
 import {
     ArrowRight as ArrowRightIcon,
-    Check as CheckIcon,
-    Slash as SlashIcon,
     User as UserIcon,
-    Lock as LockIcon,
-    Mail as MailIcon
+    Lock as LockIcon
 } from '@geist-ui/icons'
 
-import BaseLayout from "../BaseLayout";
-
 const Login = () => {  
 
-    const [emailValue, setEmailValue] = useState('');
-    const emailChangeHandler = (e) => {
-        setEmailValue(e.target.value);
-        console.log("Email changed to " + e.target.value);
-    }
+    // const [emailValue, setEmailValue] = useState('');
+    // const emailChangeHandler = (e) => {
+    //     setEmailValue(e.target.value);
+    //     console.log("Email changed to " + e.target.value);
+    // }
 
     return (
         <>

frontend/src/pages/Authentication/RegisterPage.jsx

@@ -1,7 +1,5 @@
-import BaseLayout from "../BaseLayout";
-
-import React, { useEffect, useState } from "react";
-import { Card, Input, Spacer, Text, Link, Button, Dot } from '@geist-ui/core';
+import React, { useState } from "react";
+import { Card, Input, Spacer, Text, Link, Button } from '@geist-ui/core';
 import {
     ArrowRight as ArrowRightIcon,
     Check as CheckIcon,

frontend/src/pages/GeistTest/GeistTestPage.jsx

@@ -1,21 +1,18 @@
-import React, { useEffect, useState } from "react";
-import { Text, Page, Button, Spacer, Tabs } from '@geist-ui/react';
-import { Power, Github, Twitch as TwitchIcon, Twitter as TwitterIcon } from '@geist-ui/icons';
+import React, {  } from "react";
+import { Button } from '@geist-ui/react';
 
-import NavbarMenu from "../../components/NavbarMenu/NavbarMenu";
-import Footer from '../../components/Footer/Footer';
 
 import './Geist-UI-Custom.css';
-import BaseLayout from "../BaseLayout";
+
 
 // https://github.com/manuanish/manuanish.github.io
 
 const GeistTestContainer = (props) => {
-    const [ buttonLoading, setButtonLoading ] = useState(false);
+    // const [ buttonLoading, setButtonLoading ] = useState(false);
 
-    const onButton1Click = () => {
-        setButtonLoading(!buttonLoading);
-    }
+    // const onButton1Click = () => {
+    //     setButtonLoading(!buttonLoading);
+    // }
 
     return (
         <>

frontend/src/pages/NotFound/NotFoundPage.jsx

@@ -1,5 +1,3 @@
-import BaseLayout from "../BaseLayout";
-
 import { Text } from '@geist-ui/core';
 
 const NotFoundPage = () => {