OmitPlastic is an open-source full-stack e-commerce affiliate template built with Next.js and Prisma that focuses on reducing plastic consumption by curating products with less plastic. It runs on Vercel and uses a Neon-hosted database, with TypeScript, React, Tailwind CSS, SWR, and React Spring in the frontend stack. The repository is maintained by Gavin Grant and demonstrates a complete Amazon Associates storefront, complete with a product data model and automated price scraping.
What is OmitPlastic?
OmitPlastic is a full-stack e-commerce affiliate application built with Next.js, TypeScript, Prisma, and a Neon-hosted database. It functions as an Amazon Associates storefront where products are stored in a database and their prices are automatically scraped from Amazon product pages using Cheerio. The template is designed to help people reduce plastic consumption by curating products with less plastic content, but its product model is generic enough to be adapted for any product category.
Key Features
- Next.js full-stack framework — The app uses Next.js API routes for backend logic, including a price-update endpoint, while React powers the user interface.
- Prisma ORM with a Neon database — The data layer defines a Product model (with asin, price, category, name, slug, imageUrl, url, description, and features) and connects to a Neon-hosted database using Prisma.
- Amazon Associates integration — Every product links through the Amazon affiliate program, so the site owner earns a commission on purchases made via the storefront.
- Automated price scraping — The API route at
pages/api/price.tsuses Cheerio to parse Amazon web pages, retrieving and updating current pricing and availability for stored products. - Tailwind CSS styling — The UI is styled with the Tailwind CSS framework, and React Spring is included for component animations, giving the storefront an interactive feel.
- SWR data fetching — SWR hooks fetch product data on the client, providing fast, cached responses and a smooth browsing experience.
- Prisma Studio support — Developers can run
npx prisma studioto open a graphical interface for directly viewing and editing product rows in the database. - Deployment guidance for Vercel — The README links to a Neon guide for deploying the app on Vercel, making it straightforward to go live.
Who should use OmitPlastic?
- Developers building affiliate storefronts — They can clone the repository and immediately have a product catalog, a database schema, and an Amazon-scraping price API to start earning affiliate revenue.
- Sustainability-focused retailers and bloggers — The template is pre-themed around reducing plastic consumption, so they can populate it with low-plastic or eco-friendly products and start selling without designing a site from scratch.
- Learners exploring modern TypeScript web development — The codebase showcases Next.js API routes, Prisma schema management, environment configuration, and web scraping with Cheerio—all in a single application.
What can you do with OmitPlastic?
- Launch a plastic-reduction product directory — Populate the Product table with items that contain minimal plastic; visitors browse the storefront and click through to purchase on Amazon, generating affiliate commissions.
- Adapt the template to any niche — Change the product categories and scraping logic to sell books, electronics, or clothing; the underlying schema and workflow remain intact.
- Keep product prices current automatically — Instead of manually updating prices, the price API scrapes Amazon pages to refresh pricing and availability data.
How does OmitPlastic work?
The setup flow is: clone the repository, install dependencies with npm install or yarn install, create a free Neon account and database, run npx prisma init, push the schema with npx prisma db push, set the DATABASE_URL in the .env file (based on example.env), and start the dev server with npm run dev. Once deployed, the app stores product records in the database and its API route scrapes Amazon product pages with Cheerio to keep pricing and availability current.
FAQ
Is OmitPlastic free?
Yes, the repository is open source on GitHub, so you can clone, modify, and use it free of charge. The setup instructions recommend a free Neon account, and deployment to Vercel follows Neon's documented guide.
What database does OmitPlastic use?
The project uses Prisma as its ORM and connects to a Neon-hosted database. The Prisma schema defines a Product model with fields such as name, price, category, and slug, and you can manage the data through Prisma Studio.
Can I use this template for non-plastic products?
Yes. The Product model includes generic fields like name, price, category, and URL, so it can be reused for any affiliate product niche—books, electronics, home goods, and more. You simply update the product data and optionally adjust the scraping logic to match Amazon pages for those categories.
How do I run the project locally?
Clone the repository, run npm install or yarn install, create a Neon database, bootstrap Prisma with npx prisma init, push the schema with npx prisma db push, set the DATABASE_URL in your environment, and start the development server with npm run dev. You can then open http://localhost:3000/ in your browser.
