docs: add comprehensive database and testing documentation

- Created DATABASE_SETUP.md with detailed MySQL setup, troubleshooting, and maintenance guides
- Added QUICK_TEST_GUIDE.md with step-by-step testing procedures for mobile responsiveness, image uploads, content statistics, and full workflow
- Included troubleshooting sections in both guides with common issues and solutions
- Added environment variable documentation and database schema details
- Documented backup/restore procedures and verification steps for
This commit is contained in:
Ender 2025-10-26 23:21:34 +01:00
parent 2c5c685662
commit 5ec4438bce
7 changed files with 891 additions and 2 deletions

193
DATABASE_SETUP.md Normal file
View File

@ -0,0 +1,193 @@
# Database Setup & Troubleshooting
## Initial Setup
When starting VoxBlog for the first time or after resetting the database, you need to run migrations.
### Quick Setup
```bash
# 1. Start containers
docker-compose up -d --build
# 2. Wait for MySQL to be healthy (about 30 seconds)
docker-compose ps
# 3. Run migrations
docker exec voxblog-api sh -c "cd /app/apps/api && pnpm drizzle:migrate"
# 4. Verify tables were created
docker exec voxblog-mysql mysql -u voxblog -pvoxblogAppPass123! voxblog -e "SHOW TABLES;"
```
Expected output:
```
Tables_in_voxblog
__drizzle_migrations
audio_clips
posts
settings
```
## Common Issues
### 1. Access Denied Error
**Error**: `Access denied for user 'voxblog'@'172.20.0.3' (using password: YES)`
**Cause**: MySQL container was created with old/different passwords
**Solution**: Reset the database volume and restart
```bash
docker-compose down -v
docker-compose up -d --build
# Wait 30 seconds for MySQL to initialize
docker exec voxblog-api sh -c "cd /app/apps/api && pnpm drizzle:migrate"
```
### 2. Tables Don't Exist
**Error**: `Table 'voxblog.posts' doesn't exist`
**Cause**: Migrations haven't been run
**Solution**: Run migrations
```bash
docker exec voxblog-api sh -c "cd /app/apps/api && pnpm drizzle:migrate"
```
### 3. MySQL Container Not Healthy
**Error**: API can't connect to database
**Solution**: Check MySQL logs and wait for it to be healthy
```bash
docker-compose logs mysql
docker-compose ps # Check if mysql is "healthy"
```
## Database Schema
The application uses Drizzle ORM with MySQL. Schema is defined in:
- `apps/api/src/db/schema.ts`
### Tables
1. **posts** - Blog posts with metadata
- id, title, content_html, tags_text, feature_image
- canonical_url, prompt, status
- ghost_post_id, ghost_slug, ghost_published_at, ghost_url
- selected_image_keys, generated_draft, image_placeholders
- version, created_at, updated_at
2. **audio_clips** - Audio recordings for posts
- id, post_id, bucket, object_key, mime
- transcript, duration_ms, created_at
3. **settings** - Application settings
- id, key, value, updated_at
## Migrations
### Location
- Migration files: `apps/api/drizzle/`
- Config: `apps/api/drizzle.config.ts`
### Commands
```bash
# Generate new migration (after schema changes)
docker exec voxblog-api sh -c "cd /app/apps/api && pnpm drizzle:generate"
# Run migrations
docker exec voxblog-api sh -c "cd /app/apps/api && pnpm drizzle:migrate"
```
## Environment Variables
Database connection uses these variables from `.env`:
```env
# MySQL Root
MYSQL_ROOT_PASSWORD=voxblogRootPass123!
# Application User
MYSQL_PASSWORD=voxblogAppPass123!
DB_HOST=mysql
DB_PORT=3306
DB_USER=voxblog
DB_PASSWORD=voxblogAppPass123!
DB_NAME=voxblog
```
**Important**: If you change these values, you must recreate the MySQL container:
```bash
docker-compose down -v
docker-compose up -d --build
```
## Backup & Restore
### Backup
```bash
# Backup all data
docker exec voxblog-mysql mysqldump -u voxblog -pvoxblogAppPass123! voxblog > backup.sql
# Backup specific table
docker exec voxblog-mysql mysqldump -u voxblog -pvoxblogAppPass123! voxblog posts > posts_backup.sql
```
### Restore
```bash
# Restore from backup
docker exec -i voxblog-mysql mysql -u voxblog -pvoxblogAppPass123! voxblog < backup.sql
```
## Reset Database
**WARNING: This deletes all data!**
```bash
# Complete reset
docker-compose down -v
docker-compose up -d --build
# Wait for MySQL to be healthy
sleep 30
# Run migrations
docker exec voxblog-api sh -c "cd /app/apps/api && pnpm drizzle:migrate"
```
## Verify Database
```bash
# Check if containers are running
docker-compose ps
# Check MySQL is healthy
docker-compose ps mysql
# List tables
docker exec voxblog-mysql mysql -u voxblog -pvoxblogAppPass123! voxblog -e "SHOW TABLES;"
# Count posts
docker exec voxblog-mysql mysql -u voxblog -pvoxblogAppPass123! voxblog -e "SELECT COUNT(*) FROM posts;"
# Check migrations
docker exec voxblog-mysql mysql -u voxblog -pvoxblogAppPass123! voxblog -e "SELECT * FROM __drizzle_migrations;"
```
## Troubleshooting Checklist
- [ ] MySQL container is running and healthy
- [ ] Environment variables are correct in `.env`
- [ ] Migrations have been run
- [ ] Tables exist in database
- [ ] API can connect to database (check logs)
---
**Last Updated**: 2025-10-26

405
QUICK_TEST_GUIDE.md Normal file
View File

@ -0,0 +1,405 @@
# 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

132
TEST_README.md Normal file
View File

@ -0,0 +1,132 @@
# 🧪 Testing VoxBlog - Super Quick Guide
## One-Command Test
```bash
./test.sh
```
This script will:
- ✅ Check Docker is running
- ✅ Stop old containers
- ✅ Build and start everything
- ✅ Show you the URLs to access
- ✅ Offer to open browser automatically
## Manual Test (3 commands)
```bash
# 1. Start everything
docker-compose up -d --build
# 2. Open browser
open http://localhost:3300 # Mac
# or visit http://localhost:3300 manually
# 3. Login with password
# P!JfChRiaA2Gdnm6iIo8
```
## What to Test
### 1. Mobile Upload Feature (NEW! 📸)
1. Go to any post → Assets step
2. Click "Upload Images" button
3. Select photos from your computer/phone
4. ✅ Photos upload and appear in grid
**On phone**: Tap "Upload Images" → Choose camera or gallery
### 2. Content Statistics (NEW! 📊)
1. Go to Generate step
2. Write a prompt: "Write a 500-word article about meditation"
3. Click "Generate Draft"
4. ✅ Watch live stats update during generation
5. ✅ See detailed stats after completion
### 3. Mobile Responsiveness (NEW! 📱)
1. Resize browser to 375px width (or use phone)
2. ✅ Everything should work and look good
3. ✅ Buttons wrap, sidebar stacks, stepper scrolls
## Test on Your Phone
1. **Find your computer's IP**:
```bash
ifconfig | grep "inet " | grep -v 127.0.0.1
```
Example output: `192.168.1.100`
2. **Connect phone to same WiFi**
3. **Open on phone**: `http://192.168.1.100:3300`
4. **Test mobile features**:
- Upload photos from camera
- Generate content
- View statistics
- Navigate all steps
## Quick Commands
```bash
# Start
docker-compose up -d
# Stop
docker-compose down
# View logs
docker-compose logs -f
# Restart admin only
docker-compose restart admin
# Rebuild admin only
docker-compose up -d --build admin
# Reset everything (deletes data!)
docker-compose down -v
docker-compose up -d --build
```
## URLs
- **Admin**: http://localhost:3300
- **API**: http://localhost:3000
- **Mobile**: http://YOUR_IP:3300
## Login
Password: `P!JfChRiaA2Gdnm6iIo8`
## Troubleshooting
**Can't access localhost:3300?**
```bash
docker-compose logs admin
docker-compose restart admin
```
**Images won't upload?**
```bash
docker-compose logs api
# Check S3 credentials in .env
```
**AI generation fails?**
```bash
docker-compose logs api
# Check OPENAI_API_KEY in .env
```
## Full Documentation
- 📖 **QUICK_TEST_GUIDE.md** - Detailed testing guide
- 📱 **MOBILE_COMPATIBILITY.md** - Mobile features
- 📊 **CONTENT_STATISTICS_SUMMARY.md** - Statistics feature
- 🚀 **DEPLOYMENT_GUIDE.md** - Production deployment
---
**That's it! Start with `./test.sh` and you're ready to go! 🚀**

View File

@ -62,7 +62,7 @@ services:
context: .
dockerfile: docker/admin.Dockerfile
args:
VITE_API_URL: ${VITE_API_URL:-http://localhost:3301}
VITE_API_URL: ${VITE_API_URL:-}
PNPM_FLAGS: --no-frozen-lockfile
container_name: voxblog-admin
restart: unless-stopped

View File

@ -3,7 +3,7 @@ FROM node:20-alpine AS builder
WORKDIR /app
# Build args
ARG VITE_API_URL=http://localhost:3301
ARG VITE_API_URL=
ARG PNPM_FLAGS=--frozen-lockfile
# Copy workspace files

View File

@ -10,6 +10,24 @@ server {
gzip_min_length 1024;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
# Proxy API requests to the API container
location /api/ {
proxy_pass http://voxblog-api:3301;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
# Increase timeouts for long-running requests (AI generation)
proxy_connect_timeout 600s;
proxy_send_timeout 600s;
proxy_read_timeout 600s;
}
# SPA routing - all routes go to index.html
location / {
try_files $uri $uri/ /index.html;

141
test.sh Executable file
View File

@ -0,0 +1,141 @@
#!/bin/bash
# VoxBlog Quick Test Script
# This script helps you quickly test the application
set -e
echo "🚀 VoxBlog Quick Test Script"
echo "=============================="
echo ""
# Colors
GREEN='\033[0;32m'
BLUE='\033[0;34m'
YELLOW='\033[1;33m'
RED='\033[0;31m'
NC='\033[0m' # No Color
# Function to print colored output
print_step() {
echo -e "${BLUE}${NC} $1"
}
print_success() {
echo -e "${GREEN}${NC} $1"
}
print_warning() {
echo -e "${YELLOW}${NC} $1"
}
print_error() {
echo -e "${RED}${NC} $1"
}
# Check if Docker is running
print_step "Checking Docker..."
if ! docker info > /dev/null 2>&1; then
print_error "Docker is not running. Please start Docker Desktop."
exit 1
fi
print_success "Docker is running"
# Check if docker-compose is available
print_step "Checking docker-compose..."
if ! command -v docker-compose &> /dev/null; then
print_error "docker-compose not found. Please install docker-compose."
exit 1
fi
print_success "docker-compose is available"
# Stop existing containers
print_step "Stopping existing containers..."
docker-compose down > /dev/null 2>&1 || true
print_success "Containers stopped"
# Build and start containers
print_step "Building and starting containers (this may take a few minutes)..."
if docker-compose up -d --build; then
print_success "Containers started successfully"
else
print_error "Failed to start containers"
exit 1
fi
# Wait for services to be ready
print_step "Waiting for services to be ready..."
sleep 5
# Check container status
print_step "Checking container status..."
if docker-compose ps | grep -q "Up"; then
print_success "All containers are running"
else
print_error "Some containers failed to start"
docker-compose ps
exit 1
fi
# Get local IP address
print_step "Finding your local IP address..."
if [[ "$OSTYPE" == "darwin"* ]]; then
# macOS
LOCAL_IP=$(ifconfig | grep "inet " | grep -v 127.0.0.1 | awk '{print $2}' | head -n 1)
elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
# Linux
LOCAL_IP=$(hostname -I | awk '{print $1}')
else
# Windows (Git Bash)
LOCAL_IP=$(ipconfig | grep "IPv4" | awk '{print $NF}' | head -n 1)
fi
echo ""
echo "=============================="
echo -e "${GREEN}✓ Application is ready!${NC}"
echo "=============================="
echo ""
echo "📱 Access URLs:"
echo " Desktop: http://localhost:3300"
echo " Mobile: http://${LOCAL_IP}:3300"
echo ""
echo "🔑 Login Password: P!JfChRiaA2Gdnm6iIo8"
echo ""
echo "📋 Quick Test Checklist:"
echo " 1. Open http://localhost:3300 in your browser"
echo " 2. Login with the password above"
echo " 3. Create a new post"
echo " 4. Upload some images (test mobile upload feature)"
echo " 5. Generate content with AI (watch live statistics)"
echo " 6. Test mobile view (resize browser or use phone)"
echo ""
echo "📱 Mobile Testing:"
echo " 1. Connect your phone to the same WiFi"
echo " 2. Open http://${LOCAL_IP}:3300 on your phone"
echo " 3. Test image upload from camera/gallery"
echo ""
echo "🔍 View Logs:"
echo " docker-compose logs -f"
echo ""
echo "🛑 Stop Application:"
echo " docker-compose down"
echo ""
echo "📖 Full Test Guide:"
echo " See QUICK_TEST_GUIDE.md"
echo ""
# Offer to open browser
read -p "Open browser now? (y/n) " -n 1 -r
echo
if [[ $REPLY =~ ^[Yy]$ ]]; then
if [[ "$OSTYPE" == "darwin"* ]]; then
open http://localhost:3300
elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
xdg-open http://localhost:3300 2>/dev/null || echo "Please open http://localhost:3300 manually"
else
start http://localhost:3300 2>/dev/null || echo "Please open http://localhost:3300 manually"
fi
fi
echo ""
print_success "Happy testing! 🚀"