portfolio/DEV-SETUP.md

# 🚀 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/manage
- **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/manage
- **GitHub**: https://github.com/denniskonkol/portfolio