+ + + + ); + } +} + +export default MyDocument; diff --git a/finished-application/frontend/pages/add.js b/finished-application/frontend/pages/add.js new file mode 100644 index 0000000..57a327d --- /dev/null +++ b/finished-application/frontend/pages/add.js @@ -0,0 +1,10 @@ +import CreateItem from '../components/CreateItem'; +import PleaseSignIn from '../components/PleaseSignIn'; + +const Sell = () => ( + + + +); + +export default Sell; diff --git a/finished-application/frontend/pages/diagram.js b/finished-application/frontend/pages/diagram.js new file mode 100644 index 0000000..a505089 --- /dev/null +++ b/finished-application/frontend/pages/diagram.js @@ -0,0 +1,202 @@ +import styled from 'styled-components'; + +const DiagramStyles = styled.div` + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-column-gap: 20px; + h1 { + grid-column: 1 / -1; + grid-row: 1; + } + ul { + margin: 0; + padding: 0; + list-style: none; + li { + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + padding: 5px 0; + } + } + h2 { + text-align: center; + margin: 0; + background: black; + color: white; + width: calc(40px + 100%); + transform: translateX(-20px); + } + span.for { + font-size: 12px; + text-align: center; + margin-top: 1rem; + margin-bottom: 1rem; + display: block; + } + .slat { + background: #f7f7f7; + padding: 20px; + min-height: 500px; + grid-column: span 2; + grid-row: 4; + line-height: 1.7; + } + + .location { + grid-column: span 4; + background: red; + padding: 5px; + grid-row: 2; + text-align: center; + color: white; + text-transform: uppercase; + } + + .arrow { + font-size: 30px; + line-height: 1; + transform: translateX(-10px) translateX(-50%); + text-align: center; + grid-row: 3; + margin-bottom: -100%; + background: white; + height: 40px; + } + .arrow1 { + grid-column: 3; + } + .arrow2 { + grid-column: 5; + } + .arrow3 { + grid-column: 7; + } + img { + width: 100%; + height: 125px; + object-fit: contain; + } + .slat2 img { + filter: invert(100%); + } + .slat4 img { + mix-blend-mode: multiply; + } +`; + +const Diagram = () => ( + +

The Pieces of our Application

+ Frontend + Backend +

React.js

+ For Building The Interface along with: +

+ Next.js for server side rendering, routing and tooling +
+ Styled Components for styling +
+ React-Apollo for interfacing with Apollo Client +

Apollo Client

+ For Data Management + +

+ Performing GraphQL Mutations +
+ Fetching GraphQL Queries +
+ Caching GraphQL Data +
+ Managing Local State +
+ Error and Loading UI States +
+ Apollo Client replaces the need for redux + data fetching/caching libraries +

GraphQL Yoga

+ + An Express GraphQL Server For: +

+ Implementing Query and Mutation{' '} + Resolvers +
+ Custom Server Side Logic +
+ Charging Credit Cards +
+ Sending Email +
+ Performing JWT Authentication +
+ Checking Permissions +

Prisma

+ + A GraphQL Database Interface +

+ Provides a set of GraphQL CRUD APIs for MySQL or Postgres{' '} + Database +
+ Schema Definition +
+ Data Relationships +
+ Queried Directly from our Yoga Server +
+ Self-hosted or as-a-service +

+ ↔ + ↔ + ↔ + +); + +export default Diagram; diff --git a/finished-application/frontend/pages/index.js b/finished-application/frontend/pages/index.js new file mode 100644 index 0000000..d316108 --- /dev/null +++ b/finished-application/frontend/pages/index.js @@ -0,0 +1,7 @@ +import Items from '../components/Items'; + +const Home = props => ( + +) + +export default Home; diff --git a/finished-application/frontend/pages/item.js b/finished-application/frontend/pages/item.js new file mode 100644 index 0000000..ae1e086 --- /dev/null +++ b/finished-application/frontend/pages/item.js @@ -0,0 +1,7 @@ +import SingleItem from '../components/SingleItem'; + +const ItemPage = ({ query }) => ( + +); + +export default ItemPage; diff --git a/finished-application/frontend/pages/items.js b/finished-application/frontend/pages/items.js new file mode 100644 index 0000000..3426f4b --- /dev/null +++ b/finished-application/frontend/pages/items.js @@ -0,0 +1,3 @@ +import Index from './index'; + +export default Index; diff --git a/finished-application/frontend/pages/me.js b/finished-application/frontend/pages/me.js new file mode 100644 index 0000000..b0c2c25 --- /dev/null +++ b/finished-application/frontend/pages/me.js @@ -0,0 +1,13 @@ +import EditUser from '../components/EditUser'; +import PleaseSignIn from '../components/PleaseSignIn'; + +const MyAccount = () => ( + <> +

My Account

+ + + + +); + +export default MyAccount; diff --git a/finished-application/frontend/pages/order.js b/finished-application/frontend/pages/order.js new file mode 100644 index 0000000..5298202 --- /dev/null +++ b/finished-application/frontend/pages/order.js @@ -0,0 +1,7 @@ +import Order from '../components/Order'; + +const OrderPage = props => ( + +); + +export default OrderPage; diff --git a/finished-application/frontend/pages/orders.js b/finished-application/frontend/pages/orders.js new file mode 100644 index 0000000..4c7c76d --- /dev/null +++ b/finished-application/frontend/pages/orders.js @@ -0,0 +1,10 @@ +import OrderList from '../components/OrderList'; +import PleaseSignIn from '../components/PleaseSignIn'; + +const Orders = () => ( + + + +); + +export default Orders; diff --git a/finished-application/frontend/pages/permissions.js b/finished-application/frontend/pages/permissions.js new file mode 100644 index 0000000..ad6b446 --- /dev/null +++ b/finished-application/frontend/pages/permissions.js @@ -0,0 +1,10 @@ +import Permissions from '../components/Permissions'; +import PleaseSignIn from '../components/PleaseSignIn'; + +const ItemPage = () => ( + + + +); + +export default ItemPage; diff --git a/finished-application/frontend/pages/reset.js b/finished-application/frontend/pages/reset.js new file mode 100644 index 0000000..bc6e377 --- /dev/null +++ b/finished-application/frontend/pages/reset.js @@ -0,0 +1,10 @@ +import Reset from '../components/Reset'; + +const ResetPage = props => ( + <> +

So you wanna reset your password?

+ + +); + +export default ResetPage; diff --git a/finished-application/frontend/pages/sell.js b/finished-application/frontend/pages/sell.js new file mode 100644 index 0000000..155f3b7 --- /dev/null +++ b/finished-application/frontend/pages/sell.js @@ -0,0 +1,10 @@ +import CreateItem from '../components/CreateItem'; +import PleaseSignIn from '../components/PleaseSignIn'; + +const Add = () => ( + + + +); + +export default Add; diff --git a/finished-application/frontend/pages/signup.js b/finished-application/frontend/pages/signup.js new file mode 100644 index 0000000..cd522f8 --- /dev/null +++ b/finished-application/frontend/pages/signup.js @@ -0,0 +1,20 @@ +import styled from 'styled-components'; +import Signup from '../components/Signup'; +import Signin from '../components/Signin'; +import ResetRequest from '../components/ResetRequest'; + +const Columns = styled.div` + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-gap: 20px; +`; + +const SignUpPage = () => ( + + + + + +); + +export default SignUpPage; diff --git a/finished-application/frontend/pages/update.js b/finished-application/frontend/pages/update.js new file mode 100644 index 0000000..7a8630d --- /dev/null +++ b/finished-application/frontend/pages/update.js @@ -0,0 +1,15 @@ +import { Component } from 'react'; +import UpdateItem from '../components/UpdateItem'; +import PleaseSignIn from '../components/PleaseSignIn'; + +class Home extends Component { + render() { + return ( + + + + ); + } +} + +export default Home; -- cgit v1.3