Mapper is a practical delivery quotation tool built for an instrument retailer. Staff can search for a UK address or postcode using Google Places autocomplete, view the selected location on an interactive map and generate an estimated delivery price based on the road distance from the showroom.
The application uses a Next.js API route to securely contact Google’s Distance Matrix API without exposing the server-side API key. Delivery prices are calculated from a local JSON file containing fixed mileage bands, removing the need for a database. The origin postcode is configurable through an environment variable.
The interface is built as a responsive, full-screen map with floating search and quotation panels. Google Maps and Places are loaded through @vis.gl/react-google-maps, while React state manages the selected location, loading state, errors and quote result.
Technology used:
- Next.js App Router
- React
- TypeScript
- Tailwind CSS
- Google Maps JavaScript API
- Google Places API
- Google Distance Matrix API
- Local JSON delivery-band configuration
- Environment variables for server and browser API configuration