puffin-app/README.md

# Puffin Offset - Carbon Offsetting for Yachts

This application helps users calculate and offset the carbon footprint of yachts through verified carbon offset projects.

## Features

- Carbon footprint calculation for yacht trips
- Integration with Wren carbon offset projects
- Responsive UI for mobile and desktop
- Contact forms powered by Formspree

## Setup

### Local Development

1. Install dependencies:
```bash
npm install
```

2. Create a `.env` file with your API tokens:
```
VITE_WREN_API_TOKEN=your-token-here
VITE_FORMSPREE_CONTACT_ID=your-formspree-contact-form-id
VITE_FORMSPREE_OFFSET_ID=your-formspree-offset-form-id
```

3. Run the development server:
```bash
npm run dev
```

## Docker Setup

This project can be run in Docker containers using Docker Compose, and is configured to work with an Nginx reverse proxy on the host.

### Prerequisites

- Docker
- Docker Compose
- Nginx (on the host system for SSL termination and reverse proxying)

### Running with Docker Compose

1. Build and start the containers:
```bash
docker compose up -d
```

2. The Docker container will listen on port 3800, which should be reverse-proxied by your host Nginx.

3. Stop the containers:
```bash
docker compose down
```

### Nginx Configuration

The project includes two Nginx configuration files:

1. `nginx.conf`: Used INSIDE the Docker container to serve the static files on port 3800
2. `nginx-host.conf`: A reference config for setting up your Nginx on the HOST to reverse proxy to the Docker container

To set up the host Nginx:

1. Copy the nginx-host.conf to your Nginx sites directory:
```bash
sudo cp nginx-host.conf /etc/nginx/sites-available/puffinoffset.com
sudo ln -s /etc/nginx/sites-available/puffinoffset.com /etc/nginx/sites-enabled/
```

2. Uncomment the SSL certificate lines after you've obtained certificates using Certbot or another SSL provider
3. Test and reload Nginx:
```bash
sudo nginx -t
sudo systemctl reload nginx
```

### Environment Variables

When using Docker, the environment variables are mounted as a volume from your local `.env` file. Make sure it contains:

```
VITE_WREN_API_TOKEN=your-token-here
VITE_FORMSPREE_CONTACT_ID=your-formspree-contact-form-id
VITE_FORMSPREE_OFFSET_ID=your-formspree-offset-form-id
```

### Backend Service (Optional)

The docker-compose file includes a commented section for running the backend script (app.js) in a separate container. To enable it:

1. Uncomment the `backend` service in `docker-compose.yml`
2. Ensure your `.env` file contains the needed variables
3. Run `docker compose up -d` to start both services

## API Documentation

For Wren API documentation, visit: https://wren.co/api

## Building for Production

```bash
# Without Docker
npm run build

# With Docker
docker compose build
```

The production build will be available in the `dist` directory, or served by Nginx in the Docker container.