A prompt based card editor built completely in React, for SendOutCards

Usage no npm install needed!

<script type="module">
  import socFrontend from '';



Typescript React App

Getting Started

# 1. Clone this repository
$ git clone
# Alternatively, to clone via SSH, use: 
$ git clone

# 2. Create a .env file from a copy of .env.example
$ cd soc-frontend
$ cp .env.example .env

# 3. Install dependencies
$ yarn install

# 4. Run webpack to open <http://localhost:3000/> in your browser
$ yarn start

Linting and Testing

# Runs ESLint and TSLint in parallel
$ yarn lint

# Starts the Jest tests runner
$ yarn jest

# Starts the Cypress tests runner
$ yarn cypress open

GraphQL Code Generation

  # Regenerates GraphQL Typescript files from .graphql files using schema.json
  $ yarn codegen

  # Downloads GraphQL schema from
  # Only necessary if the schema has changed
  $ yarn download

Commit, PR and Branch Naming Conventions

Write commit messages and PR names according to Conventional Commits guidelines. Commit types include:

  • feat: A new feature
  • fix: A bug fix
  • docs: Documentation only changes
  • style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
  • refactor: A code change that neither fixes a bug nor adds a feature
  • perf: A code change that improves performance
  • test: Adding missing or correcting existing tests
  • chore: Changes to the build process or auxiliary tools and libraries such as documentation generation
  • improvement: Improves a current implementation without adding a new feature or fixing a bug

Write the body of commit messages in present or "imperative" tense. Example commit messages and PR names would be:

feat: Add todo items
fix: Render missing images
refactor: Update text component

Name branches in a similar way. Use one of the above prefixes as a namespace for your branch. For example:


Resources & Style Guides