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

npm install

2. Start Development Environment

Option A: Full Development Environment (with Docker)

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)

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

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

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

# Stop Docker services only
npm run docker:dev:down

🐳 Docker Commands

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

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

# 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

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

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