# 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.