iamfeek/NextMaster

A highly performant replica of McMaster-Carr using Next.js

NextMaster

A highly performant replica of McMaster-Carr using Next.js and AI generated content by @ethanniser, @RhysSullivan and @armans-code

Design notes

Check out the detailed twitter thread

• Uses Next.js 15
  • All mutations are done via Server Actions
• Partial Prerendering is used to precompute the shells of pages
  • When deployed, these are served statically from the edge
  • Dynamic data (such as cart information) is then streamed in
• Uses Drizzle ORM on top of Neon Postgres
• Images storied on Vercel Blob
• Used v0 to generate all initial UIs, check out some of the threads we were particularly impressed by:
  • v0 makes pretty impressive search dropdown without a library
  • recreating 'order' page
  • recreating 'login' page

AI

• Used OpenAI's gpt-4o-mini with their batch API and the Vercel AI SDK to generate product categories, names and descriptions
• GetImg.ai was used to generate product images via the stable-diffusion-v1-5 model

Deployment

• Make sure the Vercel project is connected to a Vercel Postgres (Neon) database and Vercel Blob Storage
• Run pnpm db:push to apply schema to your db

Local dev

• Run vc env pull to get a .env.local file with your db credentials.
• Run pnpm install && pnpm dev to start developing
• For DB migrations with drizzle-kit:
  • Make sure ?sslmode=required is added to the POSTGRES_URL env for dev
  • Run pnpm db:push to apply schema to your db
• The data/data.zip includes a ~300 MB data.sql file with the full schema and 1,000,000+ products

Performance

PageSpeed report