Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dabit3/pixel-me
Create and collaborate on Pixel Art
https://github.com/dabit3/pixel-me
aws aws-amplify graphql javascript pixel-art serverless
Last synced: 6 days ago
JSON representation
Create and collaborate on Pixel Art
- Host: GitHub
- URL: https://github.com/dabit3/pixel-me
- Owner: dabit3
- License: mit
- Created: 2020-04-24T22:35:42.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-05-28T16:41:01.000Z (over 3 years ago)
- Last Synced: 2023-08-03T20:13:04.022Z (over 1 year ago)
- Topics: aws, aws-amplify, graphql, javascript, pixel-art, serverless
- Language: JavaScript
- Homepage: https://www.pixelme.dev
- Size: 58.7 MB
- Stars: 22
- Watchers: 2
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Pixel me
This project is based on the wonderful [Pixel art in React](https://github.com/jvalen/pixel-art-react) project by [Javier Valencia](https://github.com/jvalen/pixel-art-react) and [AWS Amplify](https://docs.amplify.aws/).
With Pixel me, you can create, share, and collaborate on pixel art projects in real-time. You can then export the drawing or animation in either __CSS__, __png__, __GIF__, or __spritesheet__.
## This project is built with GraphQL and the [GraphQL Transform](https://docs.amplify.aws/cli/graphql-transformer/overview) library.
There are a few main parts to this back end, but everything starts with the base GraphQL schema:
```graphql
type Drawing @model
@auth(rules: [{allow: public, operations: [create, read, update]}])
@key(name: "byItemType", fields: ["itemType", "createdAt"], queryField: "itemsByType") {
id: ID!
clientId: ID!
name: String!
data: String
public: Boolean
itemType: String
createdAt: String
locked: Boolean
}
type Subscription {
onUpdateByID(id: ID!): Drawing
@aws_subscribe(mutations: ["updateDrawing"])
}
```
You can see there are a couple of things going on her here with directives and a custom subscription:
- The `@model` directive will build out the DynamoDB table for the drawings
- The `@auth` directive allows the creation and editing of types, but restricts the deletion of them
- The `@key` directive gives us an easy way to run DynamoDB queries on the `itemType` field. This makes it easy to set custom access patterns on the `itemType` field. For instance, in the main view, we only query for `Public` drawings, but could also set this to anything that we'd like for additional data access patterns.
- The custom subscription of `onUpdateByID` allows us to create a subscription for individual drawings by `id`
## Deploy this app in your account
### Using the Amplify CLI
1. Clone the project and install the dependencies
```sh
$ git clone https://github.com/dabit3/pixel-me.git
$ cd pixel-me
$ npm install
```
2. Initialize the Amplify app
```sh
$ amplify init
```
3. Deploy the back end
```sh
$ amplify push
```
4. Test locally
```sh
$ npm start
```
To run a build, run the `build command`
```sh
$ npm run build
```
### Using the Amplify Console
[](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/dabit3/pixel-me)