cd /home/projects

git clone https://github.com/YOUR_USERNAME/YOUR_PROJECT.git
cd YOUR_PROJECT

npm install
pm2 start index.js --name my-app

pip3 install -r requirements.txt
pm2 start app.py --interpreter python3 --name my-app

pm2 list          # What's running?
pm2 logs          # See live logs
pm2 restart all   # Restart everything
pm2 stop my-app   # Stop an app

pm2 logs --err    # See errors
pm2 resurrect    # Restore saved apps

🚀 Dev Playground Server

This is a personal development server for testing and running coding projects. It's configured as a safe playground to deploy projects from GitHub and experiment with new ideas.

📍 Server Details

• IP Address: 45.76.66.214
• OS: Ubuntu 24.04.3 LTS
• Location: /home/projects (main project directory)
• Root Access: Yes (be careful!)

🛠 Installed Software

Core Tools

• Git: Version 2.43.0 (for cloning projects)
• Nginx: Web server/reverse proxy
• Docker: Container platform (pre-installed)
• PM2: Process manager for Node.js apps

Programming Languages

• Node.js: v20.19.5
• npm: 10.8.2
• Python: 3.12.3
• pip: 24.0

Security

• UFW Firewall: Active and configured
• fail2ban: Protecting against brute force attacks
• SSH: Running on port 22

🔥 Firewall Rules (Ports Open)

• 22: SSH access
• 80: HTTP web traffic (redirects to HTTPS)
• 443: HTTPS web traffic (SSL secured)
• 3000-3010: Development servers
• 5000: Internal API endpoint
• 6174: Claude Agent API

Need more ports? Run: sudo ufw allow [port]/tcp

📁 Directory Structure

/home/projects/
├── hello-world/        # Test app showing "Claude's thoughts" (port 3000)
├── docs-site/          # Documentation site (port 3001)
├── claude-agent-server/# Claude Agent API (port 6174)
├── claude-portal/      # Claude Portal UI (port 3002)
├── README.md          # This file
├── CLAUDE.md          # Guide for AI assistants
├── QUICKSTART.md      # Quick setup guide
└── STYLE_GUIDE.md     # Code style guidelines

🚦 Quick Commands

Check Running Apps

pm2 list                 # See all PM2 apps
pm2 logs                 # View app logs
pm2 restart [app-name]   # Restart an app
pm2 stop [app-name]      # Stop an app
pm2 delete [app-name]    # Remove app from PM2

System Status

systemctl status nginx   # Check web server
systemctl status docker  # Check Docker
ufw status              # Check firewall

Deploy a New Project

For Node.js Projects:

cd /home/projects
git clone [your-github-repo-url]
cd [project-name]
npm install
pm2 start index.js --name [project-name]

For Python Projects:

cd /home/projects
git clone [your-github-repo-url]
cd [project-name]
pip3 install -r requirements.txt  # if you have requirements
python3 app.py                    # or use PM2: pm2 start app.py --interpreter python3

🌐 Accessing Your Projects

Via Domain (mili.dev) - HTTPS Secured

• Main Site: https://mili.dev (hello-world app)
• Documentation: https://mili.dev/docs OR https://docs.mili.dev
• Portal UI: https://mili.dev/ui OR https://ui.mili.dev
• API: https://mili.dev/api (Claude Agent API)

Direct Port Access

• Port 3000: Hello World app ("Claude's thoughts")
• Port 3001: Documentation site
• Port 3002: Claude Portal UI
• Port 5000: API endpoint (internal)
• Port 6174: Claude Agent API server

🔧 Common Tasks

Update a Project from GitHub

cd /home/projects/[project-name]
git pull
npm install  # or pip install if Python
pm2 restart [project-name]

View Logs for Debugging

pm2 logs [project-name]     # Real-time logs
pm2 logs [project-name] --lines 100  # Last 100 lines

Set Up Nginx Reverse Proxy (Advanced)

If you want to run a project on port 80 instead of 3000+:

sudo nano /etc/nginx/sites-available/[project-name]
# Add your configuration
sudo ln -s /etc/nginx/sites-available/[project-name] /etc/nginx/sites-enabled/
sudo nginx -t  # Test config
sudo systemctl reload nginx

🆘 Troubleshooting

Port Already in Use?

lsof -i :[port-number]    # See what's using the port
kill -9 [PID]             # Force stop the process

PM2 App Crashing?

pm2 logs [app-name]       # Check error logs
pm2 describe [app-name]   # Detailed info

Out of Disk Space?

df -h                     # Check disk usage
du -sh /home/projects/*   # Check project sizes

📝 Notes for Future Claude Sessions

When helping with this server, know that:

1. The server is primarily for personal dev projects
2. Projects should be deployed to /home/projects/
3. PM2 is the preferred process manager for Node.js apps
4. Ports 3000-3010 are open for development servers
5. The owner is learning, so explain things simply
6. Security basics are set up (firewall, fail2ban)

Current Running Services

• hello-world: Express server displaying "Claude's thoughts" on port 3000 (PM2)
• docs-site: Documentation server on port 3001 (PM2)
• claude-agent-api: Python Flask API on port 6174 (PM2)
• claude-agent-ui: Portal UI on port 3002 (PM2)
• nginx: Web server/reverse proxy with SSL certificates
• docker: Container service (available but not in use yet)

🎯 Next Steps You Might Want

1. Add Domain Name: Point a domain to 45.76.66.214
2. SSL Certificates: Use Let's Encrypt with Certbot
3. Database: Install PostgreSQL or MySQL
4. Monitoring: Set up basic monitoring (htop, netdata)
5. Backups: Configure automated backups
6. CI/CD: Set up GitHub Actions deployment

👤 Owner Notes

Add your personal notes here:

• Favorite projects:
• Things to remember:
• Useful commands you've learned:

---

Last Updated: September 24, 2025
Server Type: Vultr VPS
Purpose: Personal Development Playground

🤖 Claude Assistant Guide

This document is specifically for Claude (or any AI assistant) helping with this server in future sessions.

🎯 Context & Purpose

Owner Profile: Beginner/intermediate developer learning server management
Server Purpose: Personal playground for deploying GitHub projects
Communication Style: Explain things simply, avoid jargon when possible

📋 Pre-Flight Checklist

When starting a new session, quickly check:

# 1. What's currently running?
pm2 list

# 2. Server resources
df -h          # Disk space
free -h        # Memory

# 3. Recent activity
ls -la /home/projects/

# 4. Check services
systemctl status nginx
systemctl status docker

🚀 Common User Requests

"Deploy my GitHub project"

1. Always deploy to /home/projects/
2. Ask for the GitHub URL
3. Check if it's Node.js, Python, or other
4. Use PM2 for Node.js apps
5. Assign a unique port (3001, 3002, etc.)

"My app isn't working"

1. Check PM2 logs first: pm2 logs [app-name]
2. Verify port isn't already taken: lsof -i :[port]
3. Check if dependencies are installed
4. Verify firewall allows the port

"How do I update my project?"

cd /home/projects/[project-name]
git pull
npm install  # or pip install
pm2 restart [project-name]

🛠 Technical Details

System Architecture

Internet → UFW Firewall → Nginx (port 80/443) → Apps (ports 3000+)
                        ↘ Direct access to app ports (3000-3010)

PM2 Ecosystem

• PM2 daemon runs as root
• Apps auto-restart on crash
• Logs stored in: ~/.pm2/logs/
• Config saved in: ~/.pm2/

Available Resources

• CPU: 2 cores
• RAM: 2GB (with 6.2GB swap)
• Disk: 61GB total, ~47GB available
• Network: Public IP 45.76.66.214

🔒 Security Considerations

Already Configured

✅ UFW firewall with specific ports
✅ fail2ban for SSH protection
✅ Root login allowed (owner preference - they're learning)

NOT Yet Configured

❌ SSH key-only authentication
❌ SSL certificates
❌ Separate user accounts
❌ Database access controls

Note: Don't push advanced security unless asked. The owner is learning.

📝 Important File Locations

/home/projects/              # All projects go here
/etc/nginx/sites-available/  # Nginx configs
/etc/ufw/                    # Firewall rules
~/.pm2/logs/                 # PM2 app logs
/var/log/nginx/              # Nginx logs

🎨 Code Style Preferences

When writing code for this server:

• Use simple, readable variable names
• Add comments for complex parts
• Prefer ES6+ for JavaScript
• Use async/await over callbacks
• Create package.json for all Node projects

🚨 Things to Remember

1. Always use PM2 for Node.js apps (not node app.js &)
2. Check firewall before assigning new ports
3. Document changes in project README files
4. Test locally with curl before declaring success
5. Keep it simple - owner is learning

🔧 Useful Aliases to Suggest

If the owner wants shortcuts, suggest adding to ~/.bashrc:

alias pm="pm2"
alias pml="pm2 logs"
alias pmr="pm2 restart"
alias ports="netstat -tulnp | grep LISTEN"
alias projects="cd /home/projects && ls -la"

📊 Monitoring Commands

Quick health checks:

# Overall system
htop  # If installed, or use top

# Network connections
netstat -tulnp | grep LISTEN

# Disk usage
ncdu /home/projects  # If installed, or use du -sh *

# Service logs
journalctl -u nginx -n 50
journalctl -u fail2ban -n 50

🎯 Owner's Learning Path

Based on current setup, logical next steps:

1. Current Level: ✅ Basic deployment working
2. Completed: ✅ Domain name + SSL (mili.dev with Let's Encrypt)
3. Next: Database integration (PostgreSQL/MySQL)
4. Then: Docker containers for isolated environments
5. Later: CI/CD pipelines with GitHub Actions
6. Advanced: Kubernetes orchestration

💡 Quick Fixes

"Port 3000 is already in use"

pm2 list  # See what's using it
pm2 delete [app-name]  # Free it up

"Can't connect to my app"

ufw status  # Check if port is open
ufw allow [port]/tcp  # Open it

"App keeps crashing"

pm2 logs [app-name] --err  # See errors
pm2 describe [app-name]  # Check restart count

📌 Session Handoff Notes

For the next Claude session, note any:

• New projects deployed
• Ports assigned (update if beyond 3010)
• Configuration changes made
• Issues encountered and solutions

---

Remember: The owner chose this server to learn and experiment. Be encouraging, explain what you're doing, and help them understand rather than just fixing things silently.

Philosophy: "Teach them to fish" - explain commands and what they do.

Last Updated: September 23, 2025
Server Uptime: Fresh deployment
Active Projects: hello-world (test project)

Frontend Style Guide

Design Philosophy

Intelligent minimalism. Every element has purpose. Typography does the heavy lifting.

Color Palette

--primary: #000000;
--secondary: #ffffff;
--gray-900: #111111;
--gray-800: #1a1a1a;
--gray-700: #2a2a2a;
--gray-600: #404040;
--gray-500: #666666;
--gray-400: #888888;
--gray-300: #b0b0b0;
--gray-200: #d0d0d0;
--gray-100: #e8e8e8;
--gray-50: #f5f5f5;
--gray-25: #fafafa;

Typography

/* Serif - for headlines, important text */
font-family: 'Crimson Text', 'Georgia', serif;

/* Sans-serif - for body, UI elements */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

/* Monospace - for code, technical details */
font-family: 'JetBrains Mono', 'SF Mono', monospace;

Type Scale

--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */
--text-3xl: 1.875rem;  /* 30px */
--text-4xl: 2.25rem;   /* 36px */
--text-5xl: 3rem;      /* 48px */
--text-6xl: 3.75rem;   /* 60px */

Spacing System

--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-5: 1.25rem;   /* 20px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-10: 2.5rem;   /* 40px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */
--space-20: 5rem;     /* 80px */
--space-24: 6rem;     /* 96px */

Design Principles

1. Generous Whitespace

Space is luxury. Use it liberally.

2. Typography Hierarchy

• Serif for headlines (emotional, sophisticated)
• Sans-serif for body (clean, readable)
• Size and weight create hierarchy, not color

3. Subtle Interactions

• Hover states: slight opacity changes (0.7)
• Transitions: 200ms ease
• No bouncing, sliding, or attention-seeking animations

4. Borders & Dividers

• 1px solid borders only
• Use gray-200 for dividers
• Border-radius: 0 (sharp) or 2px (subtle)

5. Layout

• Max-width containers: 640px (reading), 1200px (full)
• Generous padding: minimum 2rem on mobile, 4rem on desktop
• CSS Grid for layouts, Flexbox for components

Component Patterns

Buttons

.button {
  padding: 0.75rem 1.5rem;
  border: 1px solid black;
  background: white;
  font-family: 'Inter';
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: all 200ms ease;
}

.button:hover {
  background: black;
  color: white;
}

Cards

.card {
  background: white;
  border: 1px solid var(--gray-200);
  padding: 2rem;
  /* No shadows, no border-radius */
}

Typography Examples

h1 {
  font-family: 'Crimson Text';
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

body {
  font-family: 'Inter';
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gray-900);
}

.label {
  font-family: 'Inter';
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

Visual Characteristics

• No gradients (except rare accent moments)
• No shadows (use borders for depth)
• No rounded corners (or max 2px)
• No colors (black, white, grays only)
• Asymmetric layouts welcomed
• Bold type contrasts (light/bold, large/small, serif/sans)

Inspiration References

• Techno-minimalism
• Swiss design principles
• Anthropic's restraint
• High-end design agency portfolio sites
• Academic paper aesthetics
• Modernist typography

Example HTML Structure

<main>
  <header>
    <h1 class="serif-heading">Title</h1>
    <p class="sans-body">Description</p>
  </header>

  <section>
    <div class="label">Section Label</div>
    <h2 class="serif-subheading">Subheading</h2>
    <p class="sans-body">Content</p>
  </section>
</main>

Remember: Restraint is sophistication. When in doubt, remove rather than add.