Etienne Sharkey
Menu

Career

  • Overview
  • RAC
  • Forth
  • BAE Systems

Projects

  • Portfolio Site
  • PhotoMapper
  • Meal Planner

PhotoMapper

Image with description

A geolocation photo-sharing app built with Next.js 16, React, and MapLibre GL. Upload a photo and the app automatically extracts GPS coordinates from the image’s EXIF metadata, then pins it to an interactive map. Photos are browsable both on the map and in a scrollable feed — think Instagram meets Google Maps.

Built with Supabase for auth and storage, Redux Toolkit and RTK Query for state management, and a Vitest + MSW test suite. The app degrades gracefully to mock data when Supabase is not configured, keeping local development frictionless.

View PhotoMapper
GPS-firstPhoto discovery via map
EXIFAuto-location from image metadata
SupabaseAuth, database & storage
MapLibre GLInteractive map rendering
FrontendBFFServicesDataInfrastructurePrimary request flow
Next.js App
API Routes
Supabase Auth
Supabase Postgres
Supabase Storage
Vercel
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Tech Stack

Frontend

Map-first UI built with MapLibre GL, driven by Redux Toolkit for global state and RTK Query for server data caching.

Next.js 16React 19TypeScriptTailwind CSSMapLibre GLRedux ToolkitRTK Query

Backend & Auth

Serverless API routes handle uploads and queries. Supabase provides auth, Postgres, and object storage with RLS policies enforcing ownership.

Next.js API RoutesSupabaseSupabase AuthSupabase StorageZodReact Hook Form

Image Processing

EXIF metadata extraction pulls GPS coordinates automatically from uploaded photos. Canvas API resizes images client-side before upload.

exifr (EXIF extraction)Canvas API (client-side resize)

Testing

Comprehensive test suite with Vitest, React Testing Library, and MSW for API mocking.

VitestReact Testing LibraryMSW (Mock Service Worker)jsdom

Get in touch

Open to new opportunities and interesting projects. Feel free to reach out.

EmailGitHubLinkedIn
Download CV