Setting up a backend

It's time to connect our application to a real backend with real data. For this we will use appwrite (opens in a new tab).

In this section we will ensure you have an account with appwrite (opens in a new tab), along with a database with the propper tables, attributes and permissions.

Account, Org & Project

First thing you'll need to do is create an account on appwrite.io (opens in a new tab). Here you will be prompted to create an organiztion which you can build projcets under.

Once you've created an account and organiztion, you'll be prompted to create a project. Let's give our project a unique name, such as "Sticky Notes"

This project is where we will begin setting our our apps configuration and creating data.

Database & collection

Inside of your new project you'll need to create a database, and within the database, create a collection. I typicly go with dev for my database name, as in "development", and notes for my collection name.

Attributes

Inside of our collection we'll want to model the data attributes we have inside of our fakeData.js file. Each note should contain the following attribtues:

You can create these under the attributes tab inside of your collection.

Permissions

In order to make request from a client you first have to ensure that you have the nessesary permissions set at the collection level, otherwise all requests will be block.

You can set permiisons under the settings tab in your collection.

For simplicity, let's add a role of any and check all the permisions: CREATE, READ, UPDATE & DELETE. This means any user, authenticated or note make all the requests listed to our backend.

Allowed Hosts

The last step before makeing request from a client is to ensure that we set a hostname, which specifies the endpoint of the client we will be making requests from. My case I will be making request from localhost, so i can set this without specifying the port number.

Adding data

Once you've created the nessesary attributes, go ahead and add some data. To simplify things feel free to use the data I've provided below and be sure to paste in every exactly as shown.

Note #1

colors

{
     "id":"color-purple",
     "colorHeader":"#FED0FD",
     "colorBody": "#FEE5FD",
     "colorText":"#18181A"
}

Position

{"x":163,"y":273}

Note #2

colors

{
     "id":"color-green",
     "colorHeader":"#AFDA9F",
     "colorBody": "#BCDEAF",
     "colorText":"#18181A"
}

Position

{"x":505,"y":10}

Note #3

colors

{
     "id":"color-blue",
     "colorHeader":"#9BD1DE",
     "colorBody": "#A6DCE9",
     "colorText":"#18181A"
}

Position

{"x":305,"y":110}