Add various comments for future reference

src/components/Header.js

@@ -15,6 +15,8 @@ export function Header(props) {
     if (props.user) {
       return (
         <Account user={ props.user } />
+      
+      // this caused an absolute mindfuck
         // <NavDropdown title="Account">
          // <NavDropdown.Item href="/signout">Log out</NavDropdown.Item>
         // </NavDropdown>
@@ -26,6 +28,7 @@ export function Header(props) {
 
   }
   return (
+    // create a navigation bar with the collection of navigation items, display as black bar with "ClassName" and variant"
     <Navbar className="mb-3 bg-dark" variant="dark">
       <Container>
         <Navbar.Brand>systie</Navbar.Brand>

src/pages/Detail.js

@@ -7,6 +7,7 @@ import { useParams } from 'react-router-dom';
 import { ItemImage } from '../components/ItemImage';
 
 
+// create function called "Detail"
 export function Detail(props) {
     const [artworkData, setArtworkData] = useState()
 
@@ -19,7 +20,8 @@ export function Detail(props) {
     }, [id])
 
 
-    // Container to show information and artwork itself
+    // container to show information and artwork itself in further detail when user click on image from "Gallery.js" page
+    // Information on the right, image on the left.
 
     if (artworkData) {
         return (

src/pages/Gallery.js

@@ -1,3 +1,4 @@
+// import modules required
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Container from "react-bootstrap/Container";
@@ -5,6 +6,8 @@ import Card from "react-bootstrap/Card";
 import { useState, useEffect } from "react"
 import { ItemImage } from "../components/ItemImage"
 
+
+// create function called "Gallery"
 export function Gallery(props) {
     const [artworks,setArtworks] = useState([])
 
@@ -14,7 +17,7 @@ export function Gallery(props) {
     }, [props.items])
   
   
-  
+    // create a collection of artworks and assign things like position and scaling and referring to Google Firebase Firestore for data.
     const ItemCards = artworks.map( ( artwork, itemkey ) => {
       const itemLink = `/detail/${artwork.id}`
       return(