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)
• Umami.is (analytics)
• OpenAI (ai content)
• Stripe (payment)

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=213sUperSecretkEy213

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.

1. Create a free account at Supabase and a new project: Remember the Database Password. We need it later.
2. Login and in the left sidebar, click on Project Settings (at the bottom)
3. Copy the Project Reference Id (long string of letters) and paste it as the NEXT_PUBLIC_SUPABASE_PROJECT_ID
4. in the Settings Menu, click on API, and copy the Project URL and paste it as the NEXT_PUBLIC_SUPABASE_URL
5. On the same page, copy the ANON PUBLIC API KEY and paste it as the NEXT_PUBLIC_SUPABASE_ANON_KEY
6. On the same page, copy the service_role key and past it as the SUPABASE_SERVICE_ROLE_KEY (Never share this key anywhere (except with your hosting provider) because it can bypass supabase RLS.)
7. Go to the file package.json, and in 'scripts>typgen', replace '[ YOUR_SUPABASE_PROJECT_ID ]' with the NEXT_PUBLIC_SUPABASE_PROJECT_ID

The following variables in your .env.local should be filled now:

NEXT_PUBLIC_SUPABASE_PROJECT_ID=
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

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. Head over to Resend and create a free account
2. Follow this guide: https://resend.com/docs/send-with-supabase-smtp (alternatively activate this integration: https://supabase.com/partners/integrations/resend)
3. Disable Click Tracking under resend.com/domains. While we like knowing whether our links are clicked, resend is using aws click tracking under the hood which might get your emails in spam - not a great user experience. As this is merely a confirmation email, it should be fine.

We choose Umami.is as the analytics provider because it has a generous free-tier and is GDPR / CCPA compliant without setting cookies (e.g. you will not need any Cookie Banner!)

1. Create a free account at Umami.is.
2. Click on + Add website and provide your website name and the final domain. E.g. "Name: DirectoriesHQ" , "Domain: directorieshq.com" (no https)
3. CLick on Edit and copy the Website ID

The following variables in your .env.local should be filled now:

NEXT_PUBLIC_UMAMI_ID=

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 an account at openai.com
2. On the left sidebar, click on API Keys.
3. Click on + Create new secret key
4. Give it a name and set the permissions to Restricted and allow Write for the Model capabilities. Then hit Create secret key.
5. Copy the newly created key and paste it to your .env.local as the OPENAI_API_KEY

The following variables in your .env.local should be filled now:

OPENAI_API_KEY=

If you do not set the three Stripe keys, the user will see a "Write us an email to promote your listing" notification instead of a self-signup form.

It is advisable to perform the steps 2-7 in "Test Mode" first before going live. The toggle is in the top right menue.

1. Create a free account at Stripe
2. Follow the onboarding flow and setup your account.
3. Go to https://dashboard.stripe.com/settings/tax and activate automated tax calculations. If you don't want to use this feature, go to the file createStripeCheckoutSession.ts and remove the line automatic_tax: { enabled: true }, from const session = ....
4. Click on Developers in the top menu and then on API keys. Copy the publishable key as the NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY.
5. On the same page, copy the Secret Key and add it as the STRIPE_SECRET_KEY
6. Still in the developer menue, click on Webhooks (right next to API keys), and create a new endpoint (https://YOURDOMAIN.com/api/payment/stripe-receipt). (If you want to test it locally, use the Stripe CLI, follow the steps in the Stripe docs).
7. In the webhhook menue for this custom webhook, click on Signing Secret Reveal and copy this value as the STRIPE_WEBHOOK_SECRET.

This was the setup of the Stripe account. While you are on this page,

1. Create a new product by heading to the product catalogue and clicking the button Add product.
2. Name it Promoted Listing, give it a ONE-TIME price of USD 1.00 (or whatever your price shall be for a listing to be promoted for 1 day.)
3. In the top-right corner of the product page, copy the product id which starts with 'price_' and paste it to the file app/constants/constants.ts as the STRIPE_PRICE_ID where we define PROMOTIONS_DATA.
4. Next, again in the product catalogue on Stripe.com, click on Coupons and add a new coupon. This will be the automatic discount for when a user buys more than 30 days of promotions. E.g. create a 10% discount code, with duration forever. Once created, you'll need to copy the ID which you find under Details. IGNORE the API ID of the coupon, which is NOT needed here. The ID is a lot short than the API ID. Add this coupon as the STRIPE_COUPON_ID to the PROMOTIONS_DATA to the file app/constants/constants.ts.

The following variables in your .env.local should be filled now:

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=