Relay library for creating extendable admin/backend UI's

Technologies: Relay, GraphQL, React, TypeScript, Tailwind, Vite

Setup

• Create your project with react, vite and tailwind
  • https://tailwindcss.com/docs/guides/vite?utm_source=chatgpt.com
  • --template react-ts instead of --template react (TypeScript)
• Add relay (https://relay.dev/docs/getting-started/installation-and-setup/)
• npm install relay-bee
• Add peer dependencies:
  • npm install found-relay (router)
  • npm install zod (input validation)
  • npm install react-error-boundary
  • npm install @headlessui/react
  • npm install @floating-ui/react
  • npm install @heroicons/react
• Install the tailwindcss/forms plugin: https://github.com/tailwindlabs/tailwindcss-forms
  • This is recommended for some input-fields to look cleaner
• Improve Linting with this plugin: https://github.com/relayjs/eslint-plugin-relay?utm_source=chatgpt.com
• Create an extendable backend UI fast!

Authentication

RelayBee uses JWT-Authentication.
If you use ApiPlatform (Symfony, PHP) for the backend, this Bundle is recommended: https://symfony.com/bundles/LexikJWTAuthenticationBundle/current/index.html

IntelliJ (Webstorm)

For a better integration in intellij you can activate this relay option:

Images

RelayBee does use images with heights of 100 and 200 pixels.
It accesses them with suffixes in this format: xy-mh100 (max heights 100px).

In Symfony projects these images can be generated with this bundle easily: https://github.com/timble-one/backend-bundle