`PRD.md`

294 lines
# Glass Beaded Wallpaper - Product Requirements Document

## Project Overview
**Domain:** glassbeadedwallpaper.com
**Template Source:** DW-Websites/flockedwallpaper
**Tech Stack:** Next.js/React with mobile-first responsive design
**Deployment:** Port 3012 with PM2 process management (auto-restart, crash recovery)

## Core Objectives
1. Create a highly SEO-optimized e-commerce site for glass beaded wallpaper products
2. Filter and display specific SKUs from Shopify admin
3. Integrate external content and media
4. Ensure mobile-ready, responsive design
5. Include compliance information for all products
6. Maximum uptime with automated recovery

## Functional Requirements

### 1. Data Integration
**Shopify SKU Filtering:**
- Connect to Shopify Admin API
- Filter products containing keywords:
  - "glass bead"
  - "sequin"
  - "glitter"
- Extract product data: titles, descriptions, images, pricing, inventory
- Real-time or scheduled data synchronization

### 2. Product Information
**Required Fields:**
- Product name and SKU
- High-quality product images
- Detailed descriptions
- Pricing and availability
- **COMPLIANCE:** Class "A" Fire Rated certification status
- Technical specifications
- Application instructions

### 3. Content Integration

**External Content Crawl:**
- Source: https://www.designerwallcoverings.com/search?q=Glass+Beaded+dws&type=article
- Extract relevant articles, blog posts, and educational content
- Integrate into site blog/resources section
- Maintain attribution and links

**Instagram Integration:**
- Source: instagram.com/designerwallcoverings
- Embed video content showcasing products
- Create visual gallery section
- Instagram feed integration for social proof

### 4. SEO Optimization Strategy

**On-Page SEO:**
- Semantic HTML5 structure
- Meta titles and descriptions (unique per page)
- Open Graph tags for social sharing
- Schema.org structured data (Product, Organization, BreadcrumbList)
- Optimized heading hierarchy (H1-H6)
- Alt text for all images
- XML sitemap generation
- Robots.txt configuration

**Technical SEO:**
- Mobile-first responsive design
- Core Web Vitals optimization
- Image lazy loading and WebP format
- Minified CSS/JS
- Server-side rendering (SSR) with Next.js
- Fast page load times (<3s)
- HTTPS/SSL encryption
- Canonical URLs

**Content SEO:**
- Keyword-rich product descriptions
- Long-form educational content
- Internal linking structure
- Blog/resources section with targeted keywords
- FAQ section addressing common queries

### 5. Design & UX

**Mobile-First Design:**
- Responsive breakpoints: 320px, 768px, 1024px, 1440px+
- Touch-friendly navigation
- Optimized images for mobile bandwidth
- Fast mobile load times
- Progressive Web App (PWA) capabilities

**Dark/Light Mode:**
- System preference detection
- Manual toggle option
- Consistent styling across modes

**Key Pages:**
- Homepage with hero section and featured products
- Product listing page with filtering/sorting
- Individual product detail pages
- About/Company information
- Resources/Blog section (integrated crawled content)
- Gallery/Instagram feed
- Contact page

### 6. Infrastructure & Deployment

**Process Management (PM2):**
- Application runs on port 3012
- Process name: `glassbeadedwallpaper`
- Auto-restart on crash: ENABLED
- Auto-restart on freeze (5-minute threshold): ENABLED
- Max memory restart threshold
- Log rotation and monitoring
- Startup script for system boot

**Firewall Configuration:**
- Open incoming connections on port 3012
- HTTPS redirect (443 → 3012 reverse proxy)
- Rate limiting for DDoS protection

**Monitoring:**
- Health check endpoint
- Error logging and alerting
- Uptime monitoring
- Performance metrics

## Technical Architecture

### Frontend
- **Framework:** Next.js 14+ (App Router)
- **Styling:** Tailwind CSS or CSS Modules
- **State Management:** React Context / Zustand
- **Image Optimization:** Next.js Image component
- **Forms:** React Hook Form with validation

### Backend/API
- **API Routes:** Next.js API routes
- **Data Fetching:** Server Components + SWR/React Query
- **Shopify Integration:** Shopify Storefront API / Admin API
- **Content Crawling:** Cheerio/Puppeteer for web scraping
- **Instagram API:** Instagram Basic Display API or oEmbed

### Database (if needed)
- **Option 1:** Shopify as primary data source
- **Option 2:** PostgreSQL/MongoDB for cached data
- **Option 3:** Vercel KV for session/cache data

### Deployment
- **Host:** VPS/Cloud server (running PM2)
- **Alternative:** Vercel with custom domain
- **CDN:** Cloudflare or built-in Next.js CDN
- **SSL:** Let's Encrypt or Cloudflare SSL

## Content Strategy

### Primary Keywords
- Glass beaded wallpaper
- Sequin wallpaper
- Glitter wallcaper
- Luxury wall coverings
- Commercial wallpaper
- Fire rated wallpaper

### Content Pillars
1. Product catalog with detailed specifications
2. Installation guides and tutorials
3. Design inspiration gallery
4. Commercial applications and case studies
5. Fire safety and compliance information

## Compliance & Legal

### Product Compliance
- **Fire Rating:** All products must display Class "A" Fire Rated certification
- Display certification logos/badges
- Link to certification documentation
- Include test reports where applicable

### Website Compliance
- Privacy policy
- Terms of service
- Cookie consent (GDPR/CCPA)
- Accessibility (WCAG 2.1 AA)

## Success Metrics

### Technical KPIs
- 99.9% uptime
- Page load time < 3 seconds
- Mobile performance score > 90 (Lighthouse)
- Zero downtime deployments

### SEO KPIs
- Top 10 ranking for primary keywords within 6 months
- Organic traffic growth 50% month-over-month
- Domain authority increase
- 100+ indexed pages within 3 months

### Business KPIs
- Conversion rate tracking
- Product inquiry form submissions
- Instagram engagement metrics
- Newsletter signups

## Implementation Phases

### Phase 1: Foundation (Week 1)
- [ ] Initialize Next.js project from flockedwallpaper template
- [ ] Set up development environment
- [ ] Configure Shopify API integration
- [ ] Implement basic product data filtering

### Phase 2: Core Features (Week 2)
- [ ] Build product listing and detail pages
- [ ] Implement search and filtering
- [ ] Add Class A Fire Rated compliance information
- [ ] Mobile-responsive design implementation

### Phase 3: Content Integration (Week 3)
- [ ] Web scraping implementation for designerwallcoverings.com
- [ ] Instagram API integration
- [ ] Blog/resources section
- [ ] SEO optimization (meta tags, structured data)

### Phase 4: Deployment & Monitoring (Week 4)
- [ ] PM2 configuration with auto-restart
- [ ] Firewall setup (port 3012)
- [ ] Domain configuration (glassbeadedwallpaper.com)
- [ ] Monitoring and alerting setup
- [ ] Load testing and optimization

### Phase 5: Launch & Iterate
- [ ] Final QA and testing
- [ ] Production launch
- [ ] Monitor performance and errors
- [ ] Iterate based on analytics

## File Structure
```
glassbeadedwallpaper/
├── .next/                  # Next.js build output
├── public/
│   ├── images/
│   ├── favicon.ico
│   └── robots.txt
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   ├── products/
│   │   │   ├── page.tsx
│   │   │   └── [slug]/page.tsx
│   │   ├── gallery/
│   │   ├── resources/
│   │   └── api/
│   │       ├── shopify/
│   │       └── health/
│   ├── components/
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   ├── ProductCard.tsx
│   │   ├── InstagramFeed.tsx
│   │   └── FireRatingBadge.tsx
│   ├── lib/
│   │   ├── shopify.ts
│   │   ├── scraper.ts
│   │   └── instagram.ts
│   ├── styles/
│   └── types/
├── ecosystem.config.js     # PM2 configuration
├── next.config.js
├── package.json
├── tsconfig.json
└── README.md
```

## Environment Variables
```
SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
SHOPIFY_STOREFRONT_ACCESS_TOKEN=xxxxx
SHOPIFY_ADMIN_ACCESS_TOKEN=xxxxx
INSTAGRAM_ACCESS_TOKEN=xxxxx
NEXT_PUBLIC_SITE_URL=https://glassbeadedwallpaper.com
PORT=3012
NODE_ENV=production
```

## Notes
- All product pages MUST include Class "A" Fire Rated certification
- Site must NEVER go down - PM2 configuration is critical
- Mobile experience is priority #1
- SEO optimization must be baked into every page
- Instagram content should be fresh and regularly updated