https://github.com/dabit3/write-with-me

Real-time Collaborative Markdown Editor
https://github.com/dabit3/write-with-me

aws aws-appsync graphql hooks markdown react react-hooks serverless

Last synced: 2 days ago
JSON representation

Real-time Collaborative Markdown Editor

• Host: GitHub
• URL: https://github.com/dabit3/write-with-me
• Owner: dabit3
• Created: 2019-03-29T22:03:18.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-06-07T22:42:05.000Z (over 3 years ago)
• Last Synced: 2024-08-02T07:22:05.373Z (3 months ago)
• Topics: aws, aws-appsync, graphql, hooks, markdown, react, react-hooks, serverless
• Language: JavaScript
• Homepage: https://writewithme.dev
• Size: 11.9 MB
• Stars: 155
• Watchers: 7
• Forks: 69
• Open Issues: 16
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-aws-amplify - Write with Me - Real-time Collaborative Markdown Editor
• awesome-github-star - write-with-me - time Collaborative Markdown Editor | dabit3 | 147 | (JavaScript)

README

        
# ✍️ Write with me

A real-time collaborative blog post editor built with GraphQL, React, React Markdown, & AWS AppSync.

This repo goes along with the medium post "How to Build a Real-time Collaborative Markdown Editor with React Hooks, GraphQL & AWS AppSync". Click [here](https://medium.com/open-graphql/how-to-build-a-real-time-collaborative-markdown-editor-with-react-hooks-graphql-aws-appsync-dc0c121683f4) to check it out.

> Try it out at [www.writewithme.dev](https://www.writewithme.dev/#/)

![](writewithme.gif)

### Base schema

Here's the base schema:

```graphql

type Post @model {

  id: ID!

  clientId: ID!

  markdown: String!

  title: String!

  createdAt: String

}

```

We have a `Post` type that has a few properties. The most important property is the markdown. This is where we are keeping up with the state of the post.

We also have a `clientId` to properly handle GraphQL subscriptions on the client.

## Launching the app

Deploy this fullstack app with a single click to the Amplify Console:

[![amplifybutton](https://oneclick.amplifyapp.com/button.svg)](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/dabit3/write-with-me)

### Run locally with the Amplify CLI

1. Clone the repo

```sh

git clone https://github.com/dabit3/write-with-me.git

```

2. Change into the directory & install dependencies

```sh

cd write-with-me

npm install

```

3. Initialize the Amplify backend

```sh

amplify init

```

4. Push the application into your account

```sh

amplify push

```