Authenticated Map-Based Image Upload System
Budget: $250 – $750 CAD
Project: Authenticated Image Upload System (Map-Based Website)
Current State
Live website with Leaflet map and clustering
Images displayed per city
Folder structure exists:
uploads/Country/Province/City/
Frontend UI already built and working
No frontend redesign required
Goal
Allow users to upload images grouped by Country → Province/State → City, with secure storage, admin moderation, and automatic map integration.
Images are anonymous by default but become associated with a user profile once the user registers.
Core Requirements
1. User Registration & Login
Manual registration (email + password)
Google OAuth login option
One-time email verification (manual registration only)
Persistent login for returning users (sessions + optional “remember me”)
Secure password hashing (bcrypt/argon2)
2. Anonymous → Registered Upload Linking
Images uploaded before full registration do not display uploader information publicly
Each upload is internally tracked (session-based or temporary user identifier)
If the uploader later fully registers:
Previously uploaded images are linked to their account
Those images appear in the user’s personal image library
No public uploader info is shown unless the image is linked to a registered user
3. Upload Page (Protected)
Only logged-in & verified users can upload (anonymous uploads optional if simpler for MVP)
Upload form includes:
Country dropdown
Province/State dropdown (filtered by country)
City dropdown (no free-text input)
If city does not exist:
Automatically create it or
Submit for admin approval (developer to advise)
Support multiple image uploads
4. Image Upload & Security
Backend upload endpoint (e.g. POST /api/upload)
Validate:
Image type (JPG / PNG / WEBP)
Max file size (e.g. 20MB)
Rename files on upload (UUID)
Prevent malicious uploads, path traversal, executable files
Basic rate limiting / abuse prevention
5. Storage & Data
Images stored in:
uploads/Country/Province/City/
Database records include:
image_id
optional user_id (nullable until user registers)
country / province / city
filename / path
upload timestamp
moderation status (pending / approved / rejected)
6. Moderation (Admin)
All uploads default to pending
Admin-only page to:
View uploads
Approve or reject images
Only approved images appear publicly
7. Map & Profile Integration
Map pins load dynamically from database (no hardcoded pins)
City popups show thumbnails
If an image is linked to a registered user:
The uploader’s username appears in the bottom-right of the image view
Username is clickable and links to the user’s profile
User profile page displays:
Username
Their full image library
Technical Preferences
Backend: PHP preferred (open to Node.js / Python)
Database: MySQL / MariaDB
Clean, secure, well-documented code
MVP-focused (simple > over-engineered)
Deliverables
Manual + Google registration/login
Persistent login for returning users
Secure image upload system
Anonymous-to-registered image linking
Admin moderation page
Database schema + setup
Backend APIs for uploads, locations, profiles
Deployment instructions
Current State
Live website with Leaflet map and clustering
Images displayed per city
Folder structure exists:
uploads/Country/Province/City/
Frontend UI already built and working
No frontend redesign required
Goal
Allow users to upload images grouped by Country → Province/State → City, with secure storage, admin moderation, and automatic map integration.
Images are anonymous by default but become associated with a user profile once the user registers.
Core Requirements
1. User Registration & Login
Manual registration (email + password)
Google OAuth login option
One-time email verification (manual registration only)
Persistent login for returning users (sessions + optional “remember me”)
Secure password hashing (bcrypt/argon2)
2. Anonymous → Registered Upload Linking
Images uploaded before full registration do not display uploader information publicly
Each upload is internally tracked (session-based or temporary user identifier)
If the uploader later fully registers:
Previously uploaded images are linked to their account
Those images appear in the user’s personal image library
No public uploader info is shown unless the image is linked to a registered user
3. Upload Page (Protected)
Only logged-in & verified users can upload (anonymous uploads optional if simpler for MVP)
Upload form includes:
Country dropdown
Province/State dropdown (filtered by country)
City dropdown (no free-text input)
If city does not exist:
Automatically create it or
Submit for admin approval (developer to advise)
Support multiple image uploads
4. Image Upload & Security
Backend upload endpoint (e.g. POST /api/upload)
Validate:
Image type (JPG / PNG / WEBP)
Max file size (e.g. 20MB)
Rename files on upload (UUID)
Prevent malicious uploads, path traversal, executable files
Basic rate limiting / abuse prevention
5. Storage & Data
Images stored in:
uploads/Country/Province/City/
Database records include:
image_id
optional user_id (nullable until user registers)
country / province / city
filename / path
upload timestamp
moderation status (pending / approved / rejected)
6. Moderation (Admin)
All uploads default to pending
Admin-only page to:
View uploads
Approve or reject images
Only approved images appear publicly
7. Map & Profile Integration
Map pins load dynamically from database (no hardcoded pins)
City popups show thumbnails
If an image is linked to a registered user:
The uploader’s username appears in the bottom-right of the image view
Username is clickable and links to the user’s profile
User profile page displays:
Username
Their full image library
Technical Preferences
Backend: PHP preferred (open to Node.js / Python)
Database: MySQL / MariaDB
Clean, secure, well-documented code
MVP-focused (simple > over-engineered)
Deliverables
Manual + Google registration/login
Persistent login for returning users
Secure image upload system
Anonymous-to-registered image linking
Admin moderation page
Database schema + setup
Backend APIs for uploads, locations, profiles
Deployment instructions