https://github.com/bugsterapp/bugster-demo-app
https://github.com/bugsterapp/bugster-demo-app
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bugsterapp/bugster-demo-app
- Owner: Bugsterapp
- Created: 2025-06-24T18:59:04.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-24T19:44:46.000Z (about 1 year ago)
- Last Synced: 2026-02-11T00:44:41.009Z (4 months ago)
- Language: TypeScript
- Size: 65.4 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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**
```bash
git clone
cd vercel-nextjs-demo
```
2. **Install dependencies**
```bash
npm install
```
3. **Run the development server**
```bash
npm run dev
```
4. **Open your browser**
Navigate to [http://localhost:3000](http://localhost:3000)
### Available Scripts
```bash
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](https://bugster.dev) 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**
```bash
npm install -g @bugster/cli
```
For GitHub integration and automated testing on PRs, visit the [Bugster Dashboard](https://gui.bugster.dev).
## 📁 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](https://bugster.dev)** - Autonomous QA testing
- **[Next.js](https://nextjs.org/docs)** - React framework
- **[Tailwind CSS](https://tailwindcss.com)** - Styling framework
- **[Vercel](https://vercel.com)** - Deployment platform