Hanko Supabase Next.js Example App

An open source example application built using Hanko, Supabase and the new App router in Next.js 14.

Tech stack

• Hanko: For passwordless authentication.

• Supabase: As the PostgreSQL Database

• Next.js 14: For Frontend and Backend

• TypeScript: To add static typing to JavaScript.

• Prisma: For database access and ORM.

• Tailwind CSS: For easy and customizable styling.

• Tiptap: For notion style wyswyg note editor

Getting Started

Installation

1. Clone this repository to your local machine:

git clone https://github.com/ra-kesh/hanko-supabase-saas

2. Navigate to the project directory:

cd hanko-supabase-saas

3. Install the project dependencies:

yarn

4. Create a .env.local file in the root directory and configure your environment variables.

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
DATABASE_URL=your-postgresql-database-url-from-supabse
HANKO_API_KEY=your-hanko-api-key

5. Generate Prisma client code and apply database migrations:

npx prisma generate
npx prisma migrate dev

6. start the dev server

yarn run dev

Roadmap

• Note editor performance enhancement
• Build better marketing page
• Subscriptions using Stripe
• Responsive styles
• Add OG images and metadata
• Dark mode
• Stripe
• Better error handling
• Better ts support

Resources

• https://dev.to/hanko/make-hanko-components-shine-1d61
• https://github.com/teamhanko/hanko-nextjs-starter
• https://docs.hanko.io/tutorials/nextjs-todo
• https://vercel.com/guides/nextjs-prisma-postgres
• https://vikramthyagarajan.medium.com/how-to-build-a-notion-like-text-editor-in-react-and-tiptap-7f394c36ed9d
• https://github.com/steven-tey/novel

License

Licensed under the MIT license.