BugShop - Next.js E-commerce Demo

A modern Next.js e-commerce demo application featuring a complete shopping experience with product browsing, cart management, and responsive design.

🚀 Perfect Demo Application

This demo provides a complete e-commerce platform with realistic user flows, perfect for demonstrations and testing various tools and integrations.

🛒 Features

• Product Catalog: Browse and filter products by category
• Shopping Cart: Add, remove, and modify cart items
• Modern UI: Clean, responsive design with Tailwind CSS
• Search: Product search functionality
• Mobile Friendly: Works seamlessly on all device sizes

🚦 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd vercel-nextjs-demo

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open your browser Navigate to http://localhost:3000

Available Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run ESLint

🧪 Testing with Bugster

Bugster is an autonomous QA agent that tests your app by using it like a real user.

Setup

1. Deploy to Vercel

2. Install Bugster CLI

   npm install -g @bugster/cli

For GitHub integration and automated testing on PRs, visit the Bugster Dashboard.

📁 Project Structure

vercel-nextjs-demo/
├── app/                    # Next.js 13+ app directory
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Homepage
│   ├── products/          # Products pages
│   └── cart/              # Shopping cart
├── components/            # React components
│   ├── CartContext.tsx    # Cart state management
│   ├── Header.tsx         # Navigation
│   ├── Footer.tsx         # Footer
│   └── ProductCard.tsx    # Product display
├── data/                  # Mock data
│   └── products.ts        # Product catalog
└── README.md

🎨 Technology Stack

• Framework: Next.js 14 with App Router
• Styling: Tailwind CSS
• Icons: Lucide React
• Language: TypeScript
• State Management: React Context API

🚀 Deployment

Vercel (Recommended)

1. Connect your GitHub repository to Vercel
2. Deploy automatically with every push
3. Get preview deployments for pull requests

Other Options

• Netlify: Next.js compatible
• Railway: Node.js platform
• DigitalOcean: App Platform
• AWS: Amplify hosting

🔧 Customization

• Add Products: Edit data/products.ts
• New Pages: Add routes in app/ directory
• Styling: Modify Tailwind classes
• Components: Update React components as needed

📝 License

MIT License - feel free to use for your own projects.

🔗 Links

• Bugster - Autonomous QA testing
• Next.js - React framework
• Tailwind CSS - Styling framework
• Vercel - Deployment platform