The best way to explore the ProductHunt. Capture every new featured product!

One day, I felt that browsing ProductHunt wasn't very intuitive, so I quickly made a small project using NextJs. It takes screenshots of each new project on ProductHunt, so now I can quickly browse through them every day and easily see if there's anything interesting to me without having to read a lot of text and click around.

• Next.js

• Shadcn UI framework based on Tailwind.

• Supabase Managed postgres database.

• Drizzle Database ORM.

• Logto.io Fully open sourced Auth solution.

• Triggerdev v2.0 Background jobs.

• Resend Email service.

• ScreenshotOne Screenshot Api.

• Cloudflare R2 Image storage.

• Umami Website Analytics

• Koyeb Paas Service.

Before deployment, make sure you know all the services or tools above clearly. It may take some time.

# setup trigger api key and endpoint url.
# https://trigger.dev/

TRIGGER_API_KEY=
TRIGGER_API_URL=
NEXT_PUBLIC_TRIGGER_PUBLIC_API_KEY=

# setup Producthunt API access token
# https://api.producthunt.com/v2/docs

PH_ACCESS_TOKEN=

# setup postgres database url.
# https://supabase.com

DATABASE_URL=

# setup screenshot one api.
# !remember to setup s3 extension on ScreenshotOne.
# https://screenshotone.com/

SCREENSHOTONE_ACCESS_KEY=
SCREENSHOTONE_SIGNED_KEY=

# setup resend email service api
# https://resend.com

RESEND_KEY=
RESEND_AUDIENCE_ID=


# cloudflare r2 endpoint url.

NEXT_PUBLIC_CLOUDFLARE_R2=

# setup Logto user authentication
# https://logto.io

LOGTO_APPID=
LOGTO_APP_SECRET=
LOGTO_BASE_URL=
LOGTO_COOKIE_SECRET=
LOGTO_ENDPOINT=

After Env vars, generate and migrate the database table:

pnpm db:generate
pnpm db:migrate

after migration, run the following sql at supabase or from any postgres client, to create table view:

create view
  sortedphs as
select
  row_number() over (order by added_at desc) as row_no,
  *
from
  producthunt;

after that, run the dev server.

pnpm i
pnpm run dev

open another terminal, run the trigger service.

pnpm triggerdev

Open http://localhost:3000 with your browser to see the result.

• screenshot YC companies

You can view all the dev plan on this Kanban.

Any idea or bugs? Submit issues or leave a comment on my twitter !