Installation

To fully utilize DirectoryStack, you'll need to configure some third-party tools and set up corresponding environment variables. This guide will walk you through the necessary steps for each provider, which are:

• Supabase (database & auth)
• Resend (transactional emails)
• OpenAI (ai content generation)
• Sentry (error tracking)

You can follow the optional guides to set up the following providers:

• Umami.is (analytics)

With every extension module, there will be additional environment variables to set up, like Stripe for payments.

Before we dive into the specifics, create a .env.local (by renaming .env.local.example) file in the root of your project. This file will store all the environment variables needed for your project.

In your local dev environment, leave NODE_ENV as development and when deploying, change to production

• NODE_ENV=development

Choose a secure password to protect your APIs & Webhooks, for example

• API_SECRET_KEY=213sUperSecretkEy@!$

Go to the file vercel.json and change the hardcoded API_SECRET_KEY to the one you just chose.

We choose Supabase as the database provider for this project as it has a generous free-tier, scales well and is out of their beta phase.

1. Create a free account on Supabase and start a new project, and remember the Database Password - we will need it later. You can use DB_PW= in your .env.local file to store it (you will need it regularly).
2. Retrieve and set the following in your .env.local:
   • NEXT_PUBLIC_SUPABASE_URL - Found in the API settings.
   • NEXT_PUBLIC_SUPABASE_ANON_KEY - Your project's anonymous public API key.
   • SUPABASE_SERVICE_ROLE_KEY - Keep this secret! Only share it with your hosting provider (like Vercel).

Supabase's free tier allows for 3 transactional emails (e.g. Signup Confirmations) per hour. Generous for testing purposes, but we want to scale! That is why we chose resend.com for transactional emails because their have a generous free-tier of currently 3k transactional emails per month and are easily integratable with Supabase for auth emails. You can of course skip this part while setting it up but before launching, I highly recommend switching to Resend.

1. Create a free account at Resend.
2. Follow the guide for integrating with Supabase: Send with Supabase SMTP or activate the Supabase Resend Integration.
3. Disable click tracking on your Resend dashboard to avoid emails being flagged as spam.

We use OpenAI to create embeddings for the listings (AI-powered Semantic Search!), and for the "Ai Content Generation Buttons" (like to tags, categories, blog posts and listing descriptions).

There will be API costs associated with it!

This template uses the new and cheap gpt-4o-mini model. As per openai.com the current costs are US$0.15 / 1M tokens (input) and US$0.6 / 1M tokens (output). For a test project, we clicked the listing-button 70 times (aka 70 descriptions and excerpts) and used 25k tokens (40% Input & 60% Output) which resulted in costs of US$0,0015 (input) and US$0,009 (output) so in rouhgly US$0,0105 (Yes, roughly 1 cents). As an example, head over to the test project DomainersKit / Domainhacks.info and read the excerpt (the short description) and then the long text (the long description). This is what you'll get.

1. Create a paid account on OpenAI and generate an API key.
2. Copy your new API key and add it to your .env.local as OPENAI_API_KEY.
3. This template uses the gpt-4o-mini model for AI-powered semantic search and content generation. Note the associated token costs and adjust settings as needed. In the shared module ai-gen, you can adjust the prompt and the allowed maximum tokens to decrease or increase content length (and thus token spend). You can also change the model to something cheaper.

Sentry is a tool that helps you track errors in your application. As we want to make sure the directory is as stable as possible, we recommend setting it up.

1. Create a free account on Sentry and generate an Auth Token.
2. Copy your Auth Token and add it to your .env.local as SENTRY_AUTH_TOKEN.
3. Add the project's DSN - sometimes referred to as Client Keys (DSN) - to your .env.local as NEXT_PUBLIC_SENTRY_DSN.