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	Varchar	Yes	50
title	Varchar	Yes	25
description	Text	No	-

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({
        databaseId: IDEAS_DATABASE_ID,
        tableId: IDEAS_TABLE_ID,
        rowId: ID.unique(),
        data: 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({
        databaseId: IDEAS_DATABASE_ID,
        tableId: IDEAS_TABLE_ID,
        queries: [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