Pokémon Finder

A simple web application to search for Pokémon information using the PokéAPI. Users can search by typing a Pokémon name or using voice input. The application is built with modern web technologies and containerized using Docker for easy deployment.

Features

Search for Pokémon by name.
Search for Pokémon using voice input (requires browser support for Web Speech API and microphone permission).
Displays Pokémon image, type(s), height, and weight.
Responsive design using Tailwind CSS.
Containerized with Docker for consistent deployment.
Automated build, testing, and deployment script (deploy.sh).

Technologies Used

Frontend: HTML, CSS, JavaScript (ES Modules)
Styling: Tailwind CSS
Build Tool: Vite
API: PokéAPI v2 (via pokedex-promise-v2 library)
Voice Input: Web Speech API
Testing: Playwright (for End-to-End tests)
Containerization: Docker
Deployment Automation: Bash Script (deploy.sh)

Setup and Running Locally (Development)

Prerequisites:
- Node.js (v18 or later recommended) and npm
- Git (optional, for cloning)
Clone the repository (optional):
```
git clone <repository-url>
cd pokemon
```
Install dependencies:
```
npm install
```
Run the development server:
```
npm run dev
```
This will start a local server (usually at http://localhost:5173) with hot module replacement.

Deployment (`deploy.sh`)

The deploy.sh script automates the process of building the application, optionally running tests, and deploying it as a Docker container.

Prerequisites for Deployment:

Docker installed and running.
Your user must have permission to interact with the Docker daemon (usually by being in the docker group - see Docker documentation for setup).
Node.js and npm (for the build and test steps).
Playwright browsers installed (npx playwright install) if running tests.

Why use deploy.sh?

Ensures a consistent build and deployment process.
Stops and removes old containers before starting a new one.
Optionally runs E2E tests against the production build before deploying.
Simplifies the multi-step deployment into a single command.

Usage:

Make the script executable (only needs to be done once):
```
chmod +x deploy.sh
```
Deploy without running tests:
```
./deploy.sh
```
Deploy AND run tests before deployment:
```
./deploy.sh --test
```
or
```
./deploy.sh -t
```
The application will be available at http://localhost:8080 (or the HOST_PORT defined in the script) after successful deployment.

Testing

End-to-End tests are implemented using Playwright and located in the tests/ directory.

Run tests manually:

# Build the app first
npm run build
# Start the preview server
npm run preview &
# Run tests (ensure preview server is running)
npx playwright test
# Stop the preview server manually when done

Run tests as part of deployment: Use the --test or -t flag with the deploy.sh script as described above.

3.2 KiB Raw Permalink Blame History