Upload

README.md

@@ -1,13 +1,41 @@
-## My Project
+# Real-time collaborative drawing canvas with GraphQL & AWS AppSync
 
-TODO: Fill this README out!
+![](graphqlgif1.gif)
 
-Be sure to:
+Schema:
 
-* Change the title in this README
-* Edit your repository description on GitHub
+```graphql
+type Canvas @model {
+  id: ID!
+  clientId: String!
+  data: String!
+}
+```
 
-## License
+## To deploy this application
 
-This library is licensed under the MIT-0 License. See the LICENSE file.
+> To deploy this application, you must have the latest version of the Amplify CLI installed & configured. To learn how to do this, check out the documentation [here](https://aws-amplify.github.io/).
 
+1. Clone the repo & change into the directory
+
+```sh
+git clone https://github.com/dabit3/appsync-graphql-real-time-canvas.git
+
+cd appsync-graphql-real-time-canvas
+```
+
+2. Deploy the GraphQL API
+
+```sh
+amplify init
+amplify push
+```
+
+3. Run the app
+```sh
+npm start
+```
+
+### License
+
+This library is licensed under the MIT-0 License. See the LICENSE file.

amplify/.config/project-config.json

@@ -0,0 +1,17 @@
+{
+    "projectName": "react-draw",
+    "version": "2.0",
+    "frontend": "javascript",
+    "javascript": {
+        "framework": "react",
+        "config": {
+            "SourceDir": "src",
+            "DistributionDir": "build",
+            "BuildCommand": "npm run-script build",
+            "StartCommand": "npm run-script start"
+        }
+    },
+    "providers": [
+        "awscloudformation"
+    ]
+}

amplify/backend/api/reactdraw/parameters.json

@@ -0,0 +1,4 @@
+{
+    "AppSyncApiName": "reactdraw",
+    "DynamoDBBillingMode": "PAY_PER_REQUEST"
+}

amplify/backend/api/reactdraw/schema.graphql

@@ -0,0 +1,5 @@
+type Canvas @model {
+  id: ID!
+  clientId: String!
+  data: String!
+}

amplify/backend/api/reactdraw/stacks/CustomResources.json

@@ -0,0 +1,61 @@
+{
+	"AWSTemplateFormatVersion": "2010-09-09",
+	"Description": "An auto-generated nested stack.",
+	"Metadata": {},
+	"Parameters": {
+		"AppSyncApiId": {
+			"Type": "String",
+			"Description": "The id of the AppSync API associated with this project."
+		},
+		"AppSyncApiName": {
+			"Type": "String",
+			"Description": "The name of the AppSync API",
+			"Default": "AppSyncSimpleTransform"
+		},
+		"env": {
+			"Type": "String",
+			"Description": "The environment name. e.g. Dev, Test, or Production",
+			"Default": "NONE"
+		},
+		"S3DeploymentBucket": {
+			"Type": "String",
+			"Description": "The S3 bucket containing all deployment assets for the project."
+		},
+		"S3DeploymentRootKey": {
+			"Type": "String",
+			"Description": "An S3 key relative to the S3DeploymentBucket that points to the root\nof the deployment directory."
+		}
+	},
+	"Resources": {
+		"EmptyResource": {
+			"Type": "Custom::EmptyResource",
+			"Condition": "AlwaysFalse"
+		}
+	},
+	"Conditions": {
+		"HasEnvironmentParameter": {
+			"Fn::Not": [
+				{
+					"Fn::Equals": [
+						{
+							"Ref": "env"
+						},
+						"NONE"
+					]
+				}
+			]
+		},
+		"AlwaysFalse": {
+			"Fn::Equals": [
+				"true",
+				"false"
+			]
+		}
+	},
+	"Outputs": {
+		"EmptyOutput": {
+			"Description": "An empty output. You may delete this if you have at least one resource above.",
+			"Value": ""
+		}
+	}
+}

amplify/backend/backend-config.json

@@ -0,0 +1,11 @@
+{
+	"api": {
+		"reactdraw": {
+			"service": "AppSync",
+			"providerPlugin": "awscloudformation",
+			"output": {
+				"securityType": "API_KEY"
+			}
+		}
+	}
+}