loriculberson

MERN Deployment

Backend App

Resource: 

• Using Postman with GraphQL https://learning.postman.com/docs/sending-requests/graphql/graphql-http/
• Deploy with Heroku and MongoDB Atlas https://coding-boot-camp.github.io/full-stack/mongodb/deploy-with-heroku-and-mongodb-atlas
• Sample projects, see food-frontend and food-backend repos here:https://github.com/orgs/Chicago-2020/repositories

loriculberson

Set up backend and frontend apps

Local Setup

1. create a project 3 directory

GitHub

1. create org
2. create backend repo with Readme then clone it inside of your project 3 directory.

loriculberson

nav a {
  padding-right: 8px;
  text-decoration: none;
}

li { 
  margin: 8px;
}

loriculberson

Backend

Vocabulary:

• GraphQL: a query language that allows us to build even complex queries quickly and concisely, helping to make sure our queries fetch data -- and only the data we need -- quickly.

• Apollo Sandbox: an Apollo Studio Explorer tool and is a great way to to visually explore how GraphQL can be used to request and fetch data while in development. (Not a production tool). We create queries here to fetch data. Query looks like:

query classes{

loriculberson

Build an app where you query an API for data and render it to the page.

Requirements:

1. sketch your app and determine what components you will need
2. use a form to input search data
3. pass the query parameter to the API endpoint a. limit the amount of responses to 10
4. render the response data to the page
5. Add a reset button to clear out the data that was rendered to the page

loriculberson

Counter App

Reference: only use tutorial that use functional components

// function Counter (){}

// const Counter = () => {}

// DO NOT USE CLASS COMPONENTS

loriculberson

export const productData = [
  { id: 1, name: "rapsberry petit four", cost: 199, calories: 131, img: "https://images-gmi-pmc.edge-generalmills.com/5a0d7c12-022f-4f05-9b80-4e9b28dc7029.jpg" },
  { id: 2, name: "shortbread cookie", cost: 89, calories: 142, img: "https://www.noracooks.com/wp-content/uploads/2019/12/IMG_9575.jpg" },
  { id: 3, name: "chocolate croissant", cost: 295, calories: 470, img: "https://t4.ftcdn.net/jpg/02/81/07/59/240_F_281075992_X7unLnUXPnyhQcwiOtjtkeNUfQEshr44.jpg" },
  { id: 4, name: "red velvet cupcake", cost: 349, calories: 439, img: "https://thenovicechefblog.com/wp-content/uploads/2010/09/Red-Velvet-Cupcakes-1-720x720.jpg" },
  { id: 5, name: "lemon square", cost: 189, calories: 275, img: "https://images-gmi-pmc.edge-generalmills.com/48e8b8e5-409f-414c-96f7-cbb42afb43ef.jpg" },
  { id: 6, name: "pistachio macarons", cost: 249, calories: 97, img: "https://i2.wp.com/www.piesandtacos.com/wp-content/uploads/2018/10/pistachio-macarons-29.jpg?w=600&ssl=1" }
]

loriculberson

Code-along Demo app

Build a landing page about yourself

• Name
• Greeting
• Favorite Things list

---

loriculberson

// Resources: 
// https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8
// http://davidshariff.com/blog/javascript-scope-chain-and-closures/
// https://www.freecodecamp.org/news/lets-learn-javascript-closures-66feb44f6a44/

// Purpose: Used to provide data privacy
 
// Closure: The closure is a collection of all the variables in scope at the time of creation of the function.

// Here is how it works. Whenever you declare a new function and assign it to a variable, 

loriculberson

//playerData.js
const alexHobbies = ["dancing", "making YouTube videos", "fishing"];
const joseHobbies = ["travel", "eating burgers", "skiiing"];
const framerberHobbies = ["hunting wabbits", "Sunshine Kids volunteer", "grilling"];
const yordanHobbies = []
const jeremyHobbies = []

export const playerData = [
  { id: 1, firstName: "Alex", lastName: "Bregman", hobbies: alexHobbies, jerseyNumber: 2 },
  { id: 4, firstName: "Yordan", lastName: "Alvarez", hobbies: yordanHobbies, jerseyNumber: 44 },