Photo Map MVP

Backend:

Frontend:

📖 Overview

Photo Map MVP is a full-stack application for managing photos with geolocation. Built with Angular 18, Spring Boot 3, and PostgreSQL, it provides photo uploading, EXIF GPS extraction, interactive map visualization, and rating system.

🎯 Features

• Upload & Processing - Automatic EXIF extraction (GPS, date) and thumbnail generation
• Gallery & Map - Responsive grid view and interactive Leaflet.js map
• Rating System - Rate photos 1-5 stars with average rating from all users
• Security - JWT authentication, BCrypt hashing, permission-based access
• Admin Panel - User management and permissions (VIEW_PHOTOS, RATE_PHOTOS)

🛠️ Tech Stack

Frontend:

• Angular 18.2.0 (standalone components, Signals)
• TypeScript 5.5.2+ (strict mode)
• Tailwind CSS 3.4.17
• Leaflet.js 1.9.4 (maps + markercluster)
• RxJS 7.8.0 (BehaviorSubject pattern)

Backend:

• Spring Boot 3.2.11 (Java 17 LTS)
• PostgreSQL 15
• Spring Security 6 (JWT, BCrypt)
• metadata-extractor 2.19.0 (EXIF)
• Flyway (migrations)

Testing:

• Frontend: Karma + Jasmine (199 tests)
• Backend: JUnit 5 + Mockito (78 tests)
• E2E: Playwright (6 specs, 15+ tests)
• Coverage: >50% (backend + frontend)

Deployment:

• Docker Compose (backend + frontend)
• Nginx (reverse proxy)
• Mikrus VPS (PostgreSQL shared service)

🚀 Quick Start

Prerequisites

• Node.js 18+ (frontend)
• Java 17 JDK + Maven (backend)
• PostgreSQL 15+ (or Docker)
• Git

Installation

Option A: Quick Setup (Recommended - One Command)

# 1. Clone repository
git clone <repository-url>
cd photo-map-app

# 2. Copy environment template
cp .env.example .env

# 3. Edit .env with your credentials (database, admin password, JWT secret)
nano .env

# 4. Initialize everything (database schema, directories, admin user)
./scripts/reset-data.sh

# 5. Start application
./scripts/start-dev.sh

What happens:

• ✅ PostgreSQL starts automatically (Docker Compose)
• ✅ Database schema created (Flyway migrations)
• ✅ Upload directories set up
• ✅ Admin user created from .env credentials
• ✅ Backend runs on http://localhost:8080
• ✅ Frontend runs on http://localhost:4200

---

Option B: Manual Setup

1. Clone repository:

git clone <repository-url>
cd photo-map-app

2. Backend setup:

cd backend
cp .env.example .env
# Edit .env with database credentials and JWT secret
./mvnw spring-boot:run
# Backend runs on http://localhost:8080

3. Frontend setup:

cd frontend
npm install
ng serve
# Frontend runs on http://localhost:4200

4. Database setup:

psql -U postgres
CREATE DATABASE photomap;
CREATE USER photomap_user WITH PASSWORD 'your_password';
GRANT ALL PRIVILEGES ON DATABASE photomap TO photomap_user;
\q
# Migrations run automatically on backend startup

Development Scripts

# Start backend + frontend + PostgreSQL
./scripts/start-dev.sh

# Stop backend + frontend
./scripts/stop-dev.sh

# Run all tests (unit + E2E)
./scripts/run-all-tests.sh

# Install pre-push hook (auto-runs tests)
./scripts/install-hooks.sh

For detailed scripts documentation, see Scripts Reference or scripts/README.md.

📚 Documentation

For detailed documentation, see the GitHub Wiki:

🏠 Getting Started

• Home - Project overview and navigation
• Quick Start - 5-step setup guide
• User Guide - How to use the application

💻 Development

• Development Setup - Prerequisites, project structure, workflow
• Architecture - Tech

...