📸 Flickr Photos - Public Gallery Viewer

A Vue 3 application for exploring public Flickr photography. Search for a Flickr username to browse their public gallery, or discover recent public uploads with filters for dates, titles, publishers, tags, and safe content.

---

✨ Features

• Public galleries resolved from Flickr usernames
• Recent public photo stream with incremental loading
• Date range, title, publisher, tag, and safe-content filters
• Photo details and links to the original Flickr pages
• Responsive interface with custom Flickr-inspired styling
• Netlify Function API proxy that keeps the Flickr API key on the server

---

🏗️ Architecture

The Vue frontend communicates with a same-origin Flickr API proxy instead of accessing the Flickr API directly. In production, Netlify routes /api/flickr to a native Netlify Function that validates supported Flickr methods, injects the private API key, and returns the upstream response.

Production uses a single Netlify deployment surface:

• The frontend is built by Netlify with yarn build
• The API proxy runs as a Netlify Function in the same site
• VITE_API_BASE_URL remains available as an explicit rollback or alternate environment override
• Docker Compose remains available for local development

---

📦 Technology

• 🟢 Vue 3 and Vue Router
• ⚡ Vite
• 📅 Vue Datepicker
• 🎨 Bootstrap and Less
• 🌐 Express
• ▲ Netlify Functions
• 🐳 Docker and Docker Compose

---

📁 Project Structure

.
├── app/
│   ├── middleware/          # Express proxy for the Flickr API
│   ├── netlify/functions/   # Netlify Function proxy for production
│   ├── public/              # Static assets
│   ├── src/
│   │   ├── api/             # Frontend API client
│   │   ├── components/      # Reusable Vue components
│   │   ├── composables/     # Shared reactive behavior
│   │   ├── utils/           # Date and photo helpers
│   │   └── views/           # Route-level views
│   ├── netlify.toml         # Netlify redirects and security headers
│   ├── package.json
│   └── vite.config.js
├── Dockerfile
└── docker-compose.yaml

---

🚀 Local Development

Docker and Docker Compose are required for the containerized environment:

docker compose up --build

The frontend is served at http://localhost:2469. The local API wrapper remains available at http://localhost:3000/api/flickr, and Vite proxies browser /api requests to it during local development.

The application can also run directly from the app directory after its dependencies are installed:

yarn dev

Available commands:

yarn dev         Start Vite and the local API wrapper
yarn dev:vite    Start only the Vite development server
yarn dev:api     Start only the local API wrapper
yarn build       Create the production frontend bundle
yarn preview     Preview the production frontend bundle
yarn start       Start only the local API wrapper
yarn test:unit   Run Vitest unit tests
yarn test:e2e    Run Cypress end-to-end tests

Validation

Run validation from the containerized environment to match the documented local runtime:

docker compose up -d --build
docker compose exec -T app yarn audit --groups dependencies --groups devDependencies
docker compose exec -T app yarn test:unit
docker compose exec -T app yarn build
docker compose --profile test run --rm e2e
docker compose logs --no-color --tail 160 app

Cypress uses deterministic fixtures and intercepted Flickr proxy responses for repeatable regression coverage. Unit tests cover the shared proxy behavior used by the Netlify Function and the local API wrapper without calling live Flickr.

---

⚙️ Configuration

The API proxy requires a Flickr API key in the server-side runtime environment:

API_KEY=your_flickr_api_key

Optional configuration:

ALLOWED_ORIGINS=https://your-frontend.example
VITE_API_BASE_URL=https://your-api.example/api

ALLOWED_ORIGINS configures the local API wrapper CORS allowlist. VITE_API_BASE_URL overrides the frontend API endpoint at build time and should only be used for rollback or alternate environments. Do not put API_KEY or any Flickr secret in VITE_* variables because Vite exposes those values to the browser bundle.

For Netlify production, configure API_KEY in the Netlify site environment. The Netlify Function uses ordinary request-triggered Functions, redirects, headers, and environment variables only. It does not require paid Netlify features, paid add-ons, databases, blob storage, AI features, background jobs, scheduled jobs, custom deployment options, or auto-recharge. Keep auto-recharge disabled for zero-cost operation; unusually high traffic can exhaust the free monthly usage credits and pause service instead of billing automatically.

---

🌐 Production

Netlify builds the frontend from the app directory and publishes the generated dist directory. The Flickr proxy function, SPA redirect, proxy redirect, and response security headers are defined in app/netlify.toml.

The Express-based wrapper is local-only. Production no longer requires Render or any separate Node host for the Flickr proxy. Before decommissioning an existing Render deployment, keep VITE_API_BASE_URL available as a temporary rollback override and redeploy Netlify with that value only if the Netlify Function path fails production validation.

---

🧠 Flickr API

The application uses the official Flickr API for username lookup, public photo galleries, recent uploads, and photo metadata.

---

📄 License

Personal/public project. Reuse freely.