oslabs-beta/ProtoCAD

Stars
146
Rank 252,769 (Top 5 %)
Language
TypeScript
License
MIT License
Created about 5 years ago
Updated over 1 year ago

oslabs-beta/ProtoCAD

oslabs-beta

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

ProtoCAD is a prototyping tool that allows developers to build UI component tree structure based on GraphQL query results.

ProtoCAD

ProtoCAD is a prototyping tool that empowers developers to build and visualize their component as GraphQL schemas and queries.

Getting Started:

Run Electron and Webpack in Development Mode

npm run dev

Run tests

npm run test

How to Use:

When the application starts, select the File tab from the menu and open a project of your choice. You would the find your all project files in the Project tab. To build components, click on Tools.
You can now see the components you built in a tree structure. Go ahead and add props to the components. The structure can be populated with several child nodes.

Let's convert the components to GraphQL Schema by clicking Convert to Schema Button. You can now see the components in SDL(Schema Definition Language).

Write GraphQL resolver and save it by clicking on the Send Resolver Button.

You could also write queries to request GraphQL server for data. Returned data is displayed under the GraphQL icon.

Contributing

ProtoCAD is currently in beta release. We encourage you to submit issues for any bugs or ideas for enhancements. Also feel free to fork this repo and submit pull requests to contribute as well.

LICENSE

Contributors

Jason Lee | @jasonlee1245
Kassandra Meyer | @kassanj
Benjamin Morrison | @newbenhd
Eric Natividad | @EricNatividad
Suramya Sekhri | @suramyasekhri

sapling

Sapling - A convenient way to traverse your React app in VS Code

Kafka-Sprout

🚀 Web GUI for Kafka Cluster Management

GraphQuill

Real-time GraphQL API Exploration in VS Code

protographql

ProtoGraphQL is a prototyping tool that empowers developers to build and visualize GraphQL schemas and queries without writing any code.

seeql

see your database in a new way

Realize

A React component tree visualizer

Allok8

⚡️A pretty swell Kubernetes visualization tool

ReactRTC

NPM package that simplifies set-up of WebRTC as importable React components

svend3r

Interactive plug and play charting library for Svelte

aether

All-in-One Memory Leak Testing Solution

Yodelay

Your preferred gRPC endpoint testing tool. Making sure your outbound 🗣️ ‘yodelay’ returns the ‘IiiOoo’ 📣 that you expect

ReactRPC

Full feature integration library for gRPC-Web into React

atomos

Atomos is an open source dev tool for Recoil that provides real-time visualization of the component tree and atom-selector relationships to facilitate debugging of a React application.

Dockter

A low-overhead, open-source Docker log management tool

svelte-sight

A Svelte dev tool for visualizing component hierarchy, state, and props of your application

KUR8

A visual overview of Kubernetes architecture and Prometheus metrics

OpticQL

Developer tool focused on streamlining the performance testing and optimization of GraphQL API

connext-js

A middleware and route handling solution for Next.js.

hypnos

The best way to test GraphQL calls to RESTful APIs.

Equa11y

A stream-lined command line tool for developers to easily run accessibility testing locally through axe-core and puppeteer.

preducks

React/Redux/Typescript Application Prototyping & Smart Boilerplate Generation Tool

drawql

an OSS tool for designing a graphql endpoint in Apollo

kubermetrics

TotalRecoilJS

TotalRecoilJS is a tool created to help developers visualize/debug and track their Recoil state via a Chrome extension.

Horus

🎯 A gRPC-Node Distributed Tracing and Monitoring Tool.

PostQL

Web app to visualize your GraphQL metrics and provide historical analytics

Ahoy

Ahoy! is a GUI tool for DevOps engineers which distills the many functions of Helm into a user-friendly interface.

battletest

A CLI module for npm that auto-generates tests based on user specified parameters.

Deno-Redlock

Deno's first lightweight, secure distributed lock manager utilizing the Redlock algorithm

ReactMonitor

Quickly visualize React's component tree and its performance

Osiris

An Electron based desktop application for generating components, building pages, and storing them in a UI library.

protostar-relay

Open-source iteration of the official Relay devtool.

TorchQL

A tool to quickly generate GraphQL schemas and resolvers from a relational database

trydent

genesisQL

rapid schema-prototyping tool for GraphQL applications

FilamentQL

GraphQL query and caching solution

GatsbyHub

Access everything Gatsby has to offer without ever leaving Visual Studio Code. This VSCode Extension allows you to generate a new Gatsby site using a starter, browse Gatsby plugins, and develop a server all with a click of a button.

aditum

Accessibility components for managing focus in React SPAs

watchmo

react-chronoscope

Developer tool to monitor React performance

navigate

A Kubernetes cluster visualizer for DevOps engineers - network policies, aggregated scheduler logs, deployments and pods before your cluster is running!

TrunQ

NPM package for easy client and/or server side graphQL caching.

onyx

Onyx is authentication middleware for Deno, inspired by Passport.js

BACE

MASH

Kafka visualizer and management suite

portara

Portara directive is a rate limiter / throttler for GraphQL

irisql

GraphQL prototyping tool to quickly mock-up Node API's and visualize where you can query from.

Interspect

An API mocking tool for testing data interoperability between microservices and secure HTTP endpoints

SMEE

ChaosQoaLa

Chaos Engineering meets GraphQL

VaaS

Modular Kubernetes Management System with OpenFaaS Support

tropicRPC

A VS Code extension that provides gRPC API endpoint testing.

dashport

Local and OAuth authentication middleware for Deno

anagraphql

Trinity

A VSCode extension for Cypher and Neo4j

DockerLocal

DockerLocal is a GUI application that allows you to keep an up-to-date version of the docker compose file for interconnected repositories while doing development work on a single repository.

giraffeQL

🦒 Developer tool to visualize relational databases and export schemas for GraphQL API's.

Trace

A lightweight GraphQL query performance monitoring GUI with real-time, resolver-level performance tracing metrics and error logging.

StratosDB

☄️ ☁️ An All-in-One GUI for Cloud SQL that can help users design and test their AWS RDS Instances

snAppy

snAppy is a VS Code extension coupled with an interactive view to support your React front-end delivery.

synapse

Realtime API Library

SpectiQL

GraphQL query, mutation, subscription test generator

starfleet

Command line tool to generate GraphQL services from Mongoose schemas with full CRUD functionality and deploy them to the cloud

pelican

Automated GUI canary testing for your kubernetes clusters

ProtoNative

A React Native prototyping tool for developers.

reactFLO

A Chrome DevTool built for developers to visualize the flow of state throughout their application.

ReactionTime

ReactionTime provides a simpler way to write tests for React's Experimental Concurrent Mode.

DacheQL

GraphQL caching tool

KuberOptic

An Electron app for developers to visualize their Kubernetes clusters in real-time

sono.land

Real-time Communication Library for Deno (WebSockets & WebRTC)

KubeScrape

KubeScrape: An open-source dev tool that provides an intuitive way to view the health, structure, and live metrics of your Kubernetes cluster

LucidQL

A developer tool and visualizer that generates a GraphQL schema from an established relational database.

Hookd

A cli tool and visualizer for converting React class components to functional components with hooks.

kr8s

Docker/Kubernetes Visualization Tool

Svelcro

Svelte DevTool with a focus on rendering

KnightOwl

An npm package of GraphQL middleware to protect you from malicious queries.

Palaemon

Palaemon is an open-source developer tool for monitoring health and resource metrics of Kubernetes clusters and analyzing Out of Memory (OOMKill) errors

SvelTable

Feature rich data table component.

Ekkremis

A periscopic view into pending Kubernetes pods

kQ

fflow

fflow is an easy-to-use open-source tool for all developers to create their React application.

KlusterView

Get instant insights on your Kubernetes clusters with our lightweight, plug-and-play performance monitoring tool

Aqls-server

An intelligent full-stack GraphQL subscription and analytics module. Server-side analytics processing, self-auditing router, and resolver plugins.

kondo

periqles

React form library for Relay and Apollo

ThermaKube

A web application that monitors the health and performance of Kubernetes clusters with support for AWS EKS deployments

arteMetrics

Creating performance monitors for Apollo implementations of graphQL.

QLens

QLens is an electron app which dynamically generates GraphQL Schemas and Mongo Schema visualization. QLens significantly cuts development time by automating the formation of their GraphQL schemas based on information fetched from their non-relational database.

firecomm

A complete framework for gRPC-node.

Kafkasocks

ReaPer

Dev tool to analyze the performance of user interface and single-page applications based on the React frontend library

dangoDB

A MongoDB ODM for Deno

AtomicKafka

Bedrock

A modular authentication library for Deno.

Docklight

Metrics for your Docker containers

Neptune

A light-weight, simple, and straightforward learning tool for your Kubernetes cluster

ArtemisQL

ArtemisQL is a GraphQL migration tool and database visualizer that empowers developers to build and implement GraphQL with ease.

shipm8

ReacTree

ReacTree - VS Code extension that generates a hierarchy tree of React components with each node listing the passed down props, indicating whether it's connected the Redux store, and guiding you to the associated file with the click of a button

reactron

Reactron is a React component visualizer that allows you to traverse an app's fiber tree and render components individually.