DO NOT MERGE: Grading Notes

src/App.css

@@ -163,7 +163,6 @@ body {
   background-size: contain;
   background-repeat: repeat;
   height: fit-content;
-  height: 275vh;
   background-color: #1b4170;
   background-attachment: fixed;
 

src/App.js

@@ -41,24 +41,24 @@ function App() {
               {!currentUser && <Auth setCurrentUser={setCurrentUser} />}
             </Route>
 
+            {/* Add Page */}
+            <ProtectedRoute exact path="/products/new" currentUser={currentUser}>
+              <AddProduct user={currentUser} />
+            </ProtectedRoute>
+
             {/* View Product */}
             <Route exact path="/products/:id">
               <ProductDetails user={currentUser} />
             </Route>
 
-            {/* Add Page */}
-            <ProtectedRoute exact path="/add" currentUser={currentUser}>
-              <AddProduct user={currentUser} />
-            </ProtectedRoute>
-
             {/* View Profile/ Edit own Profile */}
             <ProtectedRoute exact path="/profile/:id/edit" currentUser={currentUser}>
-              <EditUserView exact path="/profile/:id/edit" currentUser={currentUser} />
+              <EditUserView />
             </ProtectedRoute>
 
             {/* Profile */}
             <Route exact path="/profile/:id">
-              <UserView exact path="/profile/:id" currentUser={currentUser} />
+              <UserView currentUser={currentUser} />
             </Route>
 
             {/* About Us */}

src/components/Products/ProductsCard.js

@@ -5,7 +5,7 @@ import '../../App.css';
 
 export default function ProductsCard({ products }) {
   return (
-    <div>
+    <>
       <h1 className="productListTitle">
         <img className="techlogo" src={logo} alt="Techswap2"></img>
         Welcome To The TechSwap
@@ -21,6 +21,6 @@ export default function ProductsCard({ products }) {
           </Link>
         </div>
       ))}
-    </div>
+    </>
   );
 }

src/grading.md

@@ -0,0 +1,16 @@
+# Tech Swap Grading Notes
+
+- I had a pretty hard time navigating this app -- I don't see a link to sign in or sign up or links for adding products -- I had to go searching the code to figure out how to get there -- maybe add a redirect on the home page if there isn't a signed in user to show the auth page -- also add links to your headers to make them really obvious
+- I like that you went mobile first, but don't forget to consider larger monitors. You can use media queries in CSS to display different images depending on the size of the browser -- that can stop your header image from stretching on larger monitors
+- Try not to use top-level `<div>` elements -- use fragments (crabby hands) instead (prevents a lot of extra divs in your code)
+- Your split between views / components looks great -- nice job there
+- You had some extraneous props on your routes -- take a look and make sure you understand where `exact` and `path` need to go
+- Overall really cool app -- great job -- just a few things to think about mostly usability wise
+
+| Rubric                                                 | Deduction |
+| ------------------------------------------------------ | --------- |
+| React Router (remove a point for the extraneous props) | -1        |
+| Snapshot tests for all components                      | -1        |
+| Usability                                              | -1        |
+
+**Total Points: 147 / 150**