OmitPlastic

OmitPlastic is a full-stack web app that lists products that are plastic-free or use less plastic to reduce plastic pollution. Users can create an account to favorite products. Product data is synced with Amazon product data via a protected endpoint that calls the Bright Data API in Vercel cron jobs.

Live App

See a live version of this app here: www.omitplastic.com.

User Flow

• As a user, I want to be able to search for products by keyword or category.

• As a user, I want to be able to view a product detail page and favorite products.

• As a user, I want to be able to view and manage my list of favorite products.

Technology

• TypeScript - Strongly typed programming language
• React - JS library for UI
• Next.js - React framework
• TanStack Query - Server state management
• Tailwind CSS - Utility-first CSS framework
• Neon - Serverless Postgres database
• Neon Auth - Authentication and user management
• Drizzle ORM - TypeScript Object-Relational Mapping
• Bright Data - Web scraper APIs
• Keystatic - Content management system
• Vercel - Cloud platform for deployment and cron jobs

Getting Started

First, install the dependencies and set up the environment variables (see below):

pnpm install

Run the database migrations to create the tables in the Neon database:

npx drizzle-kit push

Then, start the development server to run the app locally:

pnpm dev

Environmental Variables

# Neon connection string
DATABASE_URL=

# Neon Auth environment variables for Next.js
NEXT_PUBLIC_STACK_PROJECT_ID=
NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=
STACK_SECRET_SERVER_KEY=

# BrightData environmental variables to scrape Amazon product data
BRIGHTDATA_API_KEY=
BRIGHTDATA_DATASET_ID=

# Secret to protect the sync endpoint from unauthorized requests for Vercel
CRON_SECRET=

# Google Analytics Measurement ID
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=