GeoStamp Pro - Photo Processor and GPS Watermark Generator

Website: https://geo-stamp.editech.dev/

GeoStamp Pro is a modern web application built with Next.js that allows for batch processing of photographs, reading their metadata (including GPS coordinates), applying dynamic watermark designs based on metadata and temporal interpolation, and downloading the resulting batch in a ZIP file.

🚀 Key Features

Batch Processing: Upload multiple photos simultaneously.
EXIF Metadata Detection: Automatically reads the date, time, and GPS coordinates (latitude/longitude) of the photographs.
Custom Date and Time Picker (DateTimePicker): Replaces native browser pickers with a custom, high-contrast React component, adapted to the site's dark theme and red accents. It features monthly calendar navigation and controls to adjust hours and minutes, adapting responsively as a centered modal on mobile and a popover on desktop for optimal touch interaction.
Date Interpolation:
- If a photo lacks a date in its metadata, it can be automatically interpolated based on neighboring photos.
- Allows configuring a manual date range (Start and End) and proportionally recalculating the date and time for the entire batch.
Batch Edit: Modify the location, status ("Before Maintenance", "During Maintenance", "After Maintenance"), and other metadata for the entire batch at once.
- Multiline Support for Locations: Allows writing descriptions across multiple lines (via textareas). The Canvas engine dynamically splits, aligns, and adjusts text height.
Quick Processor Reset: Dedicated button to reset the photo queue and temporary batch settings, keeping saved logo and company configurations intact.
Watermark Customization:
- Company Logo: Upload a custom logo to stamp onto the watermark.
- Logo Location: Place the logo at the top or bottom, aligned left or right.
- Design Styles: Support for "Plain Text" (Style A) and "Compact Box with Border" (Style B) designs, respecting visual proportions. Style A hides visual decorators and displays the status in plain text.
- GPS Data: Toggle the visibility of GPS coordinates on or off and edit them manually if necessary.
Stable and Reactive Sorting (Drag & Drop): Ability to reorder images via direct drag or move up/down buttons. The system includes an onDragEnd handler to prevent persistently incorrectly marked elements when canceling drags, optimized for mobile devices with dedicated touch buttons.
Real-Time Preview: Interactive modal to view the photo canvas with the rendered watermark before downloading.
Secure Export: Generation of a compressed ZIP file with all processed images in high definition and with their integrated watermark.

🛠️ Technologies Used

Core: Next.js 16 (App Router), React 19, TypeScript.
Styles: Tailwind CSS v4.
Image and Data Processing: HTML Canvas API, Exifr (EXIF reading), and JSZip (ZIP generation).
Quality Control: Playwright (E2E Testing) and ESLint.

📦 Prerequisites and Security Restrictions

[!IMPORTANT] Security Policy: To avoid security vulnerabilities and supply chain attacks, the use of npm or yarn is strictly prohibited. All installation and execution must be done using pnpm.

Ensure you have installed:

Node.js (v18.x or higher)
pnpm (v8.x or higher)

🔧 Installation and Development

Follow these steps to set up the project locally:

Install dependencies:
```
pnpm install
```
Start the development server:
```
pnpm dev
```
Open http://localhost:3000 in your browser to see the application running.
Build the project for production:
```
pnpm build
```
Run the linter:
```
pnpm run lint
```

🌐 Deployment and Project URL

The project is currently deployed and running at the following address:

Production: https://geo-stamp.editech.dev/

🧪 Unit and E2E Testing (Playwright)

The project includes an end-to-end testing suite that validates the correct functionality of the entire interface without console errors or browser alerts.

Install Playwright browsers (if it's your first time):
```
pnpm exec playwright install chromium
```
Run tests in the background (Headless):
```
pnpm exec playwright test
```
Run tests with graphical interface (UI Mode):
```
pnpm exec playwright test --ui
```

Developed with high standards of quality, dependency security, and performance.