Further code commenting for future reference

src/components/Header.js

@@ -1,3 +1,4 @@
+// import modules required
 import Container from "react-bootstrap/Container"
 import Navbar from "react-bootstrap/Navbar"
 import Nav from "react-bootstrap/Nav"

src/components/ItemImage.js

@@ -1,13 +1,15 @@
+// import modules required
 import { useState, useEffect, useContext } from 'react'
 import { StorageContext } from '../contexts/StorageContext'
 import { ref, getDownloadURL } from 'firebase/storage'
 import Card from 'react-bootstrap/Card'
 
 export function ItemImage ( props ) {
+  // declare variables
   const [image,setImage] = useState()
-
   const storage = useContext( StorageContext)
 
+  // useEffect to get image from Google Firebase Storage via the URL given in Google Firebase Firestore
   useEffect( () => {
     if( props.source ) {
       const imgref = ref( storage, `artworks/${props.source}`)
@@ -17,6 +19,7 @@ export function ItemImage ( props ) {
     }
   }, [props.source] )
 
+  // if image cannot be loaded, display a grey box as placeholder
   if(!image) {
     const defstyle={
       backgroundColor: "#cccccc",
@@ -29,6 +32,7 @@ export function ItemImage ( props ) {
   }
   else {
     return (
+      // if all works out, display the image, title and author of the artwork in the gallery boxes with the correct scaling
       <Card.Img style={{aspectRatio: "3/4"}} variant='top' src={image} />
     )
   }

src/pages/Home.js

@@ -10,7 +10,7 @@ export function Home(props) {
   return (
     // temp home page
     <Container>
-      <p>This is a tempoary home page</p>
+      <p>This is a tempoary home page further work will be done later on.</p>
     </Container>
   )
 }