Game of Thrones Quiz Game with React and GraphQL: Getting Started with 8base

Celý článek

8base is a Developer Acceleration Platform offering a vast selection of features to help developers build applications at a faster and simpler rate. With 8base, you can easily curate your application’s backend without writing a line of code. Using the 8base platform, you can build your backend using a simple GUI that allows you to perform actions such as:

1. Define your schema: create tables/table relationships.
2. Upload files
3. Define roles
4. Manage various projects using “Workspaces”.
5. Design queries using the API explorer (based on GraphQL).

In this tutorial, we’ll see how to make use of 8base to quickly define a backend and serve the data using a GraphQL API. Our frontend application will be built using React and will communicate with the server using GraphQL.

8base offers a simple GUI that makes working with it really seamless and interactive. To get started with 8base, follow these steps:

1. Create an account on 8base (8base starts as a free to use platform and pricing changes as usage increases. You will be asked to verify your email and then redirected to the 8base UI).

2. Once you are in the 8base UI, simply navigate to “Data” and click on “New Table” to start building your backend.

1. After your new table is loaded, you’ll be taken to the schema to begin defining fields. Let’s take a look around and note a couple of things. On the left, you’ll see there are System Tables and Your Tables. Every new 8base workspace automatically comes prepackaged with a number of built-in Tables. These tables are used to handle things like Files, Settings, and Permissions and can all be accessed through the 8base GraphQL API.

2. Go ahead and create a tableQuestions that consists of the following fields: ```

   • options: the field type is Text. 8base allows multiple values for a field and converts it to an array of values, so we’ll utilise that. ```

• answer: field type is Text. This field will hold the answer for each question.
• question: field type is Text that contains question string.
• image: this field type is File. It’ll hold a cover image for each question. 8base has fantastic file management capabilities that allows file uploads.

1. Next, copy the API endpoint URL (available on the bottom left) — this is your main line of communication between your front end and your 8base backend.

1. Finally, for the purpose of this tutorial we’re going to allow open access to Guests by default so that dealing with authentication is optional. To allow guest access to your new Questions table, navigate to Settings > Roles > Guest and check the appropriate boxes under Questions. Since we have a File field in the schema, we’ll have to enable file access for the guest user. All unauthenticated users who access your API endpoint are given the role of*Guest*by default. Authentication is not covered in this tutorial. You can see how authentication should be handled in more detailhere.

Now that we’ve finished setting up the backend using 8base, we’ll start work on the frontend side of the application.