Lori Culberson loriculberson

MERN Deployment

Backend App

Resource:

Local Setup

GitHub

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

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{

Requirements:

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

Reference: only use tutorial that use functional components

// function Counter (){}

// const Counter = () => {}

// DO NOT USE CLASS COMPONENTS

Code-along Demo app

Build a landing page about yourself

	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" }
	]

	// 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,

	//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 },