Add database

Create database

To store your ideas, you need to create a database first.

Go to the Databases section in your Appwrite Console
Click Create Database
Give it a name and ID. For this tutorial, we'll use Ideas Tracker as the name and ideas-tracker as the ID.
You'll need to remember the database ID as you'll need it later.

Create table

In Appwrite, data is stored as a table of rows. Create a table in the Appwrite Console to store our ideas.

Columns

Create a new table with the following columns:

Field	Type	Required	Size
userId	String	Yes	50
title	String	Yes	25
description	String	No	100

Navigate to the Settings tab of your table, add the role Any and check the Read box. Next, add a Users role and give them access to Create by checking those boxes. These permissions apply to all rows in your new table.

Ideas context

Now that you have a table to hold ideas, we can read and write to it from our app. Like we did with the user data, we will create a React context to hold our ideas. Create a new file src/lib/context/ideas.jsx and add the following code to it.

Web

import { createContext, useContext, useEffect, useState } from "react";
import { databases } from "../appwrite";
import { ID, Query } from "appwrite";

export const IDEAS_DATABASE_ID = "<YOUR_DATABASE_ID>"; // Replace with your database ID
export const IDEAS_TABLE_ID = "<YOUR_TABLE_ID>"; // Replace with your table ID

const IdeasContext = createContext();

export function useIdeas() {
  return useContext(IdeasContext);
}

export function IdeasProvider(props) {
  const [ideas, setIdeas] = useState([]);

  async function add(idea) {
    try {
      const response = await tablesDB.createRow(
        IDEAS_DATABASE_ID,
        IDEAS_TABLE_ID,
        ID.unique(),
        idea
      );
      setIdeas((ideas) => [response, ...ideas].slice(0, 10));
    } catch (err) {
      console.log(err) // handle error or show user a message
    }
  }

  async function remove(id) {
    try {
      await tablesDB.deleteRow({
        databaseId: IDEAS_DATABASE_ID,
        tableId: IDEAS_TABLE_ID,
        rowId: id
      });
      setIdeas((ideas) => ideas.filter((idea) => idea.$id !== id));
      await init();
    } catch (err) {
      console.log(err)
    }
  }

  async function init() {
    try {
      const response = await tablesDB.listRows(
        IDEAS_DATABASE_ID,
        IDEAS_TABLE_ID,
        [Query.orderDesc("$createdAt"), Query.limit(10)]
      );
      setIdeas(response.rows);
    } catch (err) {
      console.log(err)
    }
  }

  useEffect(() => {
    init();
  }, []);

  return (
    <IdeasContext.Provider value={{ current: ideas, add, remove }}>
      {props.children}
    </IdeasContext.Provider>
  );
}

Step 5: Add navigation Step 7: Create ideas page

Was this page helpful?

Update on GitHub

Build an ideas tracker with React