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-3.5-turbo 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

Performance

PageSpeed report