innocuous-symmetry/e-commerce
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

defining more components, beginning to lay out site structure

Browse Source
This commit is contained in:
Mikayla Dobson
2022-05-29 14:28:34 -05:00
parent 9e295dde68
commit 546ed57f27
11 changed files with 229 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
client/package-lock.json generated
View File

@@ -9,7 +9,8 @@
"version": "0.0.0",
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0"
},
"devDependencies": {
"@types/react": "^18.0.0",
@@ -376,6 +377,17 @@
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/runtime": {
"version": "7.18.3",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz",
"integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
"dependencies": {
"regenerator-runtime": "^0.13.4"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/template": {
"version": "7.16.7",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
@@ -1097,6 +1109,14 @@
"node": ">=4"
}
},
"node_modules/history": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
"integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
"dependencies": {
"@babel/runtime": "^7.7.6"
}
},
"node_modules/is-core-module": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
@@ -1253,6 +1273,35 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
"integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
"dependencies": {
"history": "^5.2.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
"integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
"dependencies": {
"history": "^5.2.0",
"react-router": "6.3.0"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
},
"node_modules/resolve": {
"version": "1.22.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
@@ -1658,6 +1707,14 @@
"@babel/helper-plugin-utils": "^7.16.7"
}
},
"@babel/runtime": {
"version": "7.18.3",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz",
"integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
},
"@babel/template": {
"version": "7.16.7",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
@@ -2103,6 +2160,14 @@
"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
"dev": true
},
"history": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
"integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
"requires": {
"@babel/runtime": "^7.7.6"
}
},
"is-core-module": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
@@ -2207,6 +2272,28 @@
"integrity": "sha512-XP8A9BT0CpRBD+NYLLeIhld/RqG9+gktUjW1FkE+Vm7OCinbG1SshcK5tb9ls4kzvjZr9mOQc7HYgBngEyPAXg==",
"dev": true
},
"react-router": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
"integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
"requires": {
"history": "^5.2.0"
}
},
"react-router-dom": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
"integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
"requires": {
"history": "^5.2.0",
"react-router": "6.3.0"
}
},
"regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
},
"resolve": {
"version": "1.22.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",

5
client/package.json
View File

@@ -9,7 +9,8 @@
},
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0"
},
"devDependencies": {
"@types/react": "^18.0.0",
@@ -18,4 +19,4 @@
"typescript": "^4.6.3",
"vite": "^2.9.9"
}
}
}

60
client/src/App.css
View File

@@ -1,14 +1,60 @@
.App {
background-color: #282c34;
min-height: 100vh;
/* todo: define and import fonts */
/* universal styles */
.page {
display: flex;
position: relative;
top: 5rem;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
z-index: 7;
}
button {
font-size: calc(10px + 2vmin);
background-color: green;
}
/* navbar styles */
nav {
display: flex;
position: absolute;
background-color: rgb(12, 6, 6);
color: white;
top: 0;
justify-content: space-around;
width: 100%;
height: auto;
border-bottom: 1px solid white;
z-index: 9;
}
/* landing page styles */
.landing > * {
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
text-align: center;
height: auto;
padding: 1.2rem;
margin-bottom: 5rem;
}
.landing header {
margin-top: 8rem;
width: 45vw;
background-color: gray;
}
.landing section {
width: 60vw;
background-color: gray;
}
.shop-buttons {
display: flex;
flex-flow: row nowrap;
width: 45vw;
background-color: gray;
justify-content: space-around;
}

40
client/src/App.tsx
View File

@@ -1,34 +1,22 @@
import { useState } from 'react'
import { getAllUsers, registerNewUser } from './util/apiUtils';
import { userInfo } from './types/main';
import NavBar from './components/Navbar';
import LandingPage from './components/LandingPage';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import './App.css'
import LoginForm from './components/LoginForm';
import Register from './components/Register';
function App() {
const [response, setResponse] = useState<any>(undefined);
let newUser: userInfo = {
email: 'anotherperson@email.com',
name: "one more person",
password: "dumb_password"
}
return (
<div className="App">
<h2>Server response:</h2>
<div>
{response && response.map((field: userInfo) => {
return (
<>
<p key={`${field.name}_name`}>{field.name}</p>
<p key={`${field.name}_email`}>{field.email}</p>
</>
)
})}
</div>
<BrowserRouter>
<NavBar/>
<button onClick={() => getAllUsers().then(res => setResponse(res))}>API call?</button>
<button onClick={() => registerNewUser(newUser).then(res => alert(res))}>Add sample user</button>
</div>
<Routes>
<Route path="/" element={<LandingPage/>} />
<Route path="/login" element={<LoginForm/>} />
<Route path="/register" element={<Register/>} />
</Routes>
</BrowserRouter>
)
}

0
client/src/components/CartItem.tsx Normal file
View File

25
client/src/components/LandingPage.tsx Normal file
View File

@@ -0,0 +1,25 @@
import Page from "./Page";
function LandingPage() {
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>SHOP ALL</button>
<button>SHOP BY...</button>
</div>
</Page>
)
}
export default LandingPage;

11
client/src/components/LoginForm.tsx
View File

@@ -0,0 +1,11 @@
import Page from "./Page";
function LoginForm() {
return (
<Page>
<h1>Log in here!</h1>
</Page>
)
}
export default LoginForm;

15
client/src/components/Navbar.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { useState } from "react";
function NavBar() {
const [loggedIn, setLoggedIn] = useState(false);
return (
<nav>
<p>Logo</p>
<p>Search bar</p>
{loggedIn ? <p>Profile info</p> : <p>Log In</p>}
</nav>
)
}
export default NavBar;

9
client/src/components/Page.tsx Normal file
View File

@@ -0,0 +1,9 @@
function Page({ children, classes }: any) {
return (
<section className={`page ${classes}`}>
{children}
</section>
)
}
export default Page;

0
client/src/components/ProductFilter.tsx Normal file
View File

11
client/src/components/Register.tsx Normal file
View File

@@ -0,0 +1,11 @@
import Page from "./Page";
function Register() {
return (
<Page>
<h1>Enter your information to register:</h1>
</Page>
);
}
export default Register;