Introduction

Kofien started out because I had a number of databases in Notion and no easy way to graph these databases. Once your database grows to more than 10 rows visualizing trends become more and more difficult to identify. So i sought out and tried to solutions and came up with a couple notion apps that visualize notion databases like I wanted but lacked filtering, were single axis, or had very limited customizability.

So, I started working on Kofien to satisfy my need to embed charts into my Notion pages that accurately display my data. Once I wrapped up Notion’s integration and visualization I wanted to create more components to embed as Notion is fairly limited to make your own pages truly interactive.

Stack

I chose Next.js and MUI as my framework of choice paired with Google firebase for my database and authentication, Vercel for hosting, and Stripe for payment processing. I also paired this with WordPress to manage the non-platform pages such as the home page, contact page, terms of service and user privacy policy. When you Visit Kofien, You’ll notice all the main pages are on the kofien.com domain while the platform and authentication is on the platform.kofien.com domain.

Features

• Payment processing using stripe and firebase serverless functions to maintain products, active subscriptions, payment processing and catalog
• SSR for embedded charts
• A catalog of prebuilt charts that integrate with openWeather, Github, Unsplash, and API Ninja
• email + password authentication
• Third party authentication
• Notion OAuth refresh and access token persistence
• Light/ Dark Mode within embedded charts
• Custom chart annotations that calculate upper bound, lower bound, average, median, standard deviation, and custom annotations like vertical line, horizontal line, and point annotations.
• Identifies and plots trend lines within
• Complex filtering which interfaces with Notion’s filtering mechanism.

Get Started

It’s simple! all you have to do is go to Kofien.com and signup!

Screenshots