@conorheffron/ironoc-frontend 2.1.2

package/README.md

@@ -0,0 +1,77 @@
+# ironoc-frontend
+
+[![Node.js Package](https://github.com/conorheffron/ironoc/actions/workflows/npm-publish-github-packages.yml/badge.svg)](https://github.com/conorheffron/ironoc/actions/workflows/npm-publish-github-packages.yml)
+
+- See project README.md [here](https://github.com/conorheffron/ironoc/blob/main/README.md)
+- See published GitHub package details [here](https://github.com/conorheffron/ironoc/pkgs/npm/ironoc-frontend)
+
+## Getting Started with React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@conorheffron/ironoc-frontend",
+  "version": "2.1.2",
+  "private": false,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "5.1",
+    "react": "^18.3.1",
+    "react-bootstrap": "^2.10.5",
+    "react-bootstrap-carousel": "^4.1.1",
+    "react-bootstrap-form": "^0.1.4-beta6",
+    "react-bootstrap-validation": "^0.1.11",
+    "react-cookie": "^7.2.2",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^5.3.0",
+    "react-scripts": "^5.0.1",
+    "reactstrap": "^8.10.0",
+    "web-vitals": "^4.2.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "CI=false && react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "web-vitals": "^4.2.3"
+  }
+}

package/public/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="Personal Portfolio for Conor Heffron"
+      content="Conor Heffron | Web Application Development | Software Engineering | Data Engineering | Cloud Deployments | DevOps"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/robot-logo.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>iRonoc React App | Portfolio | Software Engineer | Data Analytics
+      | Conor Heffron | Web Application Development | Software Engineering
+      | Data Engineering | Cloud Deployments | DevOps</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

package/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "robot-logo.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "robot-logo.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/src/App.css

@@ -0,0 +1,75 @@
+.App {
+    text-align: center;
+}
+
+.App-logo {
+    height: 70vmin;
+    pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .App-logo {
+        animation: App-logo-spin infinite 20s linear;
+    }
+}
+
+.App-header {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+    background-color: #1D428A;
+}
+
+.App-link {
+    color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.carousel-caption {
+	top: 0;
+	bottom: auto;
+}
+
+.App-intro {
+    content: "";
+    display: inline-block;
+}
+
+#my-intro {
+	padding-left: 15%;
+	padding-right: 15%;
+}
+
+.strava-badge {
+	display: inline-block;
+	background-color: #FC5200;
+	color: #fff;
+	padding: 5px 10px 5px 30px;
+	font-size: 11px;
+	font-family: Helvetica, Arial, sans-serif;
+	white-space: nowrap;
+	text-decoration: none;
+	background-repeat: no-repeat;
+	background-position: 10px center;
+	border-radius: 3px;
+	background-image: url('https://badges.strava.com/logo-strava-echelon.png')
+}
+
+.strava-badge-img {
+    margin-left: 2px;
+    vertical-align: text-bottom;
+    height: 13;
+    width: 51;
+}

package/src/App.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import './App.css';
+import Home from './components/Home';
+import NotFound from './components/NotFound';
+import About from './components/About';
+import RepoDetails from './components/RepoDetails';
+import RepoIssues from './components/RepoIssues';
+import ControlledCarousel from './components/ControlledCarousel';
+
+class App extends Component {
+  render() {
+    return (
+        <Router forceRefresh={true}>
+          <Switch>
+            <Route path='/' exact={true} component={Home}/>
+            <Route path='/about' exact={true} component={About}/>
+            <Route path='/portfolio' exact={true} component={ControlledCarousel}/>
+            <Route path='/projects' exact={true} component={RepoDetails}/>
+            <Route path='/projects/:id' component={RepoDetails}/>
+            <Route path='/issues/:id/:repo' component={RepoIssues}/>
+            <Route path="*" component={NotFound} />
+          </Switch>
+        </Router>
+    )
+  }
+}
+
+export default App;

package/src/App.test.js

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

package/src/AppNavbar.js

@@ -0,0 +1,61 @@
+import React from "react";
+import "bootstrap/dist/css/bootstrap.min.css";
+import {Navbar, NavbarText, Container, Collapse, NavbarBrand, Nav, UncontrolledDropdown, DropdownToggle, DropdownItem, DropdownMenu } from "reactstrap";
+import logo from './img/robot-logo.png';
+
+export default function AppNavBar() {
+  return (
+        <div>
+            <Navbar color="primary" light={false} dark={true} fixed="top" container={true} expand={true} className="nav-bar">
+                <Container>
+                    <NavbarBrand href="/">
+                        <img alt="" src={logo} width="30" height="30" className="d-inline-block align-top"/>
+                    </NavbarBrand>
+                    <Collapse navbar>
+                    <Nav className="me-auto" navbar>
+                        <UncontrolledDropdown inNavbar nav>
+                            <DropdownToggle caret nav>iRonoc</DropdownToggle>
+                            <DropdownMenu end>
+                                <DropdownItem href="/about">About</DropdownItem>
+                                <DropdownItem href="/portfolio">Portfolio</DropdownItem>
+                                <DropdownItem divider />
+                                <DropdownItem href="https://linktr.ee/conorheffron" target="_blank" rel="noreferrer">Link Tree</DropdownItem>
+                            </DropdownMenu>
+                        </UncontrolledDropdown>
+                        <UncontrolledDropdown inNavbar nav>
+                            <DropdownToggle caret nav>GitHub PM</DropdownToggle>
+                            <DropdownMenu end>
+                                <DropdownItem href="/projects/conorheffron">Projects</DropdownItem>
+                                <DropdownItem href="/issues/conorheffron/ironoc">Issues</DropdownItem>
+                            </DropdownMenu>
+                        </UncontrolledDropdown>
+                        <UncontrolledDropdown inNavbar nav>
+                            <DropdownToggle caret nav>GitHub API</DropdownToggle>
+                            <DropdownMenu end>
+                                <DropdownItem target="_blank" href="/swagger-ui-ironoc.html">Swagger Doc</DropdownItem>
+                                <DropdownItem divider />
+                                <DropdownItem target="_blank" href="/get-repo-detail?username=conorheffron">GET Projects</DropdownItem>
+                                <DropdownItem target="_blank" href="/get-repo-issue/conorheffron/ironoc/">GET Issues</DropdownItem>
+                            </DropdownMenu>
+                        </UncontrolledDropdown>
+                        <UncontrolledDropdown inNavbar nav>
+                            <DropdownToggle caret nav>GitHub Projects</DropdownToggle>
+                            <DropdownMenu end>
+                                <DropdownItem target="_blank" href="https://github.com/conorheffron/ironoc">iRonoc</DropdownItem>
+                                <DropdownItem divider />
+                                <DropdownItem target="_blank" href="https://github.com/conorheffron/ironoc-db">iRonoc-DB</DropdownItem>
+                                <DropdownItem target="_blank" href="https://github.com/conorheffron/booking-sys">Booking System Sample</DropdownItem>
+                                <DropdownItem target="_blank" href="https://github.com/conorheffron/nba-stats">NBA Stats Analysis</DropdownItem>
+                                <DropdownItem target="_blank" href="https://github.com/conorheffron/ironoc-pytest">PyTest / GitHub Client Package</DropdownItem>
+                            </DropdownMenu>
+                        </UncontrolledDropdown>
+                    </Nav>
+                    <a href="/">
+                        <NavbarText href="/">Home</NavbarText>
+                    </a>
+                    </Collapse>
+                </Container>
+            </Navbar>
+        </div>
+  );
+}

package/src/components/About.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { Container } from 'reactstrap';
+import '.././App.css';
+import AppNavbar from '.././AppNavbar';
+
+class About extends Component {
+
+  render() {
+    return (
+        <div className="App">
+            <AppNavbar/>
+            <Container>
+                <header className="App-header">
+                        <br /><br />
+                        <a href="https://www.linkedin.com/in/conorheffron" target="_blank" rel="noreferrer">
+                            <img src="https://static.licdn.com/scds/common/u/img/webpromo/btn_viewmy_160x33.png"
+                                width="160" height="33" border="0" alt="View Conor Heffron's profile on LinkedIn"></img>
+                        </a>
+                        <p id="my-intro"><br />Welcome, I'm Conor Heffron, a Software Engineer hailing from County Meath, Ireland.
+                        With over ten years of professional experience, I specialize in writing clean code and
+                        developing high-performance applications. As a passionate Full Stack Developer, I am constantly
+                        expanding my technical expertise across various tech stacks, languages, frameworks, and
+                        tools in the realm of Software, Data, and DevOps. Let's connect and explore exciting
+                        opportunities together! See above & beyond for contact details and further information.
+                        </p><br />
+                        <a class="strava-badge" href='https://strava.com/athletes/2582329' target="_clean">
+                          Follow me on
+                          <img class="strava-badge-img" src='https://badges.strava.com/logo-strava.png' alt='Strava' />
+                        </a>
+                </header>
+            </Container>
+        </div>
+    );
+  }
+}
+
+export default About;

package/src/components/ControlledCarousel.js

@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import Carousel from 'react-bootstrap/Carousel';
+import 'bootstrap/dist/css/bootstrap.css';
+import '.././App.css';
+import { Container } from 'reactstrap';
+import AppNavbar from '.././AppNavbar';
+import navy from '.././img/darkblue-bg.png';
+import teal from '.././img/teal-bg.png';
+import red from '.././img/red-bg.png';
+
+class ControlledCarousel extends Component {
+
+	render() {
+        return (
+            <div>
+                <AppNavbar/>
+                    <Container>
+                        <Carousel className="App-header">
+                            <Carousel.Item interval={500}>
+                                <a href="https://github.com/conorheffron/ironoc-db" target="_blank" rel="noreferrer">
+                                    <img className="d-block w-100" src={navy} alt="navy1"/>
+                                    <Carousel.Caption>
+                                        <h1><u>ironoc-db</u></h1>
+                                        <h2>Sample Data Manager Service with UI</h2>
+                                        <br /><br />
+                                        <h3>Tech Stack:</h3>
+                                        <h4>Java & Spring Boot, Thymeleaf Templating Engine, & MySQL.</h4>
+                                    </Carousel.Caption>
+                                </a>
+                            </Carousel.Item>
+                            <Carousel.Item interval={500}>
+                                <a href="https://github.com/conorheffron/booking-sys" target="_blank" rel="noreferrer">
+                                    <img className="d-block w-100" src={teal} alt="teal2" />
+                                    <Carousel.Caption>
+                                        <h1><u>booking-sys</u></h1>
+                                        <h2>Sample Reservations & Viewer System</h2>
+                                        <br /><br />
+                                        <h3>Tech Stack:</h3>
+                                        <h4>Python & Django Web App, JavaScript, SQLite3 or MySQL database.</h4>
+                                    </Carousel.Caption>
+                                </a>
+                            </Carousel.Item>
+                            <Carousel.Item interval={500}>
+                                <a href="https://github.com/cph33/nba-stats" target="_blank" rel="noreferrer">
+                                    <img className="d-block w-100" src={navy} alt="navy3" />
+                                    <Carousel.Caption>
+                                        <h1><u>nba-stats</u></h1>
+                                        <h2>NBA Analytics (Seasons 2015 - 2023): Player Statistics</h2>
+                                        <br /><br />
+                                        <h3>Tech Stack:</h3>
+                                        <h4>Jupyter Notebooks, Python, Pandas, & Requests / JSON API.</h4>
+                                    </Carousel.Caption>
+                                </a>
+                            </Carousel.Item>
+                            <Carousel.Item interval={500}>
+                                <a href="https://github.com/conorheffron/cbio-skin-canc" target="_blank" rel="noreferrer">
+                                    <img className="d-block w-100" src={red} alt="red4" />
+                                    <Carousel.Caption>
+                                        <h1><u>cbio-skin-canc</u></h1>
+                                        <h2>Skin Cancer Dataset Analysis</h2>
+                                        <br /><br />
+                                        <h3>Tech Stack:</h3>
+                                        <h4>R, dplyr, plotly, knitr, testthat, covr, GIT.</h4>
+                                    </Carousel.Caption>
+                                </a>
+                            </Carousel.Item>
+                            <Carousel.Item interval={500}>
+                                <a href="https://github.com/conorheffron/gene-expr" target="_blank" rel="noreferrer">
+                                    <img className="d-block w-100" src={navy} alt="navy5" />
+                                    <Carousel.Caption>
+                                        <h1><u>gene-expr</u></h1>
+                                        <h2>Breast Cancer Dataset Analysis</h2>
+                                        <br /><br />
+                                        <h3>Tech Stack:</h3>
+                                        <h4>R, ggplot2, dplyr, deseq2-analysis, & R markdown.</h4>
+                                    </Carousel.Caption>
+                                </a>
+                            </Carousel.Item>
+                            <Carousel.Item interval={500}>
+                                <a href="https://github.com/conorheffron/bio-cell-red-edge" target="_blank" rel="noreferrer">
+                                    <img className="d-block w-100" src={red} alt="red6" />
+                                    <Carousel.Caption>
+                                        <h1><u>bio-cell-red-edge</u></h1>
+                                        <h2>Edge Detection of Biological Cell (Image Processing Script)</h2>
+                                        <br /><br />
+                                        <h3>Tech Stack:</h3>
+                                        <h4>Python, sci-kit-image, matplotlib.pyplot, & scipy.ndimage.</h4>
+                                    </Carousel.Caption>
+                                </a>
+                            </Carousel.Item>
+                            <Carousel.Item interval={500}>
+                                <a href="https://github.com/conorheffron/global-max-sim-matrix" target="_blank" rel="noreferrer">
+                                    <img className="d-block w-100" src={teal} alt="teal7" />
+                                    <Carousel.Caption>
+                                        <h1><u>global-max-sim-matrix</u></h1>
+                                        <h2>Compute Global Maximum Similarity Matrix</h2>
+                                        <br /><br />
+                                        <h3>Tech Stack:</h3>
+                                        <h4>R Package, testthat, stringr, & devtools.
+                                        </h4>
+                                    </Carousel.Caption>
+                                </a>
+                            </Carousel.Item>
+                        </Carousel>
+                    </Container>
+            </div>
+        );
+    }
+}
+
+export default ControlledCarousel;

package/src/components/Home.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import { Container } from 'reactstrap';
+import '.././App.css';
+import AppNavbar from '.././AppNavbar';
+import logo from '.././img/robot-logo.png';
+
+class Home extends Component {
+
+    render() {
+        return (
+            <div className="App">
+              <AppNavbar/>
+              <Container>
+                  <header className="App-header">
+                    <a href="/"><img src={logo} className="App-logo" alt="iRonoc"/></a>
+                    <p id="my-intro">Web Application Development | Software & Data Engineering | DevOps</p>
+                  </header>
+              </Container>
+            </div>
+        );
+    }
+}
+
+export default Home;

package/src/components/NotFound.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { Container } from 'reactstrap';
+import '.././App.css';
+import AppNavbar from '.././AppNavbar';
+
+class NotFound extends Component {
+
+    render() {
+        return (
+            <div className="App">
+              <AppNavbar/>
+              <Container>
+                  <header className="App-header">
+                    <h1>404 - Page Not Found</h1>
+                    <p id="my-intro">Sorry, the page you are looking for could not be found.</p>
+                  </header>
+              </Container>
+            </div>
+        );
+    }
+}
+
+export default NotFound;

package/src/components/RepoDetails.js

@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import { Button, ButtonGroup, Container, InputGroup, Table } from 'reactstrap';
+import '.././App.css';
+import Form from 'react-bootstrap/Form';
+import AppNavbar from '.././AppNavbar';
+import { Link } from 'react-router-dom';
+
+class RepoDetails extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {repoDetailList: [], isLoading: true, value: ''};
+
+        this.handleChange = this.handleChange.bind(this);
+        this.onSubmit = this.onSubmit.bind(this);
+    }
+
+    handleChange(event) {
+        const {repos, isL, value} = this.state;
+        this.setState({repoDetailList: repos, isLoading: isL, value: event.target.value});
+    }
+
+    onSubmit(event){
+        let id = this.state.value;
+        this.props.history.push(`/projects/${id}`, {
+          id: id
+        });
+    }
+
+    async componentDidMount() {
+        const response = await fetch(`/get-repo-detail?username=${this.props.match.params.id}`);
+        const body = await response.json();
+        console.log(body);
+        this.setState({repoDetailList: body, isLoading: false});
+    }
+
+    render() {
+        const {repoDetailList, isLoading} = this.state;
+
+        if (isLoading) {
+            return <p>Loading...</p>;
+        }
+
+        let gitUser = this.props.match.params.id;
+        const repoList = repoDetailList.map(repo => {
+            return <tr key={repo.name}>
+                <td className="table-info"><a href={repo.repoUrl} target="_blank" rel="noreferrer">{repo.fullName}</a></td>
+                <td>{repo.description}</td>
+                <td className="table-info"><a href={repo.appHome} target="_blank" rel="noreferrer">{repo.name}</a></td>
+                <td>{repo.topics}</td>
+                <td>
+                    <ButtonGroup>
+                        <Button size="sm" color="secondary" tag={Link} to={"/issues/" + gitUser + "/" + repo.name}>List Issues</Button>
+                    </ButtonGroup>
+                </td>
+            </tr>
+        });
+
+        return (
+                <div>
+                    <AppNavbar/><br /><br />
+                    <Container fluid>
+                        <br />
+                        <InputGroup className="mb-3">
+                            <Form.Control placeholder="Enter GitHub User ID... Example: conorheffron" aria-label="Enter GitHub User ID..."
+                                aria-describedby="basic-addon2" value={this.state.value}
+                                    onChange={e => this.setState({ value: e.target.value })} type="text"/>
+                            <Button color="primary" variant="outline-secondary" id="button-addon2"
+                                onClick={this.onSubmit}>Search Projects</Button>
+                        </InputGroup>
+                        <h3>GitHub Projects for username: <b>{this.props.match.params.id}</b></h3>
+                        <Table striped hover bordered>
+                            <thead>
+                                <tr className="table-primary">
+                                    <th width="10%">Repository</th>
+                                    <th width="50%">Description</th>
+                                    <th width="10%">App URL</th>
+                                    <th width="15%">Topics</th>
+                                    <th width="5%">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>{repoList}</tbody>
+                        </Table>
+                    </Container>
+                </div>
+            );
+    }
+}
+
+export default RepoDetails;

package/src/components/RepoIssues.js

@@ -0,0 +1,83 @@
+import React, { Component } from 'react';
+import { Button, Container, InputGroup, Table } from 'reactstrap';
+import '.././App.css';
+import Form from 'react-bootstrap/Form';
+import AppNavbar from '.././AppNavbar';
+
+class RepoIssues extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {repoIssueList: [], isLoading: true, value: ''};
+
+        this.handleChange = this.handleChange.bind(this);
+        this.onSubmit = this.onSubmit.bind(this);
+    }
+
+    handleChange(event) {
+        const {issues, isL, value} = this.state;
+        this.setState({repoIssueList: issues, isLoading: isL, value: event.target.value});
+    }
+
+    onSubmit(event){
+        let repo = this.state.value;
+        let id = this.props.match.params.id;
+        this.props.history.push(`/issues/${id}/${repo}`, {
+          id: id,
+          repo: repo
+        });
+    }
+
+    async componentDidMount() {
+        const response = await fetch(`/get-repo-issue/${this.props.match.params.id}/${this.props.match.params.repo}/`);
+        const body = await response.json();
+        console.log(body)
+        this.setState({repoIssueList: body, isLoading: false});
+    }
+
+    render() {
+        const {repoIssueList, isLoading} = this.state;
+        if (isLoading) {
+            return <p>Loading...</p>;
+        }
+        const repoList = repoIssueList.map(issue => {
+            let username = this.props.match.params.id
+            let repository = this.props.match.params.repo
+            const issueLink = `https://github.com/${username}/${repository}/issues/${issue.number}/`;
+            return <tr key={issue.number}>
+                <td className="table-info"><a href={issueLink} target="_blank" rel="noreferrer"><b><i>{issue.number}</i></b></a></td>
+                <td><b>{issue.title}</b></td>
+                <td>{issue.body}</td>
+            </tr>
+        });
+        const projectLink = `/projects/${this.props.match.params.id}/`;
+        return (
+                <div>
+                    <AppNavbar/><br /><br />
+                    <Container fluid>
+                        <br />
+                        <InputGroup className="mb-3">
+                            <Form.Control placeholder="Enter Project Name... Example: ironoc-db" aria-label="Enter Project Name..."
+                                aria-describedby="basic-addon2" type="text" value={this.state.value}
+                                onChange={e => this.setState({ value: e.target.value })} />
+                            <Button color="primary" variant="outline-secondary" id="button-addon2"
+                                onClick={this.onSubmit}>Search Issues</Button>
+                        </InputGroup>
+                        <h3>Issues for project <b>{this.props.match.params.repo}</b> and account <a href={projectLink}><b>{this.props.match.params.id}</b></a></h3>
+                        <Table striped hover bordered>
+                            <thead>
+                                <tr className="table-secondary">
+                                    <th width="3%">Issue No.</th>
+                                    <th width="27%">Title</th>
+                                    <th width="70%">Description</th>
+                                </tr>
+                            </thead>
+                            <tbody>{repoList}</tbody>
+                        </Table>
+                    </Container>
+                </div>
+            );
+    }
+}
+
+export default RepoIssues;

package/src/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;
+}

package/src/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import reportWebVitals from './reportWebVitals';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+reportWebVitals();

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

package/src/setupTests.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';