HuntScreens.com

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

Background story

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.

Getting Started

Tech stacks

• 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.

• React Email Write emails without pain.

• 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.

Env Variables

# 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
where
  webp = true;

after that, run the dev server.

pnpm i
pnpm run dev

open another terminal, run the trigger service.

pnpm triggerdev

If you want to create email template, open a new terminal, and run:

pnpm email dev

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

What's Next?

• 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 !