seth-mckilla / notiolize-poc

Dead simple data visualization for Notion.

Welcome to Notiolize! 🙋‍♂️

Dead simple data visualization for Notion.

Check out the live demo here 👉 https://notiolize.notion.site/Data-Viz-a5bec6ca709142199c92503b3dcce173!

This repo serves as a minimal template to create your own custom data visualizations within Notion by utilizing the Notion API, NextJS, Vercel, and ReCharts. To get up and running, simply follow these steps...

1. Create an app using this repo as the template:

npx create-next-app@latest -e https://github.com/Seth-McKilla/notiolize

Note: The above command automatically downloads and installs the dependencies so no "npm install" or "yarn add" required!

2. Create a Notion integration to obtain an API key to access the Notion API.

Note: Also make sure to grab the ID of the database you wish to create the visualization for.

3. Create a .env.local file within the root directory with the following environment variables:

NOTION_API_KEY=<YOUR API KEY>
NOTION_DATABASE_ID=<YOUR DATABASE ID>

4. Start the local development environment and customize to your liking:

npm run dev

Note: The Notion data is fetched within the api folder and rendered through the BarChart component.

5. Deploy your app to Vercel:

6. Simply embed your live Vercel app link within Notion (see GIF above).

That's all folks! If you've found value in this repo, please considering leaving a ⭐!

Resources

To learn more about the packages used in this project, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• React Typescript Cheatsheet - helpful tips for using Typescript with React.
• Notion Javascript SDK - GitHub repo including documentation for using the Notion API JavaScript SDK.
• Getting Started with Recharts - get up and running with using the Recharts data visualization library.