Add frontend and backend files

frontend/src/components/app/App.css

@@ -0,0 +1,3 @@
+body {
+    background-color: #eafaf9;
+}

frontend/src/components/app/App.js

@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+import './App.css';
+import EventList from '../eventList/EventList.js';
+
+function App(props) {
+  const [events, setEvents] = useState(['EventLog']); // initialises Event state
+  const [sse, setSse] = useState(new EventSource('/events', { withCredentials: true})) // creates eventSource listener
+  
+  useEffect(() => {
+    
+    sse.onerror = (e) => {
+      console.error();
+      sse.close();
+    }
+    
+    sse.onmessage = (e) => {
+      // parses received data from string to JSON
+      const message = JSON.parse(e.data);
+
+      // initialises a new array with updated server-side event array
+      const newEvents = [...message];
+
+      // sets the updated event array as state
+      setEvents(newEvents);
+    };
+  });
+
+  return <EventList data={events} />
+    
+}
+
+export default App;

frontend/src/components/event/Event.css

@@ -0,0 +1,18 @@
+.eventDiv {
+    background-color: aliceblue;
+    border: 2px solid #26A69A;
+    border-radius: 15px;
+    text-align: left;
+    padding: 5px;
+    max-width: fit-content;
+    font-family: apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+    color: #092a26; 
+    margin: 7px 0px;
+}
+
+.eventPic {
+    border-radius: 15px;
+    border: 1px groove #d5f6f2;
+    max-width:100%;
+    max-height:100%;
+}

frontend/src/components/event/Event.js

@@ -0,0 +1,13 @@
+import React from "react";
+import "./Event.css";
+
+function Event(props) {
+
+    return (
+        <div className="eventDiv">
+            {props.data.picUrl? <img className="eventPic" src={props.data.picUrl}></img> : JSON.stringify(props.data)}
+        </div>
+    );
+}
+
+export default Event;

frontend/src/components/eventList/EventList.css

@@ -0,0 +1,11 @@
+.eventListUl {
+    background-color: #c1f1ec;
+    max-width: 50%;
+    padding: 5px;
+    border: 5px solid #26A69A;
+    border-radius: 5px; 
+}
+
+.eventListLi {
+    list-style: none;
+}

frontend/src/components/eventList/EventList.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Event from '../event/Event.js';
+import './EventList.css';
+
+function EventList(props) {
+    console.log(`FROM LIST: ${props.data}`);
+
+    return (
+        <ul className="eventListUl">
+            {props.data.map((event) => {
+                return <li className="eventListLi"><Event data={event} /></li>
+            })}
+        </ul>
+    )
+
+}
+
+export default EventList;

frontend/src/index.css

@@ -0,0 +1,3 @@
+body {
+
+}

frontend/src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './components/app/App.js';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

frontend/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

frontend/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';