├── .DS_Store ├── .babelrc ├── .ebextensions └── alb-http-to-https-redirection.config ├── .eslintrc.json ├── .gitignore ├── Dockerfile ├── LICENSE ├── README.md ├── buildspec.yml ├── components ├── App.jsx ├── mainPage │ ├── Bio.jsx │ ├── CodeBlockCopy.jsx │ ├── DeveloperBios.jsx │ ├── Footer.jsx │ ├── Header.jsx │ ├── HomePage.jsx │ ├── Intro.jsx │ ├── LinkToManifest.jsx │ └── NavBar.jsx └── visualizer │ ├── ConfigVis.jsx │ ├── EndpointInput.jsx │ ├── Instructions.jsx │ ├── Operations.jsx │ ├── Tabs.jsx │ ├── TabsPane.jsx │ └── Visualizer.jsx ├── index.html ├── package-lock.json ├── package.json ├── public ├── Diagram.png ├── Logo.png ├── LogoWord.png ├── highlight.css ├── index.js ├── monarq32.ico └── readMeImages │ ├── ManifestBuilderPart1.png │ ├── ManifestBuilderPart2.png │ ├── ManifestBuilderPart3.png │ ├── ManifestBuilderPart4.png │ ├── ManifestBuilderPart5.png │ └── ManifestBuilderPart6.png ├── server └── server.js ├── theme.js └── webpack.config.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/MONARQ_home/bde43bae9bb587449e51981ef7e984e063f78e43/.DS_Store -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"], 3 | "plugins": ["@babel/plugin-transform-runtime"], 4 | } 5 | -------------------------------------------------------------------------------- /.ebextensions/alb-http-to-https-redirection.config: -------------------------------------------------------------------------------- 1 | ################################################################################################### 2 | #### Copyright 2016 Amazon.com, Inc. or its affiliates. All Rights Reserved. 3 | #### 4 | #### Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file 5 | #### except in compliance with the License. A copy of the License is located at 6 | #### 7 | #### http://aws.amazon.com/apache2.0/ 8 | #### 9 | #### or in the "license" file accompanying this file. This file is distributed on an "AS IS" 10 | #### BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the 11 | #### License for the specific language governing permissions and limitations under the License. 12 | ################################################################################################### 13 | 14 | ################################################################################################### 15 | #### This configuration file modifies the default port 80 listener attached to an Application Load Balancer 16 | #### to automatically redirect incoming connections on HTTP to HTTPS. 17 | #### This will not work with an environment using the load balancer type Classic or Network. 18 | #### A prerequisite is that the 443 listener has already been created. 19 | #### Please use the below link for more information about creating an Application Load Balancer on 20 | #### the Elastic Beanstalk console. 21 | #### https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/environments-cfg-alb.html#environments-cfg-alb-console 22 | ################################################################################################### 23 | 24 | Resources: 25 | AWSEBV2LoadBalancerListener: 26 | Type: AWS::ElasticLoadBalancingV2::Listener 27 | Properties: 28 | LoadBalancerArn: 29 | Ref: AWSEBV2LoadBalancer 30 | Port: 80 31 | Protocol: HTTP 32 | DefaultActions: 33 | - Type: redirect 34 | RedirectConfig: 35 | Host: "#{host}" 36 | Path: "/#{path}" 37 | Port: "443" 38 | Protocol: "HTTPS" 39 | Query: "#{query}" 40 | StatusCode: "HTTP_301" 41 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "extends": [ 7 | "plugin:react/recommended", 8 | "airbnb", 9 | "plugin:prettier/recommended" 10 | ], 11 | "parserOptions": { 12 | "ecmaFeatures": { 13 | "jsx": true 14 | }, 15 | "ecmaVersion": 12, 16 | "sourceType": "module" 17 | }, 18 | "plugins": [ 19 | "react" 20 | ], 21 | "rules": { 22 | "react/jsx-filename-extension": [1, { 23 | "extensions": [".js", ".jsx"]} 24 | ]} 25 | } 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:14.16 2 | WORKDIR /usr/src/app 3 | COPY . /usr/src/app 4 | RUN npm install 5 | RUN npm run build 6 | EXPOSE 3000 7 | CMD ["node", "./server/server.js"] 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 OSLabs Beta 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MONARQ Companion Application 2 | 3 | **MONARQ** is a lightweight NPM Package which expands your Express/GraphQL server to accept REST requests. This application contains a user friendly GUI to easily create the required Manifest Object. Due to the specification, here the user can take the guess work out of creating their own Manifest Obejct. Simply use the input fields, add to the accompanying object, then copy and paste the completed Manifest Object into your application. 4 | 5 | Visit our website [MONARQ.io](http://monarq.io/) to see the application code in action, create the Manifest Object, and learn more about the NPM Package. 6 | 7 | Visit [MONARQ](https://github.com/oslabs-beta/MONARQ)'s GitHub or [MONARQ](https://www.npmjs.com/package/monarq)'s NPM page for further information on **MONARQ**. 8 | 9 | # How To Use 10 | 11 | ## _Step 1:_ 12 | Navigate to the Manifest Builder within [MONARQ.io](http://monarq.io/). Then press 'Get Started'. 13 | 14 | 15 | 16 | 17 | ## _Step 2:_ 18 | Simply add your GraphQL URL to the first input box. This will allow for the application to access your schema which is integral to creating the Manifest Object. 19 | 20 | 21 | 22 | 23 | ## _Step 3:_ 24 | Once your schema has loaded, declare the REST endpoints and the REST request method that will be open to the client. Select the query or mutation that will be run within these designated endpoints. 25 | 26 | 27 | 28 | 29 | Then click "Add to Manifest" 30 | 31 | 32 | 33 | 34 | ## _Step: 4_ 35 | Now your Manifest Object is populated with your inputs! Keep adding endpoints and/or methods that you want to open to the client sending REST Requests. 36 | 37 | 38 | 39 | 40 | ## _Step: 5_ 41 | Once you have populated the Manifest Object with the desired endpoints and methods, copy and paste the code into a file within your application. 42 | 43 | 44 | 45 | 46 | ## _Step 6:_ 47 | Import the Manifest Object into your top level server file and invoke the functions within [MONARQ](https://www.npmjs.com/package/monarq)'s NPM package. Pass in this created Manifest Object into both functions based on the instructions. Now you will not run the risk of having a Manifest Object that is incorrect. 48 | 49 | # Contributors 50 | 51 | [Peter Baniuszewicz](https://www.linkedin.com/in/peterbaniuszewicz/) [@Peter-Ba](https://github.com/Peter-Ba) 52 | 53 | [Amy Chen](https://www.linkedin.com/in/amyechen) [@designal46](https://github.com/designal46) 54 | 55 | [Tyler Kneidl](https://www.linkedin.com/in/tylerkneidl/) [@tylerkneidl](https://github.com/tylerkneidl) 56 | 57 | [Helen Regula](https://www.linkedin.com/in/helen-regula/) [@helenregula](https://github.com/helenregula) 58 | -------------------------------------------------------------------------------- /buildspec.yml: -------------------------------------------------------------------------------- 1 | version: 0.2 2 | 3 | phases: 4 | pre_build: 5 | commands: 6 | - echo Logging in to Amazon ECR... 7 | - aws ecr get-login-password --region $AWS_DEFAULT_REGION 8 | build: 9 | commands: 10 | - echo Build started on `date` 11 | - echo Building the Docker image... 12 | - docker login -u $dockerhub_username -p $dockerhub_password 13 | - docker build -t $IMAGE_REPO_NAME:latest . 14 | - docker tag $IMAGE_REPO_NAME:latest $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com/$IMAGE_REPO_NAME:latest 15 | post_build: 16 | commands: 17 | - echo Build completed on `date` 18 | - echo Pushing the Docker image... 19 | - docker push $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com/$IMAGE_REPO_NAME:latest 20 | -------------------------------------------------------------------------------- /components/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { BrowserRouter, Switch, Route } from "react-router-dom"; 3 | import { ChakraProvider, Grid, GridItem } from "@chakra-ui/react"; 4 | import Header from "./mainPage/Header"; 5 | import Footer from "./mainPage/Footer"; 6 | import HomePage from "./mainPage/HomePage"; 7 | import Visualizer from "./visualizer/Visualizer"; 8 | import theme from "../theme"; 9 | 10 | const App = () => { 11 | const [isLoaded, setIsLoaded] = useState(); 12 | 13 | return ( 14 | 15 | 16 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 45 |