voxblog/QUICK_TEST_GUIDE.md

Quick Test Guide - VoxBlog Admin

🚀 Quick Start (5 minutes)

Step 1: Start the Application

# 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

# Check logs
docker-compose logs

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

Can't access http://localhost:3300

# 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

# 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

# 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

# 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:

ifconfig | grep "inet " | grep -v 127.0.0.1

Windows:

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

# 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

# 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)

# 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