A full stack nextjs + shadcn + supabase template

✨ Join the Cult ✨

When you join the cult, you get lifetime access to a variety of other premium templates.

Each of these templates is full designed and production ready like cult-directory. The cult stack is Next.js, Shadcn, Tailwind CSS, Supabase, and the vercel ai sdk.

Designed to help you build and launch well designed startups fast.

Watch the Onboarding Video to spin up quickly

• Mac: brew install supabase/tap/supabase

• Windows:

  scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
  scoop install supabase

• Linux: brew install supabase/tap/supabase

• NPM/Bun: npx supabase <command>

1. Create a Supabase project at Supabase Dashboard, or via the CLI:

   npx supabase projects create -i "your-saas-app"

   Your Org ID can be found in the URL after selecting an org.

2. Link your CLI to the project:

   npx supabase init
   npx supabase link

   Select the project you just created.

3. Store Supabase URL & public anon key in .env.local for Next.js:

   NEXT_PUBLIC_SUPABASE_URL=<api-url>
   NEXT_PUBLIC_SUPABASE_ANON_KEY=<anon-key>

   You can get the project API URL and anonymous key from the API settings page.

4. Setup DB schema:

   This will run all of the migrations located in the supabase/migrations directory

   supabase db push

cp .env.local.example .env.local

# Example Supabase Config
NEXT_PUBLIC_SUPABASE_URL="https://examplesqnwerasdfaser.supabase.co"
SUPABASE_PROJECT_ID="examplesqnwerasdfaser"
NEXT_PUBLIC_SUPABASE_ANON_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.."

In a separate terminal, run the following commands:

pnpm i

pnpm run dev

Open http://localhost:3000 in your browser.

The default smtp rate limiting for supabase is very low now.

Providers Email - API settings page.

To add new products to your directory, simply visit the submission page:

Submit Products

Paid version only

✨ Join the Cult ✨

The default smtp rate limiting for supabase is very low now.

• The rate was lowered to 4/hour for the built in SMTP service.
• Too low for production. You need to use your own SMTP service.

Providers Email - API settings page.

If you need email confirmation follow follow these guides

• How to Increase Supabase signup rate limit (3000 free emails / mo)
• How to configure Supabase to send emails from your domain

Login

Retrieve from the auth users table API settings page.

In .env.local copy the SUPABASE_ADMIN_ID variable and paste it into the SQL Editor.

Go to the SQL Editor in Supabase API settings page.

UPDATE auth.users
SET raw_app_meta_data = jsonb_set(
    coalesce(raw_app_meta_data, '{}'),
    '{claims_admin}',
    'true'::jsonb
)
WHERE id = 'USER_UUID';

To assign admin rights to a user, run the following SQL script. Replace 'USER_UUID' with the same user ID you copied from the auth users table.

The seed script is pretty complex. There are overview docs 0. supabase/seed/src/README.md And docs for each stage:

1. supabase/seed/src/stage-1-crawl/readme.md
2. supabase/seed/src/stage-2-enrich/readme.md
3. supabase/seed/src/stage-3-seed/readme.md

I've tried to make it as cheap as possible to run. Depending on your API support level you can increase the performance of the scripts by playing with the concurrency and timeout values.

You need either the ANTHROPIC_API_KEY or an ANTHROPIC_API_KEY in your .env.local file to run supabase/seed/src/stage-2-enrich.

1. If you have an API key, copy it to your .env.local file.

2. Optionally edit the SEED_URLS variable in supabase/seed/src/main.ts to include the URLs you want to scrape and enrich.

3. Run the script:

   pnpm run enrich-seed

If you don't have an API key, I've included a pre-enriched data set of a previous run. You can see this in supabase/seed/src/stage-2-enrich/__data__/enriched-20240611T210738.json.

To use this data set instead of enriching using your keys:

1. Open the file at supabase/seed/src/main.ts.

2. Comment out lines 104 - 110:

   // console.log("Step 1: Crawl and save raw data")
   // await crawlAndSave(SEED_URLS)
   // console.log("Step 1 completed successfully")
   
   // console.log("Step 2: Enrich the latest raw data")
   // await enrichLatestData()
   // console.log("Step 2 completed successfully")

3. Run the script:

   pnpm run enrich-seed

Manage the content and users of your directory through the admin dashboard. Access it here:

Admin Dashboard

To give your directory a unique look, create a custom color theme:

1. Design Your Theme

   Visit the custom shadcn theme page to design your theme.

2. Apply Your Theme

   Once you have your theme, copy the relevant CSS and paste it into your app/globals.css file, replacing lines 5-67.

Welcome to the cult! :)

Follow the steps outlined in this README to deploy and customize your directory app. If you have any questions or run into issues, feel free to reach out for support on Twitter: https://x.com/nolansym

Cheers! Stoked to see what you build!

Other Free Goods

Cult UI

Cult UI is a collection of beautifully designed React components built with Radix UI and Tailwind CSS. These components are optimized for ease of use and integration, making it simple to create visually appealing and functional web applications.

• Repository: nolly-studio/cult-ui
• Features:
  • Radix UI components
  • Tailwind CSS styling
  • Ready-to-use and customizable
  • Open Source and free to use

AI Template

AI Template is a full-stack template designed for building AI-powered applications. It leverages Next.js, Tailwind CSS, Supabase, and OpenAI to provide a robust foundation for developing sophisticated AI solutions.

• Repository: Jordan-Gilliam/ai-template
• Features:
  • Next.js framework
  • Tailwind CSS for styling
  • Supabase for backend and database management
  • Integration with OpenAI for advanced AI capabilities

Scroll to top