From b1600adec47a04f60e1da07d94a3ed3906ff5aee Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Thu, 14 Jun 2018 16:44:21 -0400 Subject: starter files --- finished-application/frontend/pages/diagram.js | 202 +++++++++++++++++++++++++ 1 file changed, 202 insertions(+) create mode 100644 finished-application/frontend/pages/diagram.js (limited to 'finished-application/frontend/pages/diagram.js') 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 +

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 +
    • +
+
+
+ React.js +

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 +
    • +
+
+
+ React.js +

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 +
    • +
+
+
+ React.js +

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; -- cgit v1.3