voxblog/QUICK_TEST_GUIDE.md

# Quick Test Guide - VoxBlog Admin

## 🚀 Quick Start (5 minutes)

### Step 1: Start the Application

```bash
# From the project root
cd /Users/enderyildirim/dev/sideprojects/voxblog

# Rebuild and start (first time or after code changes)
docker-compose up -d --build

# Or just start (if already built)
docker-compose up -d

# Check if containers are running
docker-compose ps
```

**Expected output**: All containers should be "Up"
- `voxblog-mysql`
- `voxblog-api`
- `voxblog-admin`

### Step 2: Access the Admin Interface

Open in your browser:
```
http://localhost:3300
```

**Login credentials** (from your .env):
- Password: `P!JfChRiaA2Gdnm6iIo8`

---

## 📱 Test 1: Mobile Responsiveness (2 minutes)

### Desktop View
1. Open http://localhost:3300 in Chrome/Firefox
2. Login with password
3. You should see the Posts list

### Mobile View
1. Press `F12` to open DevTools
2. Press `Ctrl+Shift+M` (Windows) or `Cmd+Shift+M` (Mac) for device toolbar
3. Select "iPhone SE" or "iPhone 12 Pro" from dropdown
4. Test these views:

**Posts List**:
- ✅ Header wraps (title on top, buttons below)
- ✅ Search and "New Post" button wrap
- ✅ Grid scrolls horizontally if needed

**Create New Post**:
- ✅ Top bar buttons wrap
- ✅ Sidebar stacks above content (not side-by-side)
- ✅ Stepper scrolls horizontally
- ✅ Step navigation buttons wrap

**Assets Step**:
- ✅ Media library toolbar wraps
- ✅ "Upload Images" button visible
- ✅ Grid shows smaller thumbnails (150px)

---

## 📸 Test 2: Mobile Image Upload (3 minutes)

### On Desktop (simulating mobile)
1. Go to any post (or create new)
2. Navigate to **Assets** step
3. Scroll to **Content Images** section
4. Click **"Upload Images"** button
5. Select one or more images from your computer
6. Wait for upload
7. ✅ Images should appear in the grid
8. ✅ Upload button shows "Uploading X..." during upload

### On Real Mobile Device
1. Open http://YOUR_IP:3300 on your phone
   - Find your IP: `ifconfig` (Mac/Linux) or `ipconfig` (Windows)
   - Example: http://192.168.1.100:3300
2. Login
3. Create/open a post
4. Go to Assets step
5. Tap "Upload Images"
6. Choose "Take Photo" or "Photo Library"
7. Select/take photos
8. ✅ Photos upload and appear in grid

---

## 📊 Test 3: Content Statistics (5 minutes)

### Generate Content with Statistics

1. **Create a new post** or open existing
2. **Go to Generate step**
3. **Add some context** (optional):
   - Record audio in Assets step, or
   - Select some images, or
   - Just write a prompt

4. **Write an AI prompt**:
   ```
   Write a comprehensive article about the benefits of meditation.
   Include an introduction, 3-4 main sections with headings,
   and a conclusion. Target length: 800-1000 words.
   ```

5. **Enable streaming** (checkbox should be checked)
6. **Click "Generate Draft"**

### Watch Live Statistics
While content is generating:
- ✅ See "Live Generation" section expand
- ✅ Content appears in real-time
- ✅ **Live Stats** appear below content:
  ```
  📊 Live Stats: 342 words • 2 min • 1,234 tokens • 8 paragraphs
  ```
- ✅ Stats update as content grows

### View Detailed Statistics
After generation completes:
- ✅ "Generated Draft" section shows
- ✅ **Content Statistics** panel appears with grid:
  - 📝 Words
  - ⏱️ Reading Time
  - 🔤 Characters
  - 📄 Paragraphs
  - 📑 Headings
  - 📋 List Items
  - 🤖 Tokens
  - 🖼️ Images (if any)
  - 🔗 Links (if any)
  - ⚡ Generation Time
  - 📊 Avg Words/Paragraph
  - 📏 Avg Words/Sentence

### Test Different Content Types

**Short content** (test with prompt):
```
Write a 200-word introduction to TypeScript.
```
- ✅ Stats should show ~200 words, < 1 min reading time

**Long content** (test with prompt):
```
Write a comprehensive 2000-word guide to Docker containers.
Include multiple sections, code examples, and lists.
```
- ✅ Stats should show ~2000 words, ~9 min reading time
- ✅ Multiple headings and list items counted

**Content with structure** (test with prompt):
```
Write an article with exactly 5 H2 headings, 3 bullet lists,
and 2 numbered lists. Include 5 external links.
```
- ✅ Verify heading count = 5
- ✅ Verify list items counted correctly
- ✅ Verify link count = 5

---

## 🔍 Test 4: Complete Workflow (10 minutes)

### Full Post Creation Flow

1. **Login** → http://localhost:3300

2. **Create New Post**
   - Click "New Post" button
   - ✅ Editor opens with stepper

3. **Assets Step**
   - **Upload images**: Click "Upload Images", select 2-3 images
   - **Record audio** (optional): Click "Start", speak for 10 seconds, click "Stop"
   - ✅ Images appear in grid
   - ✅ Audio clip appears with waveform

4. **AI Prompt Step**
   - Write a prompt:
     ```
     Write a 500-word article about the uploaded images.
     Describe what you see and create an engaging story.
     ```
   - Click "Next"

5. **Generate Step**
   - **Select images**: Toggle 2-3 images as "Content Images"
   - **Review prompt**: Should show your prompt
   - **Enable streaming**: Check the checkbox
   - **Click "Generate Draft"**
   - ✅ Watch live stats update
   - ✅ See content stream in real-time
   - ✅ View detailed stats after completion

6. **Edit Step**
   - ✅ Content loads in rich editor
   - Make some edits if you want
   - Press `Ctrl+S` or `Cmd+S` to save
   - ✅ "Saved" indicator appears

7. **Metadata Step**
   - Click "Generate Metadata with AI"
   - ✅ Title, tags, canonical URL auto-filled
   - Set a feature image (select from uploaded images)

8. **Publish Step**
   - Click "Refresh Preview"
   - ✅ Preview shows with proper formatting
   - Click "Save Draft to Ghost" (if Ghost is configured)
   - ✅ Success message appears

---

## 🐛 Troubleshooting

### Containers won't start
```bash
# Check logs
docker-compose logs

# Restart everything
docker-compose down
docker-compose up -d --build
```

### Can't access http://localhost:3300
```bash
# Check if admin container is running
docker-compose ps

# Check admin logs
docker-compose logs admin

# Verify port is not in use
lsof -i :3300  # Mac/Linux
netstat -ano | findstr :3300  # Windows
```

### Images won't upload
```bash
# Check API logs
docker-compose logs api

# Verify S3 credentials in .env
# Check S3_BUCKET, S3_REGION, S3_ACCESS_KEY, S3_SECRET_KEY
```

### AI generation fails
```bash
# Check API logs
docker-compose logs api

# Verify OpenAI API key in .env
echo $OPENAI_API_KEY

# Test API key manually
curl https://api.openai.com/v1/models \
  -H "Authorization: Bearer YOUR_KEY"
```

### Statistics not showing
```bash
# Rebuild admin container
docker-compose up -d --build admin

# Clear browser cache
# Hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
```

---

## 📱 Mobile Testing on Real Device

### Find Your Computer's IP Address

**Mac/Linux**:
```bash
ifconfig | grep "inet " | grep -v 127.0.0.1
```

**Windows**:
```bash
ipconfig
```

Look for "IPv4 Address" (usually 192.168.x.x)

### Access from Phone

1. **Connect phone to same WiFi** as your computer
2. **Open browser** on phone
3. **Navigate to**: http://YOUR_IP:3300
   - Example: http://192.168.1.100:3300
4. **Login** with password
5. **Test all features**:
   - ✅ Mobile layout works
   - ✅ Can upload photos from camera
   - ✅ Can record audio
   - ✅ Can generate content
   - ✅ Statistics display properly
   - ✅ All buttons accessible

---

## ✅ Quick Checklist

Use this checklist for rapid testing:

### Mobile Responsiveness
- [ ] Posts list wraps on mobile
- [ ] Editor sidebar stacks on mobile
- [ ] Stepper scrolls horizontally
- [ ] All buttons accessible on mobile
- [ ] Media library grid adapts

### Image Upload
- [ ] Upload button visible
- [ ] Can select multiple images
- [ ] Upload progress shows
- [ ] Images appear in grid after upload
- [ ] Works on mobile device

### Content Statistics
- [ ] Live stats show during streaming
- [ ] Stats update in real-time
- [ ] Detailed stats show after generation
- [ ] All metrics display correctly
- [ ] Grid responsive on mobile
- [ ] Generation time tracked

### Full Workflow
- [ ] Can create new post
- [ ] Can upload assets
- [ ] Can generate content
- [ ] Can edit content
- [ ] Can set metadata
- [ ] Can preview and publish

---

## 🎯 Performance Benchmarks

Expected performance:

- **Image upload**: < 5 seconds per image
- **Audio recording**: Real-time, no lag
- **Content generation**: 30-60 seconds for 1000 words
- **Statistics calculation**: < 50ms
- **Page load**: < 2 seconds
- **Mobile responsiveness**: Instant layout changes

---

## 📞 Need Help?

### Check Logs
```bash
# All logs
docker-compose logs

# Specific service
docker-compose logs admin
docker-compose logs api
docker-compose logs mysql

# Follow logs in real-time
docker-compose logs -f
```

### Restart Services
```bash
# Restart specific service
docker-compose restart admin

# Restart everything
docker-compose restart

# Full rebuild
docker-compose down
docker-compose up -d --build
```

### Reset Database (if needed)
```bash
# WARNING: This deletes all data!
docker-compose down -v
docker-compose up -d --build
```

---

**Happy Testing! 🚀**

For detailed documentation, see:
- `MOBILE_COMPATIBILITY.md` - Mobile features
- `CONTENT_STATISTICS_SUMMARY.md` - Statistics feature
- `DEPLOYMENT_GUIDE.md` - Full deployment guide