ShopWave - Sample E-commerce Website

A sample Next.js e-commerce website intentionally built with bugs and code issues for code review (CR) practice and demonstration purposes.

Purpose

This website is designed to showcase various types of bugs and code smells that are commonly caught during code reviews. It serves as a training/demonstration tool for CodeRabbit AI code review.

Getting Started

npm install
npm run dev

Open http://localhost:3000 in your browser.

---

CodeRabbit Integration

This project is configured to use CodeRabbit for AI-powered code reviews.

Setup Steps

1. Push to GitHub

   git add .
   git commit -m "Initial commit: E-commerce website with intentional bugs for CR demo"
   git remote add origin https://github.com/YOUR_USERNAME/shopwave-demo.git
   git push -u origin main

2. Install CodeRabbit

   • Go to CodeRabbit App
   • Click "Install" and select your repository
   • Authorize CodeRabbit to access your repo

3. Create a Pull Request

   • Create a new branch: git checkout -b feature/fix-bugs
   • Make changes to fix some bugs
   • Push and create a PR
   • CodeRabbit will automatically review!

Configuration

The .coderabbit.yaml file contains:

• Auto-review: Enabled for all PRs including drafts
• Profile: Set to "assertive" to catch more issues
• Path-based instructions: Custom review rules for components, pages, utils, and hooks
• Tools: ESLint integration enabled

Testing CodeRabbit

To see CodeRabbit in action:

1. Create a branch and fix ONE bug
2. Open a PR
3. Watch CodeRabbit identify remaining issues
4. Interact with CodeRabbit in PR comments

Features

• Homepage with hero section and featured products
• Product listing with filters and search
• Product detail pages
• Shopping cart with quantity management
• Checkout flow

---

Bug Categories for Code Review

1. Security Issues

• Checkout page: Stores credit card information in plain React state
• Form inputs: No input sanitization (XSS vulnerability potential)
• next.config.ts: Overly permissive image domains (hostname: "**")
• helpers.ts: Math.random() used for order IDs (not cryptographically secure)

2. Performance Issues

• Home page: Using index as key instead of product.id in lists
• Products page: No debounce on search input
• Products page: Filtering products on every render without useMemo
• Product detail: Related products calculated on every render
• useLocalStorage hook: Missing storage event listener for cross-tab sync

3. React Anti-patterns

• Home page: Unnecessary state for static data (featured products)
• Home page: useEffect with missing dependencies and no cleanup
• Cart page: Using useEffect to set derived state
• Product detail: Adding items to cart in a loop instead of batch
• usePrevious hook: Missing dependencies in useEffect

4. TypeScript Issues

• Multiple files: Using any type instead of proper typing
• Cart context: Missing proper TypeScript interfaces
• helpers.ts: Functions without proper type annotations

5. UX/Accessibility Issues

• Product detail: Uses alert() instead of toast notifications
• Cart page: No confirmation before clearing cart
• Checkout: Basic form validation with poor error messages
• globals.css: Removes focus outline without replacement

6. Logic Bugs

• Product detail: decreaseQuantity allows quantity to go to 0
• Product detail: No maximum limit on quantity
• Products page: Case-sensitive search
• Products page: Mutates array directly when sorting
• helpers.ts: validateEmail regex is too simple

7. Code Smells

• Multiple files: Magic numbers (50 for free shipping, 0.08 tax rate)
• Checkout page: Duplicated logic from cart page
• globals.css: Duplicate animation classes
• globals.css: Using !important
• next.config.ts: reactStrictMode: false

8. Missing Features (Incomplete Code)

• Products page: Price range slider doesn't work
• Products page: URL doesn't update when filters change
• Cart page: Promo code input does nothing
• Product detail: Wishlist button has no functionality
• Footer: Social media links go nowhere (href="#")

9. Data/State Issues

• Cart: Hydration mismatch (loads from localStorage after render)
• Products page: State duplicates URL params unnecessarily
• useLocalStorage: Causes flash of initial value

10. Configuration Issues

• next.config.ts: No security headers configured
• next.config.ts: No redirects for old URLs
• globals.css: Dark mode styles commented out (incomplete feature)

---

File Structure

src/
├── app/
│   ├── page.tsx           # Homepage
│   ├── layout.tsx         # Root layout
│   ├── globals.css        # Global styles
│   ├── cart/
│   │   └── page.tsx       # Cart page
│   ├── checkout/
│   │   └── page.tsx       # Checkout page
│   └── products/
│       ├── page.tsx       # Products listing
│       └── [id]/
│           └── page.tsx   # Product detail
├── components/
│   ├── Navbar.tsx
│   ├── Footer.tsx
│   ├── Hero.tsx
│   ├── ProductCard.tsx
│   └── CartItem.tsx
├── context/
│   └── CartContext.tsx    # Cart state management
├── data/
│   └── products.ts        # Sample product data
├── hooks/
│   └── useLocalStorage.ts # Custom hooks (buggy)
└── utils/
    └── helpers.ts         # Utility functions (buggy)

Tech Stack

• Next.js 16 (App Router)
• TypeScript
• Tailwind CSS
• React Context API

Notes

This is a demonstration project and should NOT be used in production. All bugs are intentional for educational purposes.