{"id":19200997,"url":"https://github.com/dabit3/pixel-me","last_synced_at":"2025-11-17T15:17:48.970Z","repository":{"id":50833790,"uuid":"258639087","full_name":"dabit3/pixel-me","owner":"dabit3","description":"Create and collaborate on Pixel Art","archived":false,"fork":false,"pushed_at":"2021-05-28T16:41:01.000Z","size":61565,"stargazers_count":24,"open_issues_count":13,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-05T22:54:17.702Z","etag":null,"topics":["aws","aws-amplify","graphql","javascript","pixel-art","serverless"],"latest_commit_sha":null,"homepage":"https://www.pixelme.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dabit3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-24T22:35:42.000Z","updated_at":"2024-05-30T13:15:48.000Z","dependencies_parsed_at":"2022-08-26T10:00:22.990Z","dependency_job_id":null,"html_url":"https://github.com/dabit3/pixel-me","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Fpixel-me","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Fpixel-me/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Fpixel-me/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Fpixel-me/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dabit3","download_url":"https://codeload.github.com/dabit3/pixel-me/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253741271,"owners_count":21956779,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws","aws-amplify","graphql","javascript","pixel-art","serverless"],"created_at":"2024-11-09T12:35:50.888Z","updated_at":"2025-11-17T15:17:43.935Z","avatar_url":"https://github.com/dabit3.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pixel me\n\nThis 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/).\n\nWith 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__.\n\n![](demo.gif)\n\n## This project is built with GraphQL and the [GraphQL Transform](https://docs.amplify.aws/cli/graphql-transformer/overview) library.\n\nThere are a few main parts to this back end, but everything starts with the base GraphQL schema:\n\n```graphql\ntype Drawing @model\n@auth(rules: [{allow: public, operations: [create, read, update]}])\n@key(name: \"byItemType\", fields: [\"itemType\", \"createdAt\"], queryField: \"itemsByType\") {\n  id: ID!\n  clientId: ID!\n  name: String!\n  data: String\n  public: Boolean\n  itemType: String\n  createdAt: String\n  locked: Boolean\n}\n\ntype Subscription {\n  onUpdateByID(id: ID!): Drawing\n    @aws_subscribe(mutations: [\"updateDrawing\"])\n}\n```\n\nYou can see there are a couple of things going on her here with directives and a custom subscription:\n\n- The `@model` directive will build out the DynamoDB table for the drawings\n- The `@auth` directive allows the creation and editing of types, but restricts the deletion of them\n- 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.\n- The custom subscription of `onUpdateByID` allows us to create a subscription for individual drawings by `id`\n\n## Deploy this app in your account\n\n### Using the Amplify CLI\n\n1. Clone the project and install the dependencies\n\n```sh\n$ git clone https://github.com/dabit3/pixel-me.git\n$ cd pixel-me\n$ npm install\n```\n\n2. Initialize the Amplify app\n\n```sh\n$ amplify init\n```\n\n3. Deploy the back end\n\n```sh\n$ amplify push\n```\n\n4. Test locally\n\n```sh\n$ npm start\n```\n\nTo run a build, run the `build command`\n\n```sh\n$ npm run build\n```\n\n### Using the Amplify Console\n\n[![amplifybutton](https://oneclick.amplifyapp.com/button.svg)](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/dabit3/pixel-me)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabit3%2Fpixel-me","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdabit3%2Fpixel-me","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabit3%2Fpixel-me/lists"}