Next.js Project with Advanced Integrations

This project is built on Next.js, kickstarted using create-next-app.

The project is live and running on Vercel at https://hanko-hackathon.vercel.app

Take a peek at the bottom of this page for a brief video showcasing the project in action!

Technologies

• NextJS the React Framework for the Web
• Hanko the open source authentication
• Replicate AI generate
• Supabase database and real time database
• Resend email for developers
• Tailwind as CSS framework

Getting Started

Running this project locally requires a bit of setup, especially when it comes to environment variables. Let's walk through it:

Setup Environment Variables

Copy the example .env.sample file to a new file named .env.local. Then, replace the placeholders with your actual values.

You'll require the following environment variables:

• Supabase: Check out the documentation on how to obtain your keys: Supabase Documentation

• Hanko API URL: You can find the API URL in the Hanko console. Once retrieved, add it to your .env file.

• Replicate API Token: Visit the Replicate Console to obtain your API token: Replicate Console

• Trigger.dev API: Follow the official tutorial to find out how to get the API token from the Trigger panel: Trigger.dev Tutorial

• Resend API: Acquire your API key from the Resend console: Resend Console

Run Migrations

Once you've set up all the environment variables, proceed to run the migration with the command npm run migrate-dev. Provide a name (e.g., "init") for the purpose of creating tables in Supabase and setting up your triggers. Following this, head over to Supabase to verify the creation of the tables and function.

Database and tables

Functions

Enable Database Realtime

To automatically update credits when a new AI Avatar is generated, set up the real-time feature in Supabase for the credits table. Ensure that real-time is activated for this table. Here are the steps to do so: https://supabase.com/docs/guides/realtime

Install Dependencies & Run

Once your environment variables are all set up:

Install dependencies

npm install

Start the development server

npm run dev

Now, head over to http://localhost:3000 to see the project in action!

Learn More

If you're interested in diving deeper into the technologies used in this project, here's a handy collection of resources to get you started:

Next.js

Next.js Documentation - Everything you need to know about Next.js features and API. Learn Next.js - An interactive tutorial to get hands-on with Next.js.

Hanko

Hanko Documentation - Dive deeper into the world of open-source authentication with Hanko.

Replicate

Replicate Docs - Learn how to leverage AI generation with Replicate.

Supabase

Supabase Documentation - A comprehensive guide to understanding Supabase, your go-to for databases and real-time functionalities.

Resend

Resend Documentation - Explore the developer-friendly way of managing emails with Resend.

TailwindCSS

TailwindCSS Documentation - Get started with this utility-first CSS framework and make your web designs stand out. Feel free to explore, experiment, and elevate your projects with the knowledge from these resources. Happy learning!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Video

hanko_hackathon.mp4