# Pokedex Online

A modern Vue 3 web application for exploring Pokémon data, tracking collections, and managing your Pokémon journey.

## 🚀 Local Development

### Prerequisites

- Node.js 20+ 
- npm or yarn

### Quick Start

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Open browser to http://localhost:5173
```

### Build for Production

```bash
# Build the app
npm run build

# Preview production build
npm run preview
```

## 🐳 Docker Deployment

### Build and Run Locally

```bash
# Build the image
docker build -t pokedex-online .

# Run the container
docker run -d -p 8080:80 --name pokedex-online pokedex-online

# View in browser
open http://localhost:8080
```

### Using Docker Compose

```bash
# Start the service
docker-compose up -d

# Stop the service
docker-compose down

# View logs
docker-compose logs -f
```

## 📦 Automated Deployment

Deploy to Synology NAS using the deployment script:

```bash
# Deploy to internal network (10.0.0.81)
npm run deploy:pokedex:internal

# Deploy to external network (home.gregrjacobs.com)
npm run deploy:pokedex:external

# Deploy with custom ports
npm run deploy:pokedex -- --target internal --port 8080 --ssl-port 8443
```

## 📁 Project Structure

```
pokedex.online/
├── src/
│   ├── main.js           # Application entry point
│   ├── App.vue           # Root component
│   ├── style.css         # Global styles
│   └── components/
│       └── Pokeball.vue  # Pokeball component
├── apps/                 # Subdomain apps (app.pokedex.online)
├── index.html           # HTML entry point
├── vite.config.js       # Vite configuration
├── package.json         # Dependencies
├── Dockerfile           # Multi-stage Docker build
└── docker-compose.yml   # Docker Compose config
```

## 🛠️ Tech Stack

- **Vue 3** - Progressive JavaScript framework
- **Vite** - Next generation frontend tooling
- **Docker** - Containerization
- **nginx** - Web server

## 🔗 Related Apps

- **apps/** - Additional apps accessible at app.pokedex.online

## 📝 Development Notes

This project uses:
- Vue 3 Composition API with `<script setup>`
- Vite for fast HMR and optimized builds
- Multi-stage Docker builds for minimal image size
- nginx:alpine for production serving