👋

This project is for research and educational purpose. The project is a web application that displays a table view of a Notion database and allows users to sort and filter the database using the Notion API.

Tech stack 🛠

• Next.js
• Tailwind CSS
• shadcn/ui
• Notion API
• React Table
• Zustand
• TypeScript
• Docker

Quick start 🚀

1. Clone the repository.

   git clone
   

2. Configure the environment variables.

   Create a .env file in the root of the project and add the following environment variables:

   NOTION_SECRET=<your-notion-secret>
   NOTION_DB_ID=<your-notion-db-id>
   NEXT_PUBLIC_MAX_FILTER_DEPTH=2
   NEXT_PUBLIC_ENABLE_NEGATION=true
   

3. Install dependencies.

   npm install
   

4. Start the development server.

    npm run dev
   

5. Open the source code and start editing!

   Your site is now running at http://localhost:3000!

Running with Docker 🐳

1. Update next.config.mjs file.

   /** @type {import('next').NextConfig} */
   const nextConfig = {
      transpilePackages: ["geist"],
   +  output: "standalone",
   };
   
   export default nextConfig;
   

2. Build the Docker image.

   docker build -t notion-table-view .
   

3. Run the Docker container.

    docker run -p 3000:3000 notion-table-view
   

4. Open the source code and start editing!

   Your site is now running at http://localhost:3000!

Key features ⭐

• Build a table view UI for Notion databases

  • Implement a basic table view given a Notion database as input.
  • Support sorting.
  • Support rearrangement and resizing of columns - expected behavior:
    • Click and hold the column headings to drag them left or right.
    • Resize columns by hovering over their edges, and dragging right or left.

• Build a Notion filter UI for supporting database filters.

  • Support the property types checkbox , date , multi_select , number , rich_text , select , timestamp , status.
  • Support Compound filters with filter groups.
  • The Notion API doc notes that it only supports two levels of nesting on compound filter conditions. Implement the filters such that the restriction on the levels of nesting is configurable e.g. could be increased to 3, 4, or more.
  • Implement unit tests for the Compound filters

• Implement the NOT operator for compound filter conditions. Support compound filter conditions that contain only filter operators where the Notion API offers the logical negation e.g. !( ) is is_not_empty , !( less_than ) is greater_than_or_equal_to

  • For the filter conditions where Notion does not offer the logical negation, implement validation logic that prompts the user that the NOT operator is unsupported with the given compound filter conditions.
  • For example: !(( datePropertyX is after “2023-01-01” AND textPropertyY ends with “.com”) OR textPropertyZ starts with “www.”) should indicate “Unsupported conditions for NOT: ends with , starts with
  • Include unit test cases for the NOT operator logic