update

DEV-SETUP.md

@@ -0,0 +1,239 @@
+# 🚀 Development Environment Setup
+
+This document explains how to set up and use the development environment for the portfolio project.
+
+## ✨ Features
+
+- **Automatic Database Setup**: PostgreSQL and Redis start automatically
+- **Hot Reload**: Next.js development server with hot reload
+- **Database Integration**: Real database integration for email management
+- **Modern Admin Dashboard**: Completely redesigned admin interface
+- **Minimal Setup**: Only essential services for fast development
+
+## 🛠️ Quick Start
+
+### Prerequisites
+
+- Node.js 18+ 
+- Docker & Docker Compose
+- npm or yarn
+
+### 1. Install Dependencies
+
+```bash
+npm install
+```
+
+### 2. Start Development Environment
+
+#### Option A: Full Development Environment (with Docker)
+```bash
+npm run dev
+```
+
+This single command will:
+- Start PostgreSQL database
+- Start Redis cache
+- Start Next.js development server
+- Set up all environment variables
+
+#### Option B: Simple Development Mode (without Docker)
+```bash
+npm run dev:simple
+```
+
+This starts only the Next.js development server without Docker services. Use this if you don't have Docker installed or want a faster startup.
+
+### 3. Access Services
+
+- **Portfolio**: http://localhost:3000
+- **Admin Dashboard**: http://localhost:3000/admin
+- **PostgreSQL**: localhost:5432
+- **Redis**: localhost:6379
+
+## 📧 Email Testing
+
+The development environment supports email functionality:
+
+1. Send emails through the contact form or admin panel
+2. Emails are sent directly (configure SMTP in production)
+3. Check console logs for email debugging
+
+## 🗄️ Database
+
+### Development Database
+
+- **Host**: localhost:5432
+- **Database**: portfolio_dev
+- **User**: portfolio_user
+- **Password**: portfolio_dev_pass
+
+### Database Commands
+
+```bash
+# Generate Prisma client
+npm run db:generate
+
+# Push schema changes
+npm run db:push
+
+# Seed database with sample data
+npm run db:seed
+
+# Open Prisma Studio
+npm run db:studio
+
+# Reset database
+npm run db:reset
+```
+
+## 🎨 Admin Dashboard
+
+The new admin dashboard includes:
+
+- **Overview**: Statistics and recent activity
+- **Projects**: Manage portfolio projects
+- **Emails**: Handle contact form submissions with beautiful templates
+- **Analytics**: View performance metrics
+- **Settings**: Import/export functionality
+
+### Email Templates
+
+Three beautiful email templates are available:
+
+1. **Welcome Template** (Green): Friendly greeting with portfolio links
+2. **Project Template** (Purple): Professional project discussion response
+3. **Quick Template** (Orange): Fast acknowledgment response
+
+## 🔧 Environment Variables
+
+Create a `.env.local` file:
+
+```env
+# Development Database
+DATABASE_URL="postgresql://portfolio_user:portfolio_dev_pass@localhost:5432/portfolio_dev?schema=public"
+
+# Redis
+REDIS_URL="redis://localhost:6379"
+
+# Email (for production)
+MY_EMAIL=contact@dk0.dev
+MY_PASSWORD=your-email-password
+
+# Application
+NEXT_PUBLIC_BASE_URL=http://localhost:3000
+NODE_ENV=development
+```
+
+## 🛑 Stopping the Environment
+
+Use Ctrl+C to stop all services, or:
+
+```bash
+# Stop Docker services only
+npm run docker:dev:down
+```
+
+## 🐳 Docker Commands
+
+```bash
+# Start only database services
+npm run docker:dev
+
+# Stop database services
+npm run docker:dev:down
+
+# View logs
+docker compose -f docker-compose.dev.minimal.yml logs -f
+```
+
+## 📁 Project Structure
+
+```
+├── docker-compose.dev.minimal.yml  # Minimal development services
+├── scripts/
+│   ├── dev-minimal.js       # Main development script
+│   ├── dev-simple.js        # Simple development script
+│   ├── setup-database.js    # Database setup script
+│   └── init-db.sql          # Database initialization
+├── app/
+│   ├── admin/               # Admin dashboard
+│   ├── api/
+│   │   ├── contacts/        # Contact management API
+│   │   └── email/           # Email sending API
+│   └── components/
+│       ├── ModernAdminDashboard.tsx
+│       ├── EmailManager.tsx
+│       └── EmailResponder.tsx
+└── prisma/
+    └── schema.prisma        # Database schema
+```
+
+## 🚨 Troubleshooting
+
+### Docker Compose Not Found
+
+If you get the error `spawn docker compose ENOENT`:
+
+```bash
+# Try the simple dev mode instead
+npm run dev:simple
+
+# Or install Docker Desktop
+# Download from: https://www.docker.com/products/docker-desktop
+```
+
+### Port Conflicts
+
+If ports are already in use:
+
+```bash
+# Check what's using the ports
+lsof -i :3000
+lsof -i :5432
+lsof -i :6379
+
+# Kill processes if needed
+kill -9 <PID>
+```
+
+### Database Connection Issues
+
+```bash
+# Restart database services
+npm run docker:dev:down
+npm run docker:dev
+
+# Check database status
+docker compose -f docker-compose.dev.minimal.yml ps
+```
+
+### Email Not Working
+
+1. Verify environment variables
+2. Check browser console for errors
+3. Ensure SMTP is configured for production
+
+## 🎯 Production Deployment
+
+For production deployment, use:
+
+```bash
+npm run build
+npm run start
+```
+
+The production environment uses the production Docker Compose configuration.
+
+## 📝 Notes
+
+- The development environment automatically creates sample data
+- Database changes are persisted in Docker volumes
+- Hot reload works for all components and API routes
+- Minimal setup for fast development startup
+
+## 🔗 Links
+
+- **Portfolio**: https://dk0.dev
+- **Admin**: https://dk0.dev/admin
+- **GitHub**: https://github.com/denniskonkol/portfolio