instantiated new client directory. updated api url for client side app

2022-10-02 12:54:32 -05:00
parent 6873bab352
commit afb9b7d452
31 changed files with 3784 additions and 0 deletions
--- a/_client/.gitignore
+++ b/_client/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/_client/index.html
+++ b/_client/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mikayla's Store</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/_client/package-lock.json
+++ b/_client/package-lock.json
--- a/_client/package.json
+++ b/_client/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.3.0",
+    "sass": "^1.52.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^1.3.0",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.9"
+  }
+}
--- a/_client/src/App.scss
+++ b/_client/src/App.scss
@@ -0,0 +1,134 @@
+/* todo: define and import fonts */
+
+/* color variables */
+$lightblue-1: rgb(81, 144, 147);
+$midblue-1: rgb(65, 65, 159);
+$darkblue-1: rgb(51, 53, 66);
+
+/* universal styles */
+.page {
+  display: flex;
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  top: 4rem;
+  flex-direction: column;
+  align-items: center;
+  z-index: 7;
+  background-color: $midblue-1;
+}
+
+.light-page {
+  background-color: $lightblue-1;
+}
+
+/* navbar styles */
+nav {
+  display: flex;
+  position: absolute;
+  background-color: rgb(12, 6, 6);
+  color: white;
+  top: 0;
+  justify-content: space-around;
+  align-items: center;
+  width: 100%;
+  height: 4rem;
+  border-bottom: 1px solid white;
+  z-index: 9;
+
+  a {
+    color: white;
+  }
+}
+
+/* landing page styles */
+
+.landing {
+  * {
+    display: flex;
+    flex-flow: column wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+  header {
+    margin-top: 4rem;
+    width: 45vw;
+  }
+  section {
+    width: 60vw;
+  }
+
+  header, section {
+    background-color: $lightblue-1;
+    padding: 1.2rem;
+    margin-bottom: 5rem;
+  }
+
+  header, section, .shop-buttons {
+    box-shadow: 4px 4px white;
+    transition: box-shadow ease 1s;
+  }
+
+  header:hover, section:hover, .shop-buttons:hover {
+    box-shadow: 12px 12px white;
+    transition: box-shadow ease 600ms;
+  }
+
+  button {
+    background-color: $midblue-1;
+    color: white;
+    border-radius: 12px;
+    border-style: outset;
+    border-color: $lightblue-1;
+    width: 8rem;
+    height: 3rem;
+  }
+  
+  button:hover {
+    background-color: $lightblue-1;
+    border-color: $midblue-1;
+    box-shadow: 0 0 4px 4px red;
+  }
+  
+  button:active {
+    background-color: black;
+    border-style: inset;
+    border-color: white;
+  }
+
+  .shop-buttons {
+    display: flex;
+    flex-flow: row nowrap;
+    width: 45vw;
+    height: 8rem;
+    justify-content: space-around;
+    background-color: $darkblue-1
+  }
+}
+
+// Login page styles
+.login {
+  display: flex;
+}
+
+// products styles
+.products-results {
+  display: flex;
+}
+
+.product-card {
+  background-color: white;
+  padding: 0.8rem;
+  margin: 0.5rem;
+}
+
+// cart styles
+.cart-item-panel {
+  display: flex;
+  flex-direction: column;
+  padding: 0 2rem;
+  background-color: white;
+  width: 75vw;
+}
--- a/_client/src/App.tsx
+++ b/_client/src/App.tsx
@@ -0,0 +1,41 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { useReducer } from 'react';
+import { AppContext, initialState, reducer } from './store/store';
+
+import NavBar from './components/Navbar';
+import LandingPage from './components/LandingPage';
+import Products from './components/Products/Products';
+import LoginForm from './components/User/LoginForm';
+import Register from './components/User/Register';
+import UserProfile from './components/User/UserProfile';
+import ProductPage from './components/Products/ProductPage';
+import Cart from './components/Cart/Cart';
+
+import './App.scss'
+import AdminHome from './components/AdminPortal/AdminHome';
+
+function App() {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  return (
+    <BrowserRouter>
+      <AppContext.Provider value={[state, dispatch]}>
+          <NavBar/>
+
+          <Routes>
+            <Route path="/" element={<LandingPage/>} />
+            <Route path="/login" element={<LoginForm/>} />
+            <Route path="/users/:userID" element={<UserProfile profile={state.user.id} />} />
+            <Route path="/register" element={<Register/>} />
+            <Route path="/products/" element={<Products />} />
+            <Route path="/cart/" element={<Cart />} />
+            <Route path="/products/:productID" element={<ProductPage />} />
+
+            <Route path="/admin" element={<AdminHome />} />
+          </Routes>
+        </AppContext.Provider>
+    </BrowserRouter>
+  )
+}
+
+export default App
--- a/_client/src/components/AdminPortal/AdminHome.tsx
+++ b/_client/src/components/AdminPortal/AdminHome.tsx
@@ -0,0 +1,33 @@
+import { useContext } from "react";
+import { AppContext } from "../../store/store";
+import Page from "../../util/Page";
+
+export default function AdminHome() {
+    const [state, dispatch] = useContext(AppContext);
+
+    // to do: provide protected access based on a list of approved admin users
+    if (state.user.name) return (
+        <Page>
+            <h1>Admin Management Portal</h1>
+            <h2>Welcome, {state.user.name || ''}</h2>
+
+            <section>
+                <h3>This is where administrative tasks will be supported for the store.</h3>
+                <p>Choose from the options below:</p>
+                
+                <div className="admin-options">
+                    <button>Access product listings and inventory</button>
+                    <button>Manage registered users</button>
+                    <button>Database options</button>
+                </div>
+            </section>
+        </Page>
+    )
+
+    return (
+        <Page>
+            <h1>Administrative access required to view this page.</h1>
+            <p>Please click <a href="/">here</a> to return home.</p>
+        </Page>
+    )
+}
--- a/_client/src/components/Cart/Cart.tsx
+++ b/_client/src/components/Cart/Cart.tsx
@@ -0,0 +1,44 @@
+import { useCallback, useContext, useEffect, useState } from "react";
+import { v4 } from "uuid";
+import { AppContext } from "../../store/store";
+import { ActionType } from "../../store/store_types";
+import { Product } from '../../types/main';
+import { getSubtotal } from "../../util/helpers";
+import Page from "../../util/Page";
+import CartItem from "./CartItem";
+
+function Cart() {
+    const [state, dispatch] = useContext(AppContext);
+    const [data, setData] = useState<any>();
+    const [subtotal, setSubtotal] = useState('loading...');
+
+    return (
+        <Page>
+        {
+        state.user.firstName ?
+            <h1>Hello, {state.user.firstName}!</h1>
+        :
+            <h1>Please <a href='/login'>log in</a> to start your cart.</h1>
+        }
+
+        <section id="cart-contents">
+            { state.cart && 
+
+            <>
+            <p>You have {state.cart.contents.length} items in your cart!</p>
+            <div>
+                {state.cart.contents.map((product: Product) => <CartItem key={v4()} product={product} />)}
+            </div>
+            </>
+
+            }
+        </section>
+
+        <section id="subtotal">
+            <p>Subtotal: {subtotal}</p>
+        </section>
+        </Page>
+    )
+}
+
+export default Cart;
--- a/_client/src/components/Cart/CartItem.tsx
+++ b/_client/src/components/Cart/CartItem.tsx
@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+import { v4 } from "uuid";
+
+function CartItem({ product }: any) {
+    const [quantity, setQuantity] = useState(product.quantity || 0);
+
+    // useEffect(() => {
+    //     updateQuantity(product, quantity);
+    // }, [quantity]);
+
+    return (
+        <div className="cart-item-panel">
+            <strong>{product.name}</strong>
+            <p>{product.price}</p>
+            <p>Quantity: {quantity}</p>
+            <input type="number" min="0" value={quantity} onChange={(e) => setQuantity(Number(e.target.value))}></input>
+        </div>
+    )
+}
+
+export default CartItem;
--- a/_client/src/components/LandingPage.tsx
+++ b/_client/src/components/LandingPage.tsx
@@ -0,0 +1,28 @@
+import Page from "../util/Page";
+import { useNavigate } from "react-router-dom";
+
+function LandingPage() {
+    const navigate = useNavigate();
+
+    return (
+        <Page classes="landing">
+            <header>
+                <h1>Welcome to Mikayla's Mostly Useless Little Store!</h1>
+                <p>Thanks so much for visiting!</p>
+            </header>
+
+            <section className="site-description">
+                <p>This site was built as part of the curriculum for the Codecademy Full Stack Engineer career path. The listings you see on this site do correspond to
+                real life products, which can be purchased through a functioning payment system powered by Stripe. Personal data is rigorously encoded and
+                protected. Feel free to shoot me a message with any questions or comments about this project, and enjoy browsing!</p>
+            </section>
+
+            <div className="shop-buttons">
+                <button onClick={() => navigate('/products')}>SHOP ALL</button>
+                <button>SHOP BY...</button>
+            </div>
+        </Page>
+    )
+}
+
+export default LandingPage;
--- a/_client/src/components/Navbar.tsx
+++ b/_client/src/components/Navbar.tsx
@@ -0,0 +1,52 @@
+import { useReducer, useState, useEffect, useContext } from "react";
+import { AppContext, initialState, reducer } from "../store/store";
+import { ActionType } from "../store/store_types";
+import { useNavigate } from 'react-router-dom';
+
+function NavBar() {
+    const [loggedIn, setLoggedIn] = useState(false);
+    const [profText, setProfText] = useState(null);
+    const [searchInput, setSearchInput] = useState('');
+
+    const [state, dispatch] = useContext(AppContext);
+
+    const navigate = useNavigate();
+
+    const handleSearch = () => {
+        if (searchInput === '') return;
+
+        dispatch({ type: ActionType.SEARCH, payload: searchInput });
+        navigate(`/products?query=${searchInput}`);
+    }
+
+    useEffect(() => {
+        if (state === initialState) return;
+
+        if (state.user && state.user.headers?.authenticated) {
+            setProfText(state.user.email);
+            setLoggedIn(true);
+        } else if (!state.user.authenticated) {
+            setLoggedIn(false);
+        }
+    }, [state]);
+
+    return (
+        <nav>
+            <button onClick={() => navigate("/")}>Logo</button>
+            <div className="searchbar">
+                <input type="text" placeholder="Search products" onChange={(e) => setSearchInput(e.target.value)}/>
+                <button onClick={handleSearch}>Search</button>
+                <button onClick={() => console.log(state)}>Render</button>
+            </div>
+            {loggedIn ?
+                <>
+                <button onClick={() => navigate(`/users/${state.user.id}`)}>{profText}</button>
+                <button onClick={() => navigate('/cart')}>Your cart</button>
+                </>
+            :
+                <button onClick={() => navigate("/login")}>Log In</button>}
+        </nav>
+    )
+}
+
+export default NavBar;
--- a/_client/src/components/Products/ProductCard.tsx
+++ b/_client/src/components/Products/ProductCard.tsx
@@ -0,0 +1,35 @@
+import { useContext } from "react";
+import { useNavigate } from "react-router-dom";
+import { ActionType } from "../../store/store_types";
+import { AppContext } from "../../store/store";
+
+export default function ProductCard({ productData }: any) {
+    const { name, category, description, price, id } = productData;
+    const [state, dispatch] = useContext(AppContext);
+    const navigate = useNavigate();
+
+    const addToCart = () => {
+        dispatch({ type: ActionType.ADDTOCART, payload: productData });
+    }
+
+    return (
+        <div className="card product-card" key={`product-id-${id}`}>
+            <div className="product-photo"></div>
+            <h1>{name}</h1>
+            <p>Category: {category}</p>
+            <p>{description}</p>
+            <p>Price: {`$${price}` || "Free, apparently!"}</p>
+            <div className="product-options">
+                <button onClick={() => navigate(`/products/${id}`)}>More info</button>
+
+                {
+                state.user.headers && state.user.headers.authenticated ?
+                <button onClick={addToCart}>Add to Cart</button>
+                :
+                <button onClick={() => navigate('/login')}>Login to add to your cart</button>
+                }
+
+            </div>
+        </div>
+    )
+}
--- a/_client/src/components/Products/ProductFilter.tsx
+++ b/_client/src/components/Products/ProductFilter.tsx
@@ -0,0 +1,3 @@
+export default function ProductFilter() {
+    return;
+}
--- a/_client/src/components/Products/ProductPage.tsx
+++ b/_client/src/components/Products/ProductPage.tsx
@@ -0,0 +1,27 @@
+import Page from "../../util/Page"
+import { getProductDetails } from "../../util/apiUtils"
+import { useEffect, useState } from "react"
+import { useParams } from "react-router-dom";
+import { Product } from "../../types/main";
+
+export default function ProductPage() {
+    const [info, setInfo] = useState<Product>();
+    const { productID }: any = useParams();
+
+    useEffect(() => {
+        getProductDetails(productID).then(res => setInfo(res));
+    }, [])
+
+    return (
+        info ? 
+        <Page>
+            <h1>{info.name}</h1>
+            <h2>Category: {info.category}</h2>
+
+            <p>(a photo here)</p>
+            <p>{info.description}</p>
+            <p>Price: ${info.price}</p>
+        </Page>
+        : <></>
+    )
+}
--- a/_client/src/components/Products/Products.tsx
+++ b/_client/src/components/Products/Products.tsx
@@ -0,0 +1,49 @@
+import Page from "../../util/Page";
+import ProductCard from "./ProductCard";
+import { getAllProducts } from '../../util/apiUtils';
+import { useState, useEffect } from "react";
+
+type ProductResponse = {
+    category: string,
+    category_id?: number,
+    description: string,
+    id: number,
+    inventory: number,
+    minidescription?: string,
+    name: string,
+    price: string
+}
+
+function Products() {
+    const [productData, setProductData] = useState([]);
+    const [productFeed, setProductFeed] = useState<Array<JSX.Element>>([]);
+
+    useEffect(() => {
+        getAllProducts().then(res => setProductData(res));
+    }, [])
+
+    useEffect(() => {
+        if (!productData) return;
+
+        const results = productData.map((each: ProductResponse) => {
+            return <ProductCard key={each.id} productData={each} />
+        });
+
+        setProductFeed(results);
+    }, [productData]);
+
+    return (
+        <Page>
+            <h1>Found {productFeed.length} products</h1>
+            <div className="filter-results">
+
+            </div>
+
+            <div className="products-results">
+                { productFeed || <p>Loading...</p> }
+            </div>
+        </Page>
+    )
+}
+
+export default Products;
--- a/_client/src/components/User/LoginForm.tsx
+++ b/_client/src/components/User/LoginForm.tsx
@@ -0,0 +1,89 @@
+import { useState, useEffect, useContext } from "react";
+import { AppContext } from "../../store/store";
+import { ActionType } from "../../store/store_types";
+import { userInfo } from "../../types/main";
+import { handleLogin } from "../../util/apiUtils";
+import Page from "../../util/Page";
+
+enum PassVisible {
+    hide = 'password',
+    show = 'text'
+}
+
+function LoginForm() {
+    const [state, dispatch] = useContext(AppContext);
+
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [showPass, setShowPass] = useState(PassVisible.hide);
+
+    const displaySession = async () => {
+        if (username === '' || password === '') return;
+        
+        try {
+            const response = await handleLogin(username, password);
+            const json = await response?.json();
+
+            if (json) {
+                console.log(json);
+                const { session, userProfile } = json;
+                let thisUser: userInfo = {
+                    firstName: userProfile.first_name,
+                    lastName: userProfile.last_name,
+                    id: userProfile.id,
+                    email: userProfile.email,
+                    password: userProfile.password,
+                    headers: session
+                }
+    
+                dispatch({ type: ActionType.USERLOGIN, payload: thisUser });
+            }
+        } catch(e) {
+            console.log(e);
+        }
+    }
+
+    return (
+        <Page classes="login light-page">
+            <h1>Welcome back to my store!</h1>
+
+            <section className="login-form-section">
+                <div className="oauth-section">
+                    <p>Log in with a third party provider:</p>
+                </div>
+
+                <h2>Have a log in? Use the form below:</h2>
+
+                <form>
+                    <div>
+                        <label htmlFor="username-login">Username:</label>
+                        <input
+                            type="text"
+                            id="username-login"
+                            onChange={(e) => setUsername(e.target.value)}
+                        />
+                    </div>
+                    <div>
+                        <label htmlFor="password-login">Password:</label>
+                        <input
+                            type={showPass}
+                            id="password-login"
+                            onChange={(e) => setPassword(e.target.value)}
+                        />
+                        <button type="button"
+                            onClick={() => setShowPass((showPass === PassVisible.hide) ? PassVisible.show : PassVisible.hide)}
+                        >Show password</button>
+                    </div>
+                </form>
+
+                <button onClick={displaySession}>Log In</button>
+            </section>
+
+            <section className="link-to-register">
+                <p>New here? <a href="/register">Click here</a> to register!</p>
+            </section>
+        </Page>
+    )
+}
+
+export default LoginForm;
--- a/_client/src/components/User/Register.tsx
+++ b/_client/src/components/User/Register.tsx
@@ -0,0 +1,111 @@
+import { useEffect, useReducer, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { initialState, reducer } from "../../store/store";
+import { ActionType, emptySessionHeader } from "../../store/store_types";
+import { userInfo } from '../../types/main';
+import { handleLogin, registerNewUser, unwrapLogin } from "../../util/apiUtils";
+import Page from "../../util/Page";
+
+function Register() {
+    const formInitialState: userInfo = {
+        firstName: '',
+        lastName: '',
+        email: '',
+        password: '',
+        verifyPassword: '',
+        created: '',
+        headers: emptySessionHeader
+    }
+
+    const navigate = useNavigate();
+    const [state, dispatch] = useReducer(reducer, initialState);
+    const [userInput, setUserInput] = useState(formInitialState);
+    const [warningText, setWarningText] = useState('initial');
+
+    // checks password complexity
+    useEffect(() => {
+        if (!userInput.password) return;
+
+        switch (true) {
+            case (!userInput.verifyPassword):
+                setWarningText('Verify your password below.');
+                break;
+            case (userInput.verifyPassword !== userInput.password):
+                setWarningText('Passwords do not match.');
+                break;
+            case (userInput.verifyPassword && !userInput.verifyPassword.includes('!')):
+                setWarningText('Password does not meet safety criteria.');
+                break;
+            case (userInput.verifyPassword === userInput.password):
+                setWarningText('');
+                break;
+            default:
+                throw new Error("Password switch case is faulty");
+        }
+    }, [userInput.password, userInput.verifyPassword]);
+
+    // interrupts rendering loop by setting warning text on password data
+    useEffect(() => {
+        if (warningText === '') {
+            setWarningText('Conditions met!');
+        }
+    }, [userInput, warningText]);
+
+    // allows registration submission if warning text has correct value and userData is defined with all required values
+    const handleRegistration = async () => {
+        if (userInput === formInitialState) return;
+        if (warningText !== "Conditions met!") return;
+        
+        let register = await registerNewUser(userInput);
+
+        if (register.ok) {
+            setUserInput(formInitialState);
+            navigate('/');
+        } else {
+            console.log('Something went wrong');
+        }
+    }
+
+    return (
+        <Page classes="register light-page">
+            <h1>Thanks for your interest! Enter the info below to register:</h1>
+
+            <form>
+                <div className="form-row">
+                    <label htmlFor="first-name-register">First Name:</label>
+                    <input required type="text" id="name-register" value={userInput.firstName} onChange={(e) => setUserInput({...userInput, firstName: e.target.value})}/>
+                </div>
+
+                <div className="form-row">
+                    <label htmlFor="last-name-register">Last Name:</label>
+                    <input required type="text" id="last-name-register" value={userInput.lastName} onChange={(e) => setUserInput({...userInput, lastName: e.target.value})}/>
+                </div>
+
+
+                <div className="form-row">
+                    <label htmlFor="email-register">Email address:</label>
+                    <input required type="email" id="email-register" value={userInput.email} onChange={(e) => setUserInput({...userInput, email: e.target.value})}/>
+                </div>
+
+                <p style={(warningText === 'initial') ? {display: 'none'} : {display: 'block'}}>{warningText}</p>
+
+                <div className="form-row">
+                    <label htmlFor="password-register" style={(warningText && warningText !== 'Conditions met!') ? {color: 'red'} : {color: 'green'}}>
+                        Password:
+                    </label>
+                    <input required type="password" id="password-register" value={userInput.password} onChange={(e) => setUserInput({...userInput, password: e.target.value})}/>
+                </div>
+                <div className="form-row">
+                    <label htmlFor="password-verify" style={(warningText && warningText !== 'Conditions met!') ? {color: 'red'} : {color: 'green'}}>
+                        Re-enter password:
+                    </label>
+                    <input required type="password" id="password-verify" value={userInput.verifyPassword} onChange={(e) => setUserInput({...userInput, verifyPassword: e.target.value})}/>
+                </div>
+            </form>
+
+            <button disabled={warningText !== 'Conditions met!'} onClick={handleRegistration}>Create my account</button>
+        </Page>
+    );
+}
+
+export default Register;
--- a/_client/src/components/User/UserProfile.tsx
+++ b/_client/src/components/User/UserProfile.tsx
@@ -0,0 +1,26 @@
+import { useContext } from "react"
+import { AppContext } from "../../store/store"
+
+import Page from "../../util/Page";
+
+export default function UserProfile(profile: any): JSX.Element {
+    const [state, dispatch] = useContext(AppContext);
+
+    if (state.user) return (
+        <Page classes="light-page">
+            <h1>User Profile</h1>
+            <h2>Thanks for supporting us{`, ${state.user.firstName}!` || '!'}</h2>
+            <h2>{state.user.id || 'Profile not found'}</h2>
+            <h3>{state.user.email}</h3>
+
+            <div className="profile-options">
+                <button>Order History</button>
+                <button>Open Orders</button>
+                <button>Edit Profile</button>
+                <button>Profile Settings</button>
+            </div>
+        </Page>
+    );
+
+    return (<></>)
+}
--- a/_client/src/favicon.svg
+++ b/_client/src/favicon.svg
@@ -0,0 +1,15 @@
+<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
+<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>
--- a/_client/src/index.scss
+++ b/_client/src/index.scss
@@ -0,0 +1,13 @@
+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;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/_client/src/main.tsx
+++ b/_client/src/main.tsx
@@ -0,0 +1,5 @@
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.scss'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
--- a/_client/src/store/store.ts
+++ b/_client/src/store/store.ts
@@ -0,0 +1,71 @@
+import { createContext } from "react";
+import { ActionType, userAction, appState, undefinedUser, emptyCart } from './store_types';
+
+export const initialState: appState = {
+    searchTerm: '',
+    user: undefinedUser,
+    cart: emptyCart
+}
+
+export const reducer = (state: appState, action: userAction) => {
+    const { type, payload } = action;
+    switch (type) {
+        case ActionType.GETALL:
+            return state;
+        case ActionType.GETCATEGORY:
+            return state;
+        case ActionType.REGISTERNEW:
+            return state;
+        case ActionType.UPDATEONE:
+            return state;
+        case ActionType.SEARCH:
+            return {
+                ...state,
+                searchTerm: payload
+            }
+        case ActionType.USERLOGIN:
+            return {
+                ...state,
+                user: payload
+            }
+        case ActionType.ADDTOCART:
+            let foundItem = state.cart.contents.find(item => item.id === action.payload.id);
+            if (!foundItem) {
+                let updatedContents = state.cart.contents;
+                updatedContents.push(action.payload);
+                return {
+                    ...state,
+                    cart: {
+                        ...state.cart,
+                        contents: updatedContents
+                    }
+                }
+            } else {
+                let updatedState = state;
+                let updatedItem = foundItem;
+
+                if (updatedItem.quantity) {
+                    updatedItem.quantity += 1;
+                } else {
+                    updatedItem.quantity = 2;
+                }
+
+                updatedState.cart.contents = updatedState.cart.contents.filter(item => item.id !== action.payload.id);
+                updatedState.cart.contents.push(updatedItem);
+
+                return updatedState;
+            }
+        case ActionType.UPDATESUBTOTAL:
+            return {
+                ...state,
+                cart: {
+                    ...state.cart,
+                    subtotal: action.payload
+                }
+            }
+        default:
+            return state;
+    }
+}
+
+export const AppContext = createContext<appState | any>(initialState)
--- a/_client/src/store/store_types.ts
+++ b/_client/src/store/store_types.ts
@@ -0,0 +1,63 @@
+import { userInfo, Cart } from '../types/main';
+
+// type definitions for reducer
+export enum ActionType {
+    GETALL,
+    GETPROFILE,
+    GETCATEGORY,
+    REGISTERNEW,
+    UPDATEONE,
+    SEARCH,
+    USERLOGIN,
+    ADDTOCART,
+    UPDATESUBTOTAL
+}
+
+export interface userAction {
+    type: ActionType;
+    payload: any;
+}
+
+export interface appState {
+    searchTerm: string,
+    user: userInfo,
+    cart: Cart
+}
+
+export type SessionHeader = {
+    authenticated: boolean
+    cookie: {
+        expires: string
+        httpOnly: boolean
+        originalMaxAge: number
+        path: string
+        secure: boolean
+    }
+    user?: userInfo
+}
+
+// empty object templates for initial state
+export const undefinedUser: userInfo = {
+    email: '',
+    name: '',
+    password: '',
+}
+
+export const emptyCart: Cart = {
+    cartID: 0,
+    userInfo: undefinedUser,
+    checkedOut: false,
+    contents: []
+}
+
+export const emptySessionHeader: SessionHeader = {
+    authenticated: false,
+    cookie: {
+        expires: "",
+        httpOnly: false,
+        originalMaxAge: 0,
+        path: "",
+        secure: false,
+    },
+    user: undefinedUser
+}
--- a/_client/src/types/main.d.ts
+++ b/_client/src/types/main.d.ts
@@ -0,0 +1,62 @@
+import { SessionHeader } from "../store/store_types";
+
+// user details and metadata
+export type userInfo = {
+    firstName?: string
+    lastName?: string
+    email: string
+    id?: number
+    
+    // NOTE: userInfo.name => displayName?
+    name?: string
+    password: string
+    verifyPassword?: string
+    headers?: SessionHeader
+    created?: string
+    modified?: string
+}
+
+export type LoginHeaders = {
+    email: string,
+    password: string
+}
+
+// product info
+export type Product = {
+    name: string,
+    productID?: number,
+    category?: string
+    price?: string | number,
+    // when item is included in cart
+    id?: number,
+    quantity?: number,
+    shortDescription?: string,
+    longDescription?: string,
+    description?: string
+    minidescription?: string
+    categoryID: number,
+    inventory: number
+}
+
+export type Category = {
+    id?: number,
+    name: string,
+    shortDescription?: string,
+    longDescription?: string
+}
+
+// user-specific cart and order details
+export type Cart = {
+    cartID: number,
+    userInfo: userInfo,
+    checkedOut: boolean,
+    contents: Product[],
+    subTotal?: number
+}
+
+export type Order = {
+    orderID: number,
+    cartID: Cart.cartID,
+    shipped: boolean,
+    delivered: boolean
+}
--- a/_client/src/util/Page.tsx
+++ b/_client/src/util/Page.tsx
@@ -0,0 +1,9 @@
+function Page({ children, classes }: any) {
+    return (
+        <section className={`page ${classes}`}>
+            {children}
+        </section>
+    )
+}
+
+export default Page;
--- a/_client/src/util/apiUtils.ts
+++ b/_client/src/util/apiUtils.ts
@@ -0,0 +1,72 @@
+import { userInfo } from '../types/main';
+const APISTRING = import.meta.env.VITE_API_URL;
+
+export const getAllUsers = async () => {
+    let serverCall = await fetch(APISTRING + 'users')
+    .then(res => res.json());
+
+    return serverCall;
+}
+
+export const getOneUser = async (email: string) => {
+    let serverCall = await fetch(`${APISTRING}users?email=${email}`)
+    .then(res => res.json());
+
+    return serverCall;
+}
+
+export const registerNewUser = async (user: userInfo) => {
+    let serverCall = await fetch(APISTRING + 'register', {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(user)
+    });
+  
+    if (serverCall.ok) console.log('User added successfully.');
+    return serverCall;
+}
+
+export const handleLogin = async (email: string, password: string) => {
+    const url = APISTRING + 'login';
+    console.log(url);
+    const res = await fetch(url, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ email: email, password: password })
+    });
+
+    return res;
+}
+
+export const unwrapLogin = async (email: string, password: string) => {
+    const response = await handleLogin(email, password);
+    const { session, userProfile } = await response.json();
+
+    return { session, userProfile };
+}
+
+export const getAllProducts = async () => {
+    let serverCall = await fetch(APISTRING + 'product', {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json"
+        }
+    }).then(res => res.json());
+
+    return serverCall;
+}
+
+export const getProductDetails = async (productID: string) => {
+    let serverCall = await fetch(`${APISTRING}product/${productID}`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json"
+        }
+    }).then(res => res.json());
+
+    return serverCall;
+}
--- a/_client/src/util/helpers.ts
+++ b/_client/src/util/helpers.ts
@@ -0,0 +1,18 @@
+import { Product } from "../types/main";
+
+export const getSubtotal = (cartData: Product[]) => {
+    let total = 0;
+
+    if (!cartData) return;
+
+    for (let item of cartData) {
+        if (typeof item.price === 'number') {
+            total += (item.price * (item.quantity || 1));
+        } else {
+            const converted = Number(item.price);
+            total += (converted * (item.quantity || 1));
+        }
+    }
+
+    return total;
+}
--- a/_client/src/vite-env.d.ts
+++ b/_client/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/_client/tsconfig.json
+++ b/_client/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "typeRoots": [
+      "./src/types/main.d.ts",
+      "./node_modules/@types"
+    ]
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/_client/tsconfig.node.json
+++ b/_client/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}
--- a/_client/vite.config.ts
+++ b/_client/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()]
+})