Dominate search rankings and monetize traffic with this SEO powerhouse. Our full-stack Next.js, Shadcn, and Supabase directory template features a 3-stage scraping and AI enrichment pipeline. Build your backlink empire and ad revenue stream on autopilot.
Implement a Node.js-based scraping pipeline using libraries like Puppeteer or Cheerio for efficient data collection.
Leverage Supabase's built-in auth system for secure user management, including email/password and social auth options.
Integrate OpenAI's GPT models for automatic content summarization, categorization, and metadata generation.
Utilize Supabase's PostgreSQL database for efficient data storage and retrieval, with support for full-text search.
</div> <div id="supabase" > ## SupabaseWatch the Onboarding Video to spin up quickly
Mac: brew install supabase/tap/supabase
Windows:
powershellscoop bucket add supabase https://github.com/supabase/scoop-bucket.git scoop install supabase
Linux: brew install supabase/tap/supabase
NPM/Bun: npx supabase <command>
Create a Supabase project at Supabase Dashboard, or via the CLI:
shellnpx supabase projects create -i "your-saas-app"
Your Org ID can be found in the URL after selecting an org.
Link your CLI to the project:
shellnpx supabase init npx supabase link
Select the project you just created.
.env.local
for Next.jsStore Supabase URL & public anon key in .env.local
for Next.js:
shellNEXT_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.
Setup DB schema:
This will run all of the migrations located in the
supabase/migrations
directory
shellsupabase db push
.env
variables are configured correctlybashcp .env.local.example .env.local
</div>bash# 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:
shellpnpm i
shellpnpm run dev
Open http://localhost:3000 in your browser.
To add new products to your directory, simply visit the submission page:
</div>You now have a fully seeded database with all the data you need to start building your own cult directory.
<div id="admin-setup">The default smtp rate limiting for supabase is very low now.
Providers Email - API settings page.
<div align="center"> <img src="https://raw.githubusercontent.com/Jordan-Gilliam/readme-assets/master/supabase-auth-email-switch.png" alt="supabase-auth-email-switch" width="90%" /> </div>If you need email confirmation follow follow these guides
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.
sqlUPDATE 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:
supabase/seed/src/stage-1-crawl/readme.md
supabase/seed/src/stage-2-enrich/readme.md
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
.
If you have an API key, copy it to your .env.local
file.
Optionally edit the SEED_URLS
variable in supabase/seed/src/main.ts
to include the URLs you want to scrape and enrich.
Run the script:
shellpnpm 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:
Open the file at supabase/seed/src/main.ts
.
Comment out lines 104 - 110
:
ts// 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")
Run the script:
shellpnpm run enrich-seed
Manage the content and users of your directory through the admin dashboard. Access it here:
</div>To give your directory a unique look, create a custom color theme:
Design Your Theme
Visit the custom shadcn theme page to design your theme.
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.
Create a new repository and push the project to GitHub.
Go to Vercel and import the GitHub repository: Deploy.
Set up Environment Variables in Vercel
Go to your project settings on Vercel and set up the environment variables by copying the content from your .env.local
file. Ensure the following variables are included:
NEXT_PUBLIC_SUPABASE_URL
- Your Supabase API URLNEXT_PUBLIC_SUPABASE_ANON_KEY
- Your Supabase anonymous keySUPABASE_PROJECT_ID
- Your Supabase project IDSUPABASE_ADMIN_ID
- Admin user ID for your applicationHere's an example of what your environment variables might look like:
plaintextNEXT_PUBLIC_SUPABASE_URL="https://abcd1234.supabase.co" NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." SUPABASE_PROJECT_ID="abcd1234" SUPABASE_ADMIN_ID="efgh5678"
Deploy the Project
Once your environment variables are set, you can deploy your project. Vercel will handle the build and deployment process for you.
Access Your Live Application
After deployment, you can access your live application through the URL provided by Vercel. Your application should now be live and ready to use.
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!
<a href="#top" style="text-decoration: none; color: #007bff; font-weight: bold;">Scroll to top</a>
One-time payment, lifetime access
One-time payment, 1 year of updates