Leveraging the Power of a Typed Schema

Dynamic User Interfaces with GraphQL

Author

👤 Greg Brimble

• Github: @GregBrimble
• Personal Website: https://gregbrimble.com/

🤝 Contributing

Contributions, issues and feature requests are welcome! Feel free to check issues page.

😍 Show your support

Please consider giving this project a ⭐️ if you use it, or if it provides some inspiration!

Features

• 🧪 This is a proof-of-concept of dynamic user interfaces, defined by a GraphQL schema.

• ☁ It's full-stack serverless!

  This entire project is hosted on Cloudflare's edge, which means:

  • ⚡ Everything is blazing fast
  • 💸 It's cheap
  • 🎈 It scales automatically
  • 💻 Development is really easy

• 🤖 Deployment is automated with GitHub Actions.

Usage

Install

git clone git@github.com:GregBrimble/leveraging-the-power-of-a-typed-schema.git
cd leveraging-the-power-of-a-typed-schema
npm install

Presentation

npm run present

The MDX Deck should be available at http://localhost:8000/.

Development

npm start

The GraphQL server should be available at http://localhost:4000/ and the front-end should be available at http://localhost:3000/.

Note: If the front-end first opens with a empty page, refresh after a couple of seconds. You've just beat the build process.

Optionally, to additionally run with Storybook (available at http://localhost:3001/):

npm run start:storybook

Note: Storybook can take up to one minute to boot-up.

And if you only need the GraphQL server:

npm run start:graphql

Testing

npm test

Linting

npm run lint

And to automatically fix most errors:

npm run format

Deployment

1. Set your Cloudflare Account ID in wrangler.toml.
2. Create a Cloudflare API Token using the Edit Cloudflare Workers template, and substitute it below:

   CF_API_TOKEN=xxx npm run deploy