Add support ticket documentation and relevant attachments

- Created new markdown file for Support Ticket - 3224942 with a link to the support page. - Added a separate markdown file for Supprt Tickets with the same link. - Updated workspace files to include new markdown files and attachments. - Added various attachments related to the support ticket, including images and PDFs.
2026-02-02 13:03:28 -05:00
parent 84f1fcb42a
commit 161b758a1b
44 changed files with 1638 additions and 267 deletions
--- a/code/websites/pokedex.online/README.md
+++ b/code/websites/pokedex.online/README.md
@@ -1,251 +1,16 @@
-# Pokedex Online
+# Pokedex.Online

-A modern Vue 3 web application for exploring comprehensive Pokémon data with advanced search, filtering, and comparison tools. Built with vanilla JavaScript, Vite, and Vue Router.
+Pokedex.Online is a Vue + Vite frontend with a Node/Express backend for tournament and Pokémon tooling. This folder contains the runnable website code. Project documentation lives in docs/projects/Pokedex.Online.

-## 🌟 Status
+## Quick start
+1. Install dependencies in the web root and server folder.
+2. Start the backend server, then run the frontend dev server.

-**✅ Production Ready** - All 106 tests passing, fully functional.
+Common commands:
+- Frontend dev: npm run dev
+- Frontend build: npm run build
+- Backend dev: npm start (from server/)

-See [PROGRESS.md](PROGRESS.md) for detailed development status.
-
-## Features
-
- **Advanced Search** - Find Pokémon by name with autocomplete (optimized with Web Workers)
- **Detailed Info Cards** - Complete stats, moves, abilities, and evolution chains
- **Type Effectiveness** - Interactive matrix showing type matchups
- **Comparison Tool** - Compare multiple Pokémon side-by-side
- **Smart Filtering** - Filter by type, generation, stats, and abilities
- **Dark Mode** - Full theme support with system preference detection
- **Bookmarks** - Save favorite Pokémon for quick access
- **Responsive Design** - Optimized for mobile, tablet, and desktop
- **Fast Performance** - Lazy loading, code splitting, and efficient caching
- **Accessible** - WCAG 2.1 Level AA compliance, keyboard navigation
-
-## 🚀 Quick Start
-
-### Prerequisites
-
- Node.js 18+ 
- npm
-
-### Installation
-
-```bash
-# Install dependencies
-npm install
-
-# Start development server
-npm run dev
-
-# Open browser to http://localhost:5173
-```
-
-### Development Commands
-
-```bash
-# Development with hot reload
-npm run dev
-
-# Production build
-npm run build
-
-# Preview production build
-npm preview
-
-# Run tests
-npm test
-
-# Run tests with UI
-npm run test:ui
-
-# Generate coverage report
-npm run test:coverage
-```
-2. **Option 2: Environment-based** - Create `.env` file (see Environment Setup section below) for CI/CD or shared development
-
-### Environment Setup (Optional)
-
-If you prefer environment variables:
-
-```bash
-# Copy environment template
-cp .env.example .env
-
-# Edit .env with your API keys
-VITE_CHALLONGE_API_KEY=your_api_key_here
-```
-
-**Note**: The API Key Manager tool (`/api-key-manager`) allows you to store your key in browser localStorage, so `.env` configuration is now optional.
-
-```bash
-# Build the app
-npm run build
-
-# Preview production build
-npm run preview
-```
-
-## 🐳 Docker Deployment
-
-```bash
-# Build and run with Docker Compose
-docker-compose up -d
-
-# View logs
-docker-compose logs -f
-
-# Stop services
-docker-compose down
-```
-
-## 📁 Project Structure
-
-```
-src/
-├── components/          # Vue single-file components (.vue)
-│   ├── PokemonCard.vue
-│   ├── SearchBar.vue
-│   ├── TypeMatrix.vue
-│   └── ...
-├── composables/         # Vue 3 Composition API composables
-│   ├── usePokemon.js
-│   ├── useSearch.js
-│   ├── useFeatureFlags.js
-│   └── ...
-├── views/              # Page components
-│   ├── HomeView.vue
-│   ├── PokemonDetailView.vue
-│   └── ...
-├── services/           # API & data services
-│   ├── pokemonService.js
-│   ├── typeService.js
-│   └── ...
-├── utilities/          # Helper functions
-│   ├── formatters.js
-│   ├── validators.js
-│   └── ...
-├── config/             # Application configuration
-│   └── constants.js
-├── directives/         # Custom Vue directives
-│   └── ...
-├── router/             # Vue Router configuration
-│   └── index.js
-├── workers/            # Web Workers
-│   └── search.worker.js
-├── assets/             # Images, fonts, static files
-├── style.css           # Global styles
-├── App.vue             # Root component
-└── main.js             # Application entry point
-
-test/
-├── unit/               # Unit tests
-├── integration/        # Integration tests
-└── e2e/               # End-to-end tests
-```
-
-test/
-├── unit/               # Unit tests
-├── integration/        # Integration tests
-└── e2e/               # End-to-end tests
-```
-
-## 🧪 Testing
-
-Comprehensive test coverage with Vitest:
-
-```bash
-# Run tests once
-npm run test:run
-
-# Run tests in watch mode
-npm test
-
-# Open test UI
-npm run test:ui
-
-# Generate coverage report
-npm run test:coverage
-```
-
-**106 tests** covering:
- Services and utilities (unit tests)
- Component integration
- User workflows
- Edge cases and error handling
-
-## 🛠️ Tech Stack
-
- **Vue 3.4** - Progressive JavaScript framework with Composition API
- **Vue Router 4** - Official routing library for single-page applications
- **Vite 5** - Next-generation build tool with lightning-fast HMR
- **Vitest** - Unit testing framework
- **Vanilla JavaScript** - Latest ECMAScript features (ES2024+)
- **CSS** - Component-scoped styling
- **Web Workers** - Optimized search performance
- **Docker** - Containerization
- **nginx** - Production web server
-
-## 🔍 Key Features Implementation
-
-### Search Optimization
- Web Worker processes search queries without blocking UI
- Indexes all Pokémon data for instant results
- Fuzzy matching for typos and partial names
-
-### Type Effectiveness Matrix
- Interactive table showing all type matchups
- Color-coded effectiveness levels (super effective, not very effective, etc.)
- Sortable and filterable
-
-### State Management
- URL-based state for shareable links
- Browser localStorage for preferences
- Session storage for temporary data
-
-### Performance
- Code splitting for faster initial load
- Lazy loading for images with placeholder
- Service worker caching strategy
- Minified production build (~350KB total)
-
-## 📊 Development Metrics
-
- **Test Coverage**: 106 tests, 100% passing
- **Build Time**: ~620ms
- **Bundle Size**: 257KB (gzipped: 92.6KB)
- **Accessibility**: WCAG 2.1 Level AA
- **Performance**: 95+/100 Lighthouse score
-
-## 🔒 Security
-
- No sensitive data stored in code
- Environment variables for configuration
- Content Security Policy headers
- XSS protection via Vue's template escaping
- CSRF tokens for API requests
-
-## 📚 Documentation
-
- [PROGRESS.md](./PROGRESS.md) - Development status and completion details
- [Vue 3 Docs](https://vuejs.org/)
- [Vue Router Docs](https://router.vuejs.org/)
- [Vite Docs](https://vitejs.dev)
- [Vitest Docs](https://vitest.dev)
-
-## 🤝 Contributing
-
-1. Create a feature branch
-2. Make your changes
-3. Write tests for new functionality
-4. Run `npm test` to verify
-5. Submit a pull request
-
-## 📝 Development Notes
-
-This project demonstrates:
- Modern Vue 3 patterns (Composition API, composables)
- Vanilla JavaScript with latest ECMAScript features
- Performance optimization techniques (Web Workers, code splitting)
- Comprehensive test coverage (106 tests)
- Professional project structure
- Production-ready deployment
+## Documentation
+See the docs hub for setup, deployment, and architecture details:
+- docs/projects/Pokedex.Online/README.md