Notion Graph Viewer

This project provides a Next.js-based front-end that displays Notion pages in a graphical view. The application requires setting up a backend server alongside the front-end for full functionality.

Technologies

• Node.js: JavaScript runtime built on Chrome's V8 JavaScript engine.
• Next.js: A React framework for building server-side rendering and static web applications.
• Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.

Prerequisites

Before you begin, ensure you have Node.js(NVM) and Make, installed on your system. This project uses make and pnpm and Notion for managing dependencies and scripts, so make sure these tools are also installed. You'll need a Notion Integration to fill the .env for front-end mainly.

Notion Integration

To integrate Notion with this project, create a Notion integration and note down the integration token. You'll need to fill up in the .envs:

Link to create a Notion Integration

Install Make and PNPM

You can install make and pnpm using the following commands:

sudo apt-get install make
npm install -g pnpm

Docker

Using Docker is optional, but it simplifies the setup process. You can just install the dependencies by yourself using following command:

make install_deps

Setting Up Environment Variables (Required)

Duplicate the .env.example file for both the Server and Front-end projects. Rename the duplicated files to .env and fill in with your own data.

Getting Started

You'll need to have Make installed to run it easier, but you can run by yourself using docker composes.

Following commands:

# Download all pnpm packages and up all containers
make run-all

# Run only the containers
make run-dev

# Install only dependecies
make install-all-deps

Open http://localhost:3000 with your browser to see the front-end.