Wake up, samurai — we have bugs to catch!
A vibe coded React frontend for a bookstore application, purpose-built as a sandbox for test automation practice.
This project was created as a test automation training ground. It's designed to be:
- Test-friendly — Every interactive element has
data-testidattributes - Realistic — Full e-commerce functionality (products, cart, orders, wishlist, reviews)
- Predictable — Consistent patterns for easy selector targeting
data-testid="page-name" → e.g., "cart-page"
data-testid="element-name" → e.g., "search-input"
data-testid="element-name-{id}" → e.g., "product-card-123"
data-testid="action-button" → e.g., "add-to-cart-button"
| Technology | Version | Purpose |
|---|---|---|
| React | 18.3.1 | UI Framework |
| TypeScript | 5.6.3 | Type Safety |
| Vite | 6.0.3 | Build Tool & Dev Server |
| Tailwind CSS | 3.4.15 | Styling |
| React Router | 6.28.0 | Client-side Routing |
| Axios | 1.7.7 | HTTP Client |
- Node.js 18+
- npm or yarn
- LittleBugShop Backend running on
localhost:5052
# Clone the repository
git clone https://github.com/farum12/LittleBugShop.FE.git
cd LittleBugShop.FE
# Install dependencies
npm install
# Start development server
npm run devThe app will be available at http://localhost:3000
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
npm run lint |
Run ESLint |
src/
├── components/ # Reusable UI components
│ ├── Header.tsx # Navigation header
│ ├── Footer.tsx # Page footer
│ ├── Layout.tsx # Main layout wrapper
│ ├── ProductCard.tsx # Product display card
│ ├── LoadingSpinner.tsx
│ └── ErrorMessage.tsx
├── pages/ # Route pages
│ ├── HomePage.tsx
│ ├── ProductsPage.tsx
│ ├── ProductDetailPage.tsx
│ ├── CartPage.tsx
│ ├── CheckoutPage.tsx
│ ├── OrdersPage.tsx
│ ├── WishlistPage.tsx
│ ├── LoginPage.tsx
│ ├── RegisterPage.tsx
│ ├── ProfilePage.tsx
│ └── NotFoundPage.tsx
├── services/ # API service layer
│ ├── api.ts # Axios instance + interceptors
│ ├── authService.ts
│ ├── productService.ts
│ ├── cartService.ts
│ ├── orderService.ts
│ ├── reviewService.ts
│ └── wishlistService.ts
├── types/ # TypeScript interfaces
│ └── index.ts
├── App.tsx # Router configuration
├── main.tsx # Entry point
└── index.css # Tailwind imports
Custom bug-themed color palette:
| Color | Hex | Usage |
|---|---|---|
| Bug Primary | #2d5a27 |
Main green |
| Bug Secondary | #8b4513 |
Brown accents |
| Bug Accent | #ffd700 |
Gold highlights |
| Page | Route | Features |
|---|---|---|
| Home | / |
Hero, featured products |
| Products | /products |
Search, filter, pagination |
| Product Detail | /products/:id |
Details, reviews, add to cart |
| Cart | /cart |
View/edit cart, apply coupons |
| Checkout | /checkout |
Shipping address, payment |
| Orders | /orders |
Order history |
| Wishlist | /wishlist |
Saved products |
| Login | /login |
Authentication |
| Register | /register |
New account |
| Profile | /profile |
User settings |
The frontend proxies API requests to the backend:
- Dev proxy:
localhost:3000/api/*→localhost:5052/api/* - Auth: JWT tokens stored in localStorage
- Interceptors: Auto-attach auth headers, handle 401 redirects
This app is your playground! Here's what you can practice:
- E2E Testing — Full user flows (browse → cart → checkout)
- Component Testing — Isolated component behavior
- API Testing — Mock or intercept service calls
- Visual Regression — Consistent UI with Tailwind
- Accessibility Testing — Semantic HTML structure
Recommended priority:
data-testidattributes (most stable)- Semantic roles (
button,link,textbox) - Text content (for assertions)
- CSS classes (Tailwind utilities are stable)
This is a vibe coded project — built with AI assistance (GitHub Copilot) in a single session. It's meant for learning and testing, not production use.
MIT
Built with 🐛 and ☕ for the QA community