Skip to content

Latest commit

 

History

History
128 lines (96 loc) · 3.62 KB

README.md

File metadata and controls

128 lines (96 loc) · 3.62 KB

Aquarium Part Picker

A full-stack web application for building aquarium setups with compatibility checking, inspired by PCPartPicker.

Features

  • 🐠 Browse aquarium parts by category (Tanks, Filters, Heaters, Lights, Substrate, Decor)
  • 🐟 Browse livestock (Fish, Shrimp) with quantity selection
  • ✅ Real-time compatibility checking (rule-based)
  • 💰 Price calculation for your build
  • 🛒 Buy links integration with Buce Plant
  • 🔧 Admin panel to add products
  • 📝 Crowdsourced submissions with admin moderation
  • 💾 File-based persistence for parts/livestock/submissions
  • 🎨 Modern, responsive UI built with Tailwind CSS
  • ⚡ Built with Next.js 14, TypeScript, and React

Tech Stack

  • Framework: Next.js 14 (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Runtime: Node.js

Getting Started

  1. Install dependencies:
npm install
  1. Set up environment variables:

    • Create a .env.local file in the project root

    • Add your API keys:

      # Database (Postgres)
DATABASE_URL=postgresql://...

# Amazon Product Advertising API (optional)
AWS_ACCESS_KEY_ID=your_aws_access_key_id
AWS_SECRET_ACCESS_KEY=your_aws_secret_access_key
AWS_ASSOCIATE_TAG=your_associate_tag
AWS_REGION=us-east-1

# Admin auth (required for admin access)
ADMIN_PASSWORD=your_admin_password_here

    • Amazon PA-API: Follow these steps to get credentials:

      1. Sign up for Amazon Associates and get approved
      2. Apply for PA-API access
      3. Once approved, go to your Associates account → Tools → Product Advertising API
      4. Create access keys (Access Key ID and Secret Access Key)
      5. Your Associate Tag is your Associates ID (found in your Associates account)
      6. Fill in the credentials in .env.local

Database setup (Prisma + Postgres)

  1. Install dependencies:
npm install
  1. Generate Prisma client:
npx prisma generate
  1. Create tables:
npx prisma migrate dev --name init
  1. Run the development server:
npm run dev
  1. Open http://localhost:3000 in your browser.

Project Structure

├── app/
│   ├── api/                  # API routes
│   ├── admin/                # Admin settings + moderation queue
│   ├── globals.css           # Global styles
│   ├── layout.tsx            # Root layout
│   └── page.tsx              # Home page
├── components/               # React components + modals
├── lib/
│   ├── business/             # Business logic (services)
│   ├── data/                 # Repositories + persistence
│   ├── models/               # Domain models
│   └── utils/                # Utilities
├── middleware.ts             # Security headers (CSP, etc.)
└── package.json

Notes

  • Data is persisted to data/*.json (local dev). These files are ignored by git.
  • Rate limiting is in-memory and resets on server restart.

Compatibility Rules

The app checks for:

  • Filter flow rate (should be 4-6x tank volume per hour)
  • Heater wattage (should be ~5 watts per gallon)
  • Tank size compatibility with filters and heaters
  • Required components (tank and filter are required)

Future Enhancements

  • Save builds to database
  • User accounts and saved builds
  • More parts and categories
  • Price comparison from multiple retailers
  • Advanced filtering and search
  • Product images
  • Reviews and ratings