📸 Photo Forge

Your Complete Photography Assistant

Streamline your photography workflow with AI-powered tools for photo selection, caption generation, metadata editing, and watermarking.

🚀 Get Started • 📖 Documentation • 🎯 Demo • 🤝 Contributing

---

✨ Features

Photo Picker Swipe through photos to quickly find your best shots

AI Caption Generator Generate engaging social media captions with AI

Metadata Editor View and edit EXIF data and keywords

Watermarking Tool Add professional watermarks to protect your images

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm/yarn
• OpenAI API key (for caption generation)

Installation

# Clone the repository
git clone https://github.com/your-username/photo-forge.git
cd photo-forge

# Install dependencies
npm install
# or
yarn install

# Set up environment variables
cp .env.example .env.local
# Add your OpenAI API key to .env.local

Environment Setup

Create a .env.local file in the project root:

OPENAI_API_KEY=your_actual_api_key_here

Get your API key from OpenAI Platform.

Running the Application

# Development server
npm run dev

# Build for production
npm run build

# Start production server
npm run start

# Run linting
npm run lint

Open http://localhost:3000 to view the application.

🎯 Demo

Note: Add screenshots or GIFs of your app in action here

🏗️ Tech Stack

• Framework: Next.js 15 with App Router
• UI: React 19 + TypeScript
• Styling: Tailwind CSS 4
• AI Integration: OpenAI GPT-4o-mini
• Image Processing: Sharp + Canvas API
• Gestures: React Swipeable
• Metadata: ExifR for EXIF data reading

🛠️ Development

Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── api/               # API routes
│   ├── caption-generator/ # Caption generation page
│   ├── metadata-editor/   # EXIF editing page
│   ├── photo-picker/      # Photo selection page
│   └── watermarking-tool/ # Watermark application page
├── components/            # Reusable UI components
│   ├── CaptionGenerator/  # Caption generation components
│   ├── MetadataEditor/    # EXIF editing components
│   ├── PhotoPicker/       # Photo selection components
│   └── WatermarkingTool/  # Watermark components
├── hooks/                 # Custom React hooks
├── types/                 # TypeScript type definitions
└── context/               # React context providers

Key Features Implementation

• Container Pattern: Each feature uses a container component pattern for state management
• Custom Hooks: Business logic extracted into reusable hooks
• Component Composition: Small, focused components for maintainability
• Type Safety: Full TypeScript integration with proper type definitions

🔧 API Reference

Caption Generation

POST /api/generate-caption
Content-Type: multipart/form-data

image: File
maxHashtags: number (optional, default: 20)

Response:

{
  "description": "Caption text",
  "hashtags": ["tag1", "tag2", "..."]
}

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow the existing code style and conventions
• Add tests for new features
• Update documentation as needed
• Ensure all tests pass before submitting

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js for the amazing React framework
• OpenAI for AI-powered caption generation
• Tailwind CSS for utility-first styling
• Vercel for seamless deployment

📊 Project Status

---

⬆ Back to Top

Made with ❤️ by photographers, for photographers