From ebfaf6e1c8667d4a8f32bee2b69ca31a9c4e19f2 Mon Sep 17 00:00:00 2001 From: Mehul Daruka Date: Sat, 2 Jul 2022 15:35:43 -0500 Subject: [PATCH 1/5] Week 3 slides --- .DS_Store | Bin 0 -> 8196 bytes Week_2/.DS_Store | Bin 0 -> 6148 bytes Week_3/.DS_Store | Bin 0 -> 6148 bytes Week_3/README.md | 34 ++-------------------------------- Week_3/homework/.DS_Store | Bin 0 -> 6148 bytes Week_4/.DS_Store | Bin 0 -> 6148 bytes 6 files changed, 2 insertions(+), 32 deletions(-) create mode 100644 .DS_Store create mode 100644 Week_2/.DS_Store create mode 100644 Week_3/.DS_Store create mode 100644 Week_3/homework/.DS_Store create mode 100644 Week_4/.DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..362f629848925cfa8a72a738a290805c8fbf8a01 GIT binary patch literal 8196 zcmeI1%}(1u5XWaj3XV{v99k(CBul+UAtb3))Qbt>z<~>{;LuiSTt}^i@uGY*hbWTI z@D98JSDu7->50zlE+}zoAFImDL_7cW?o1N@Vy`_80Eq51*aN5mfQ5~;x{dBHM)TCx ztYk*2r~>l=PT&X{a0$V2v=+?+On?b60Vco%n85!)0I%6(R>pN-&$4F%OyETlp!LDV zM(P?(w5p{8ohkuP%Q&nI`&154j&0O6nrOutG@(;bb*eBWhS2FaZkssQXrfi8gD}O1 zFrO?;g(B3ajda@slX}L?FZ0XuHWT%KaxJqQp5qa#-lRq0c^rK z4DodVeb_sWR$}jRVq2@RVka-wpN+4~cewYjqHsKEHXlT3qx@=f%i6NGt*_osIrAoi z$#mQuj6T!WCn+QUsXy?~!r`o6eRC+|$smk}Bb5*aLk#(H9>#&3b>%b;#wyp-6IR8l z^sBY`yyZ0OcBj3+sN3`Xmg+l;Ma6piZujG9|024K;#l|d3@LF#_`y1>nvugeF zMsXzLAC#1uYp2*yZWi-)0ok;3*mP2Ce&?|16p&3Pht2y{HYGZ?vW^>PHCCP1w;AWP zQ$UVR4#y8EHnff{v%yU^CQu*(8+u=ARR14kKmRY#9`mj+0Va?pAj&wUKTK}4!GN;ilaM5LjNwE)E%!hY5nsri;VP}x38 zGSsJ=gWO!sL`%awGQe}E=^FEPOFf#Jza%#ae7rDzK-d0Qf%QgwQV#BX{9|&LXM$T^|M$YbRY9*An@^>7@MQL-{W&|3Xpr>*znU;iMvmQVIjYz-tB;T(!aH|Ng(< z|F4szCJYDzABq80Z^!Kxe#xJ$Ge5^?Z3w-9vT$7G@NWtXdlVywUKTK}4!GN;ilaM5LjNwE)E%!hY5nsri;VP}x38 zGSsJ=gWO!sL`%awGQe}E=^FEPOFf#Jza%#ae7rDzK-d0Qf%QgwQV#BX{9|&LXM$T^|M$YbRY9*An@^>7@MQL-{W&|3Xpr>*znU;iMvmQVIjYz-tB;T(!aH|Ng(< z|F4szCJYDzABq80Z^!Kxe#xJ$Ge5^?Z3w-9vT$7G@NWtXdlVy tag to change dynamically based on API response. -- Style the website by adding CSS to the `style.css` file. - -## Design -[At a bare minimum, your website should look similar to this when finished.](https://www.figma.com/file/vKRFWIFsJ5WRJTvMNFXOiZ/Weather-App?node-id=2%3A213) - -## Things to Google -Good engineers know how to learn on their own. Here are a couple of topics that might be helpful to Google: -- CSS border-radius -- Using the src attribute for the tag to display .svg files - -# Bonus -Flex 💪 your CSS skills by modifying the weather website to be as attractive as possible. Take a look at CSS background gradients and opacity to give your weather site a more modern look! diff --git a/Week_3/homework/.DS_Store b/Week_3/homework/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..81417d9bc356a43ba1ffce1f630217c0e8e2f252 GIT binary patch literal 6148 zcmeHKL2uJA6n^enmTa2T14z9fMdCV@ZlFmMmr%xmD?xAo)HO@RqGk5fq!d(D%6a=S zT=^yZ9r&K@p=^a~HBIkH&!7GLzBu`8*)b8R;Vj!D>Jm`^XKaNi{$bqDzG5vO=>U~| zM){^NCuw2Qm0StjO$B)FI+W818Pe38KVA|q;r-v%?CUo&(|LK}XZmM)QRHPc82nPL zjdth3X0RD-2cMHuGf%2*Mr&KADfY4__HwjdMMjT0)*pkn-t6 zt}`+gmL54+gu@^Jj<4-Dq*RZ|eukWf(kq^7O^q(OGe>&82;3 zQdpbTc069g6)KG{`kG92Ve}V7nXv^`G-WiQZ`7w#s_2}G#`wUKTK}4!GN;ilaM5LjNwE)E%!hY5nsri;VP}x38 zGSsJ=gWO!sL`%awGQe}E=^FEPOFf#Jza%#ae7rDzK-d0Qf%QgwQV#BX{9|&LXM$T^|M$YbRY9*An@^>7@MQL-{W&|3Xpr>*znU;iMvmQVIjYz-tB;T(!aH|Ng(< z|F4szCJYDzABq80Z^!Kxe#xJ$Ge5^?Z3w-9vT$7G@NWtXdlVy Date: Sun, 24 Jul 2022 19:56:02 -0500 Subject: [PATCH 2/5] Week 4 slides and create-react-app instructions --- Week_4/README.md | 22 ++++++++++++++++------ Week_4/homework/.DS_Store | Bin 0 -> 6148 bytes Week_4/homework/frontend/.DS_Store | Bin 0 -> 6148 bytes 3 files changed, 16 insertions(+), 6 deletions(-) create mode 100644 Week_4/homework/.DS_Store create mode 100644 Week_4/homework/frontend/.DS_Store diff --git a/Week_4/README.md b/Week_4/README.md index eaa26997..d73974da 100644 --- a/Week_4/README.md +++ b/Week_4/README.md @@ -1,11 +1,21 @@ -# Week 4: Databases/React +# Week 4: React # Materials -- [Week 4 Backend Slides](https://docs.google.com/presentation/d/1QWH8SWW4XTUI_A3LhbsWsWAac1_Zl3kLXFMAjeQJszo/edit?usp=sharing) -- [Week 4 Frontend Slides](https://docs.google.com/presentation/d/1m7bhkKPdljzQkA8vNb4yvRUpdg72j7WQnrpltOcWQlU/edit?usp=sharing) - -# Week 3 Homework Solution -https://codesandbox.io/s/weather-complete-542y5 +- [Day 7 Slides](https://docs.google.com/presentation/d/1qJv3xzeoCAw2IVXkA0gxWupK4cgK2bLHqBhOaYazjEM/edit?usp=sharing) + +# Setting up React and create-react-app + +Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. + +It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine - install it from https://nodejs.org/en/ if you don't already have it installed. + +Then, run: + +``` +npx create-react-app my-app +cd my-app +npm start +``` # Homework If you have not completed the in-class activity for the backend class, please complete it as homework. If you have any questions, please contact us! For the frontend homework this week, our goal is to create a to do app using React. diff --git a/Week_4/homework/.DS_Store b/Week_4/homework/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..7a0b9fa687ff4ed8840a35ac2a95c030ee2a34c2 GIT binary patch literal 6148 zcmeHK%}&BV5S|5;5@NzZ6OK*15=As5#7jjyc(q0kYOtlK4Yf<4$bpdbtPkVWC-HT3 zW_K|XFy0I?Gs)~XyEC)xe!JNp01(Ylum?~A01K5cQ@~=0ke_rxGNvVmC{!O^h#@$Q zWXF#dqPbxe8KAk#gAX2bpah=iIb~TwR0&We`b6BMc5s;OPj|sPP{Pg z4pc%IbTQ=mGK>Q`Zpu*{3{|eH9ah0Av`gj5q*kw1?1TNrv|>*hHD%YQ(}K0Ny?c1p z?nRHWd{!d`fvZ}{hQS%Ups~QilRJnb8Q-ICmN$!MWCoZ4W?;1#FuRmhT&>^YzhMTL zffZnY_6Hl4&@q^5R9goY>Ir~I*GMI3)1{GeY=e%$R3my&gib}&slq%lgignH+r&8r zQ;j+ugn4`j^JQUPC_;T5`?pm%2uCBA%m6bm&p=jJOLYF9{QUl(PvROgzzqB=21Ksq zwwgF3bG9xFj?P*e^%j+c;!=%YDQKvp7-Q)uE~6^JcAE@D$6%@vTTu8SplINN8TeBM FJ^^53XDI*x literal 0 HcmV?d00001 diff --git a/Week_4/homework/frontend/.DS_Store b/Week_4/homework/frontend/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..ed6096ab4ad2f3e262ee8b3ed83b7e268efd80b7 GIT binary patch literal 6148 zcmeHK!A{#i5S>jza0Hct)JnM^S?ZNS3J3{tano?;WC zdhM6=ci_$Lrd1NSa6lEBk!IiSc;2q}t?l&^k!p>5Z;9$ebke?ZFpzlrJjVNXf)1S(eNv`K53oC^LiA2PWqEh{pEX|jiMy$4-Fyd^^x-JOOo~U zq@~AMFE`xKUhryOty6DIr~60E9sls)c(&tDkM~XeXf~^PuU_w+eC%AOH<|u{JBKN} zImTW%oCD9y&G~yc%u=0QATrOMX9@rYsd`smdKOl%*r?yS%_*VbRh_xx}l9nhS3Op+XRHYrZTbPpDTURE>d#w*Y qhqG~BVeu~o6|)s1m$%{u+!*3MSAc=T!XhFt`4KQONFfS5sRDOnnSJ&E literal 0 HcmV?d00001 From 04debb37839b13e9665c1af00906bed350a9c4c2 Mon Sep 17 00:00:00 2001 From: Causality Date: Sun, 24 Jul 2022 22:55:28 -0400 Subject: [PATCH 3/5] Week 4: Added Debugging Session Code Sandbox Link --- Week_4/README.md | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/Week_4/README.md b/Week_4/README.md index d73974da..141fe51f 100644 --- a/Week_4/README.md +++ b/Week_4/README.md @@ -2,19 +2,23 @@ # Materials - [Day 7 Slides](https://docs.google.com/presentation/d/1qJv3xzeoCAw2IVXkA0gxWupK4cgK2bLHqBhOaYazjEM/edit?usp=sharing) - -# Setting up React and create-react-app - -Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. - -It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine - install it from https://nodejs.org/en/ if you don't already have it installed. - -Then, run: - -``` -npx create-react-app my-app -cd my-app -npm start + +# Debugging Session +https://codesandbox.io/s/react-bugs-ho0ttf?file=/src/App.js + +The following are some examples of common mistakes made for the useEffect and useState React hooks. See if you can spot the bugs, why they occur, and any potential solutions. +# Setting up React and create-react-app + +Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. + +It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine - install it from https://nodejs.org/en/ if you don't already have it installed. + +Then, run: + +``` +npx create-react-app my-app +cd my-app +npm start ``` # Homework From 3f119d4ed16c41164142fa02dab5c8b10bb5e27d Mon Sep 17 00:00:00 2001 From: Zara Shipchandler Date: Sun, 28 Aug 2022 19:34:48 -0500 Subject: [PATCH 4/5] Week 4 React Weather App HW instructions --- Week_4/README.md | 35 +++++++++-------------------------- 1 file changed, 9 insertions(+), 26 deletions(-) diff --git a/Week_4/README.md b/Week_4/README.md index 141fe51f..35a0593d 100644 --- a/Week_4/README.md +++ b/Week_4/README.md @@ -7,6 +7,7 @@ https://codesandbox.io/s/react-bugs-ho0ttf?file=/src/App.js The following are some examples of common mistakes made for the useEffect and useState React hooks. See if you can spot the bugs, why they occur, and any potential solutions. + # Setting up React and create-react-app Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. @@ -22,29 +23,11 @@ npm start ``` # Homework -If you have not completed the in-class activity for the backend class, please complete it as homework. If you have any questions, please contact us! For the frontend homework this week, our goal is to create a to do app using React. - -## Instructions -Make sure you have a text editor installed on your machine. -1. Open your text editor of choice inside the homework/frontend directory. -2. Open the terminal in the homework/frontend directory and run `npm install` to install dependencies for the website. -4. Once all the dependencies are installed, run the application by running `npm start`. A website with a header Blank Name's site should appear. -3. Write code in that implements the todo app. -4. Save the completed site. - -## Requirements -- Modify the Home.js file with the following: - - Implement two lists, a to do list and a done list. When the check button for each task is clicked, move the task to the done list. Conversely, when the undo button for each task is clicked, move the task back to the to do list. - - Render out each task on the two lists by creating a new a ListItem component that accepts props related to its relevant task. - - Implement an input field and "add" button that when clicked, should add a task to the to do list. If a task already exists in the to do list, display an alert. - - At the very top of the page, display a count of the number of tasks left to do. -- Modify the header component to display your name instead of BLANK NAME. - -## Design -[At a bare minimum, your website should look similar to this when finished.](https://www.figma.com/file/EP26zpvSwnc7k7Il8PCajM/To-Do-App?node-id=0%3A1) - -## Things to Google -Good engineers know how to learn on their own. Here are a couple of topics that might be helpful to Google: -- Handling form inputs in React -- HTML alerts -- Using the src attribute for the tag to display .svg files \ No newline at end of file +For homework this week, we are going to be recreating the weather app from last week, but in React! [Here](https://www.figma.com/file/vKRFWIFsJ5WRJTvMNFXOiZ/Weather-App?node-id=2%3A213) is the figma for reference. + +## Some Tips +- Separate parts of the web page into smaller, manageable components (such as a Weather Card) +- Be sure to use React hooks learned in lectures + - useState to manage state, for variables, etc. + - useEffect to change variables when a desired state changes +- Once the components and functionality of the site are complete, use CSS to style \ No newline at end of file From 9f0c81475c151b938d3f79de41a702b58ecc23c4 Mon Sep 17 00:00:00 2001 From: Zara Shipchandler Date: Sun, 28 Aug 2022 19:46:52 -0500 Subject: [PATCH 5/5] Week 5 todo frontend hw instructions --- Week_5/README.md | 47 ++++++++++++++++------------------------------- 1 file changed, 16 insertions(+), 31 deletions(-) diff --git a/Week_5/README.md b/Week_5/README.md index ccc44622..f62ae927 100644 --- a/Week_5/README.md +++ b/Week_5/README.md @@ -38,46 +38,31 @@ To deploy the functions to your cloud ... For more information visit the [Firebase Website](https://firebase.google.com/docs/hosting/test-preview-deploy) # Homework -If you have not completed the in-class activity for the backend class, please complete it as homework. We are reaching the midpoint of the course, so please [fill out the this survey to help us improve the class in the future!](https://docs.google.com/forms/d/e/1FAIpQLSd0_nwS1k-JYjLmUDY2hWe2qswObU3ZzwXQuPULE0W9NmPnZQ/viewform?usp=sf_link) - -In addition, *engineering fellows please share the link to your personal GitHub repository for this class on Slack by this Saturday evening.* We will begin grading your existing homework, so please take this week to complete any homework that you have not yet finished! - -This week's activity will have some connection to last week as you are still writing your ExpressJS REST API, but instead of using a JSON object as a database, we'll be connecting to Firebase and more specifically, Firestore. - -Like last week, we're still dealing with a user database with name and age. Additionally, we have already written two functions for you (GET all users and CREATE a new user). **We want you to extend the functionality of the API by writing an API endpoint to query users in the database, returning users whose age is above a certain query value.** - -Some questions to consider before starting this assignment: - -- What type of request should this be (GET,POST, PUT, etc)? -- How should I get the age (query param, body, etc)? +For the frontend homework this week, our goal is to create a to do app using React. In the end, it should look like [this](https://www.figma.com/file/EP26zpvSwnc7k7Il8PCajM/To-Do-App?node-id=0%3A1). ## Instructions -Make sure you have a firebase account and created a project with the Firestore database checked - -1. Download and save a private credential key by navigating towards your project dashboard -> settings -> service accounts -> generate private key -2. Store your private key in an environment variable, json, etc - Make sure you have a text editor installed on your machine. -1. Open your text editor of choice inside the homework/backend directory. -2. Open the terminal in the homework/frontend directory and run `npm install` to install dependencies. -3. Once all the dependencies are installed, run the application by running `npm run dev`. A message with `Listening on Port 4000` should appear. -4. Write code for index.js that will meet the requirements. -5. Save the completed site. -6. Once done, save and push your code to the forked repository. +1. Open your text editor of choice inside the homework/frontend directory. +2. Open the terminal in the homework/frontend directory and run npm install to install dependencies for the website. +3. Once all the dependencies are installed, run the application by running "npm start". A website with a header Blank Name's site should appear. +4. Write code in that implements the todo app. +5. Save the completed site & push it to your repo. ## Requirements -- A function that returns users in the firestore database over a queried age -- Optional: write the PUT and DELETE methods for users using the Firestore/Firebase SDK -- Optional: connect the Express app to a firebase project and host it on Firebase Functions +- Modify the Home.js file with the following: + - Implement two lists, a to do list and a done list. When the check button for each task is clicked, move the task to the done list. Conversely, when the undo button for each task is clicked, move the task back to the to do list. + - Render out each task on the two lists by creating a new a ListItem component that accepts props related to its relevant task. + - Implement an input field and "add" button that when clicked, should add a task to the to do list. If a task already exists in the to do list, display an alert. + - At the very top of the page, display a count of the number of tasks left to do. +- Modify the header component to display your name instead of BLANK NAME. ## Things to Google -Good engineers know how to learn on their own. Here are a couple of topics that might be helpful to Google based on this week's lesson: +Good engineers know how to learn on their own. Here are a couple of topics that might be helpful to Google: -- Firebase Firestore expressJS SDK -- AWS Lambda Serverless -- Containerization vs Virtualization -- Dev Ops +- Handling form inputs in React +- HTML alerts +- Using the src attribute for the tag to display .svg files \ No newline at end of file