feat: changes to React week (Techtonica#956)

* add mongoose note to mongo-db, reword & pare down ev-react directions

* remove mongoose & security reqs from react assessment

* rename react asesmt since mongo was removed

README.md

@@ -138,9 +138,9 @@ If you would like to contribute to the curriculum, please [sign up here](https:/
 1. [React Part 1](/react-js/react.md)
 1. [React Part 2](/projects/eventonica-react.md)
 1. [Enzyme Testing](/testing-and-tdd/enzyme-testing.md)
+1. [Assessment #9.0: Add a feature to your eventonica-react app](/projects/react-assessment.md)
 1. [Intro to Security in Web Development](/security/web-security.md)
 1. [Auth0](/oauth/o-auth.md)
-1. [Assessment #9.0: Add a field to your Eventonica User](/projects/react-mongo-assessment.md)
 1. [Assessment #9.5: Auth0](/projects/auth0-assessment.md)
 1. [Deploying to Heroku with React and Node](/deploying/deploying.md)
 1. [Recursion](/recursion/recursion.md)

databases/mongo-db.md

@@ -1,6 +1,7 @@
 # MongoDB
 
 ### Projected Time
+
 About 4 - 5 hours
 - 20-30 minutes for Lesson
 - 20 minutes for Guided Practice
@@ -9,12 +10,14 @@ About 4 - 5 hours
 - 15 minutes for Check for Understanding
 
 ### Prerequisites
+
 - [Object Literals](/javascript/javascript-6-object-literals.md)
 - [JSON](https://github.com/Techtonica/curriculum/blob/master/api/apis-and-json.md)
 - [Relational Databases](/databases/relational-databases.md)
 - [.env](/command-line/env.md)
 
 ### Motivation
+
 Not all data can be or should be stored in a relational way. In those cases, it is more efficient to use a NoSQL database. MongoDB is one of the most popular NoSQL databases. MongoDB stores data in JSON-like "documents," which is familiar to folks who use JavaScript.
 
 **Which companies use MongoDB?**
@@ -24,12 +27,14 @@ Not all data can be or should be stored in a relational way. In those cases, it
 
 
 ### Objectives
+
 **Participants will be able to:**
 - Set up MongoDB on their laptops
 - Create databases and collections in MongoDB
 - Add, query, and update documents
 
 ### Materials
+
 - [MongoDB slides](https://docs.google.com/presentation/d/1BvO6PrSpulHVSDNOkMaDZM-V7McmheLgm0Lg2PFae7k/edit#slide=id.p)
 - [MongoDB slides video (15 mins watch)](https://drive.google.com/file/d/1022MSkPjfRyGAUQa2I-pQltpUn4Q1NJc/view)
 - [MongoDB data Modelling (Tutorialspoint)](https://www.tutorialspoint.com/mongodb/mongodb_data_modeling.htm)
@@ -40,6 +45,7 @@ Not all data can be or should be stored in a relational way. In those cases, it
 - [Query and Projection Operators in mongoDB](https://docs.mongodb.com/manual/reference/operator/query/)
 
 ### Lesson
+
 - Video walkthrough of lesson slides [MongoDB (15 mins watch)](https://drive.google.com/file/d/1022MSkPjfRyGAUQa2I-pQltpUn4Q1NJc/view)
 - Read through lesson slides [MongoDB](https://docs.google.com/presentation/d/1BvO6PrSpulHVSDNOkMaDZM-V7McmheLgm0Lg2PFae7k/edit#slide=id.p)
 
@@ -53,7 +59,7 @@ Not all data can be or should be stored in a relational way. In those cases, it
 Techtonica staff will assign pairs.
 
 **Activity 1: Installation**
-1. Check to see if you have Homebrew installed on your laptop. From your Terminal, run the `brew help` command. If you have Homebrew installed, you'll see the output from Homebrew appear in your Terminal. 
+1. Check to see if you have Homebrew installed on your laptop. From your Terminal, run the `brew help` command. If you have Homebrew installed, you'll see the output from Homebrew appear in your Terminal.
 
 If no Homebrew-related text appears, you'll need to install Homebrew. Go to the [Homebrew website](https://brew.sh/) and follow the installation instructions. Ask for help if needed.
 
@@ -100,7 +106,7 @@ If no Homebrew-related text appears, you'll need to install Homebrew. Go to the
 1. Read through these MongoDB docs from TutorialsPoint.  You don't have to memorize it, but think about how MongoDB compares to SQL as you read.
   - [Start here and read until the Deployment section.](https://www.tutorialspoint.com/mongodb/mongodb_data_modeling.htm)
   - [Start here and read until the Regex section.](https://www.tutorialspoint.com/mongodb/mongodb_relationships.htm)
-  
+
 2. Go through the following tutorial and follow the steps to build a basic API:
   - [Build a simple nodejs API  using NodeJs, ExpressJs, and MongoDb.](https://medium.freecodecamp.org/building-a-simple-node-js-api-in-under-30-minutes-a07ea9e390d2)
   - Part of the tutorial requires a mLab account. You can create one [by following these directions.](https://docs.mlab.com/)
@@ -121,6 +127,10 @@ Open up the MongoDB daemon and shell again, create a database named "filterData"
 
 List out the steps to store data in MongoDB. Find a classmate. One of you will try to explain the steps by comparing it to organizing books, and the other will compare it to organizing kitchen utensils.
 
+### A Note About Mongoose
+
+Further practice with Mongoose (one [ORM](https://blog.bitsrc.io/what-is-an-orm-and-why-you-should-use-it-b2b6f75f5e2a) for Mongo) is highly encouraged if you plan on creating a project that includes a Mongo database. If that's the case, be sure to check out the Mongoose materials below.
+
 ### Supplemental Materials
 
 - [Mongoose docs on MDN](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose)

projects/eventonica-react.md

@@ -1,47 +1,42 @@
 # Adding a React frontend to your Eventonica API
 
 ### Prerequisites
-* Have a backend API for Eventonica written in Express
+* Have a backend API for Eventonica written in Express/Postgres
 * This is a follow-up to the [Eventonica project](https://github.com/Techtonica/curriculum/blob/eventonica-react/projects/eventonica-project.md)
 
 ### Primary Goals
-* Get experience writing your own React code 
-* By the end of this project, you should have a full-stack app you wrote including the database, backend, and frontend, 
-all working together.
+* Get experience writing your own React code
+* By the end of this project, you should have a full-stack app you wrote including the database, backend, and frontend, all working together.
 
 ### Overview/Instructions
-In this project, you'll create a React frontend for your Eventonica API.
+In this project, you'll create a React frontend for your Eventonica API. You will have less than 2 days, so be aware of your pace.
 
 #### Step 1: Design your UI
-On paper, sketch out a frontend design for your Eventonica application. Make sure it includes the ability for users to:
 
-- Display searched for (from an external API) and/or user-generated/seeded upcoming events
+On paper, sketch out a frontend design for your Eventonica application. You will use the same backend from your existing Eventonica project; but feel free to make the design different than your jQuery/HTML version. The final result should be a polished UI, but keep it simple. Make sure it includes the ability for users to:
+
+- Search for upcoming events through the *Eventful API* *
 - Create a new user
 - Save an event connected to a user
 - Display the events a user is attending
-- Display the attendees of an event
-
-*Note: The objective is to build a frontend that visually displays and makes calls on your API endpoints. Your current API endpoints are what you should go off of. There may be some variety: the above list reflects the original API endpoints of the Eventonica API. You may either continue using eventful's API for generating events or you may create seed data of your own design. However, if you create your own events, you should also include the ability to update and delete them as well.*
 
-#### Step 1: Challenge
+> * Note: Instead of using Eventful's API for generating events, you may create seed data of your own design. However, if you create your own events, you should also include the ability to update and delete them as well. *
 
-- Set up your API so that it performs all CRUD operations on at least a user or an event or some combination of both
-- Find a way to still incorporate an external API such as eventful's API
+#### Step 2: Feedback
 
-Your design can be simple -- don't worry about making a beautiful design at this point. Sketch the design on paper. 
+Show it to another apprentice. Do both of your designs include all of the user stories above?
 
-Show it to another apprentice. Do both of your designs include the ability to hit all your API endpoints?
+#### Step 3: Set up React App
 
-#### Step 2: Set up React
-For this project, we'll use create-react-app to set up the React frontend. There are many possible ways to set up React, 
+For this project, we'll use create-react-app to set up the React frontend. There are many possible ways to set up React,
 and we're going to describe one specific setup that will make it easy for you to deploy your project later.
 
 1. Use `create-react-app` to create a new React App, with `npx create-react-app eventonica-react`.
 If you haven't used create-react-app before, you can read more about what it sets up here: https://www.codecademy.com/articles/how-to-create-a-react-app
-2. Now we'll set up your React app so it can talk to your existing Express app. 
+2. Now we'll set up your React app so it can talk to your existing Express app.
 `cd` into your new React app. Add a line to `package.json` that says `"proxy": "http://localhost:3000"`.
 Note: if you access your Express app by going to a port other than 3000 (e.g. if you go to "http://localhost:5000"), update the line in package.json to match. What this line does is let your React app make API calls directly to your Express app by calling routes like "/events". You can read more about it here: https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development
-3. In package.json, update the line that says `"start": "react-scripts start",` to instead say `"start": "PORT=3001 react-scripts start",`. 
+3. In package.json, update the line that says `"start": "react-scripts start",` to instead say `"start": "PORT=3001 react-scripts start",`.
 This will make sure your React app isn't trying to run on the same port as your Express app, because your React app will now run on port 3001. Each port can only be used by one app at a time.
 
 Here's an example of what `package.json` might look like now:
@@ -77,15 +72,17 @@ Here's an example of what `package.json` might look like now:
 
 4. In your React app directory, run `npm install`.
 5. Make sure your React app works by running `npm start`. You should be able to go to `http://localhost:3001/` and see it running.
-6. In another Terminal tab, run your Express app. Once they are both running, you're ready to code React! 
+6. In another Terminal tab, run your Express app. Once they are both running, you're ready to code React!
 
-#### Step 3: Write the React code
-Build out your UI! You should use React to make the UI look how you want it to. Take a look at `src/index.js` and `src/App.js` as starting points.
 
-Then have your React code call the Eventonica API running on your Express app, to enable users to create/read/update/delete events through your React UI. If you've never used React to interact with an API before, you will need to learn how to have your React code call an API and display the results.
+#### Step 4: Write the React code
+* Build out your UI! You should use React to build the UI according to your design. Take a look at `src/index.js` and `src/App.js` as starting points.
 
-Here's a good starting point for how to interact with an API from React: https://reactjs.org/docs/faq-ajax.html
+* One of the advantages of React is reusability: think about what sorts of components you will need more than once - some examples could include styled buttons or an event info card.  These are the things that you should make into components. Then all you have to do is pass in the different text or functions as props, while the rest can simply be repeated.
 
-Here's a helpful page about the Fetch API, which is one good way to make API requests from the browser, including from React components: https://flaviocopes.com/fetch-api/
+* Keep an eye on the time - remember you are building an MVP (Minimum Viable Product), something clean and usable, with as few features as possible so you can pay more attention to a good user experience.
 
+#### Supplemental Materials
+Here's a good starting point for how to interact with an API from React: https://reactjs.org/docs/faq-ajax.html
 
+Here's a helpful page about the Fetch API, which is one good way to make API requests from the browser, including from React components: https://flaviocopes.com/fetch-api/

projects/react-assessment.md

@@ -0,0 +1,46 @@
+## Assessment #9.0: Add a field to your Eventonica User
+
+### Languages
+- JS
+
+### Frameworks
+- React
+
+### Libraries/ Tools
+- Jest
+- Enzyme
+
+### Primary Goals
+Demonstrate understanding of React, Enzyme, and Jest by adding a feature to your eventonica-react UI.
+
+### Overview
+In this project, you will have 4 hours to **display the attendees of an event** throughout your React/Postgres eventonica-react app.
+
+### Basic Requirements
+1. You can do online research, but do not share knowledge with other apprentices today.
+2. Your project is due in 4 hours.
+
+## Setup Instructions
+- [ ] Create a new branch called "attendees", and add all your changes there. Push your new branch up to GitHub.
+
+## Project Instructions
+-----
+
+#### React & Enzyme
+
+- [ ] Plan out the user's journey:
+  * where will they find the event attendee feature? where would they look for it?
+  * how will the data be organized?
+  * will the user need do perform an action to make the data visible?
+  * will the data stay on the page, or can it be closed/minimized?
+- [ ] Present and style your new data somewhere in the UI using React. Functionality should take priority over beauty.
+- [ ] Add shallow and mount testing with Enzyme and Jest for your new elements.
+** Use any extra time to improve test coverage and add polish. You will be deploying this project next week.
+** Commit early and often, with useful commit messages.
+-----
+
+#### Submit your project
+
+- [ ] Your project and new feature must run.
+- [ ] Note any updates to run instructions in your branch's README.md.
+- [ ] Do not merge "attendees" to your master branch.  Push up your final changes, and send the url of your updated project to your Program Manager.