A highly performant e-commerce template using Next.js and AI generated content by @ethanniser, @RhysSullivan and @armans-code

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 stored 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

• 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

• 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

• Run vc env pull to get a .env.local file with your db credentials.
• Run pnpm install && pnpm dev to start developing.
• The data/data.zip includes a ~300 MB data.sql file with the full schema and 1,000,000+ products (Note, the data exceeds the size limit allowed by the free tier for Neon on Vercel see more). To seed Vercel Postgres with this data:
  • Unzip data.zip to data.sql.
  • Run psql "YOUR_CONNECTION_STRING" -f data.sql.
• 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

PageSpeed Report

This project is hosted on Vercel, and uses many of the features of the Vercel platform.

Here is the full breakdown of the cost of running this project from Oct 20th 2024 through Nov 11th 2024.

During that time, the project recieved over 1 million page views across 45k unique users. The site has over 1 million unique pages and images*.

*images are unique by url (and caching) although not unqiue in their content

• ~1 million page views
• ~1 million unqiue product pages
• 45k unique users
• $513.12

Is $500 a lot for hosting this site? It depends, in this instance if it was a real ecommerce site that hosting cost would've been made back in the first 10k visitors.

It is likely possible to optimize these costs further if that is your goal, however that wasn't a priority for this project. We wanted to try and build the fastest possible site, quickly. We definitely achieved that goal without ever having to think about infra once.

These numbers are also on top of the Vercel pro plan, which is $20/contributor/month.

We would like to thank Vercel for covering the costs of hosting this project.

These costs represent the core functionality of serving the site.

Total: $353.12

These costs represent the image optimization done by Vercel.

Total: $160.00