Src

React/AboutPage.js

@@ -0,0 +1,20 @@
+import './styles/styles.css'
+
+function AboutPage() {
+    return(
+        <section>
+            <article className={"info"}>
+                <div>
+                    <h2>Vision</h2>
+                    <p>Serve as a bridge between researchers from around the world, fostering collaboration and the development of open science projects.</p>
+                </div>
+                <div>
+                    <h2>Mission</h2>
+                    <p style={"font-size: large;"}><b>Discovery, Uniting Minds: LabLink<br/>Where Science Knows No Boundaries!</b></p>
+                </div>
+            </article>
+        </section>
+    );
+}
+
+export default AboutPage;

React/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

React/App.js

@@ -0,0 +1,25 @@
+import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
+import './App.css';
+import React, { Suspense, lazy } from 'react';
+import IdHeader from './Header';
+import MyErrorBoundary from './MyErrorBoundary.js';
+
+
+const Index = lazy(() => import('./IndexPage')), Market = lazy(() => import('./MarketPage')), About = lazy(() => import('./AboutPage'));
+
+function App() { 
+  const bg_style = {
+    "background-img": 'url("./images/background.jpg")',
+    "background-position": "center",
+    "background-repeat": "no-repeat",
+    "background-size": "cover"
+  };
+  return (
+    <div class = {"bg"}>
+      <IdHeader />
+      <About />
+    </div>
+  );
+}
+
+export default App;

React/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

React/Header.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import './IdHeader.css';
+import './styles/styles.css'
+import logo from './images/logo.png'
+import { a } from 'react-router-dom';
+
+function Header() {
+  const logo_style = {
+    "max-width": "20%", "margin-bottom": "0%"
+  };
+  const icon_style = {
+    "min-height": "20px", "font-size": "2em"
+  };
+
+  return (
+    <header>
+      <a className={"responsive-img"} style={logo_style} to={"/"}><img src={logo} alt={"Logo"} /></a>
+      <nav>
+        <li><a to={"/marketplace"}>Marketplace</a></li>
+        <li><a to={"/about"}>About</a></li>
+      </nav>
+      <a to={"/login"} className = {"Profile"}>
+        <i style={icon_style} className = {"fa fa-user"}></i>
+        Login
+      </a>
+    </header>
+  );
+}
+
+export default Header;

React/IdHeader.css

@@ -0,0 +1,62 @@
+header {
+    padding: 0 .5%;
+    width: 95%;
+    max-width: 95%; 
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    /*padding-bottom: 30%;*/
+  }
+
+  .Profile {
+    margin-bottom: -2.5%;
+    margin-left: 0.5%;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+    background-color: #001e38;
+    padding: 1%;
+  }
+
+  .Profile *{
+    flex-basis: 100%;
+    text-align: center;
+  }
+
+  nav {
+    display: flex;
+    background-color: #001e38;
+    width: 100%;
+    margin-bottom: -2.5%;
+  }
+
+  nav > li {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    text-align: center;
+    /*margin: auto;*/
+    padding: 14px 10px;
+    justify-content: space-evenly;
+    align-items:center;
+  }
+
+  nav > li > a {
+    flex-basis: auto;
+    width: 60%;
+    align-items: stretch;
+    background-color: rgba(232, 232, 232, 0.9);
+    color: black;
+    border-style: none;
+  }
+
+  nav > li > a:hover {
+    border-style: solid;
+    border-color: #fe8502;
+    background-color: rgba(255, 165, 0, 0.4);
+    color: white;
+    border-width: 5px;
+  }

React/IndexPage.js

@@ -0,0 +1,36 @@
+import React from "react";
+import './styles/styles.css';
+import op_sc_img from './images/Open_science.jpg';
+
+function IndexPage () {
+    return(
+        <section>
+            <article class={"info"}>
+                <div>
+                    <h2>What is Open Science?</h2>
+                    <p>Open science is a research and scientific practice that emphasizes transparency, accessibility, and collaboration in the process of conducting and disseminating scientific work. It involves making research methods, data, and findings openly available to fellow researchers and the public</p>
+                    <p>Overall open science aims to accelerate the pace of scientific discovery, promote innovation, and increase the societal impact of research by removing barriers to access and fostering a culture of collaboration and transparency in the scientific community.</p>
+                </div>
+                <div class={"responsive-img"}>
+                    <img src={op_sc_img} alt={"A man and a woman working together in a project"} />
+                </div>
+            </article>
+            <article class={"info"}>
+                <div>
+                    <h2>Key elements of open science</h2>
+                    <ul>
+                        <li>Making research publications freely accessible.</li>
+                        <li>Encouraging interdisciplinary cooperation</li>
+                        <li>Rapidly disseminating research findings</li>
+                        <li>Adhering to ethical standards</li>
+                        <li>Ensure research is verifiable</li>
+                        <li>Sharing research data and tools openly</li>
+                    </ul>
+                </div>
+            </article>
+
+        </section>
+    );
+}
+
+export default IndexPage;

React/MarketPage.js

@@ -0,0 +1,19 @@
+import './styles/styles.css'
+
+function MarketPage () {
+    return (
+        <section>
+            <article class={"Search_bar"}>
+                <form id={"MyForm"}>
+                    <input type={"text"} placeholder={"Search..."} id={"input_search"} />
+                    <button type={"submit"}><i class={"fa fa-search"}></i></button>
+                </form>
+            </article>
+            <article id={"React"}>
+
+            </article>
+        </section>
+    );
+}
+
+export default MarketPage;

React/MyErrorBoundary.js

@@ -0,0 +1,28 @@
+import React from "react";
+
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = { hasError: false };
+    }
+
+    static getDerivedStateFromError(error) {
+      // Update state so the next render will show the fallback UI.
+      return { hasError: true };
+    }
+
+    componentDidCatch(error, errorInfo) {
+      // You can also log the error to an error reporting service
+        console.error('Error:', error);
+        console.error('Error Info:', errorInfo);
+    }
+
+    render() {
+      if (this.state.hasError) {
+        // You can render any custom fallback UI
+        return <h1>Something went wrong.</h1>;
+      }
+
+      return this.props.children; 
+    }
+  }

React/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

React/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// 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();

React/marketplace.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// 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();

React/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;

React/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';