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!
- 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
Running this project locally requires a bit of setup, especially when it comes to environment variables. Let's walk through it:
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
.envfile. -
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
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.
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
Once your environment variables are all set up:
Install dependencies
npm installStart the development server
npm run dev
Now, head over to http://localhost:3000 to see the project in action!
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 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 Documentation - Dive deeper into the world of open-source authentication with Hanko.
Replicate Docs - Learn how to leverage AI generation with Replicate.
Supabase Documentation - A comprehensive guide to understanding Supabase, your go-to for databases and real-time functionalities.
Resend Documentation - Explore the developer-friendly way of managing emails with Resend.
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!
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.