Case study 01 / 09
Client project · 2024
Hyper Taxi
Booking website for a taxi and tour operator in Iceland: tours, airport and private transfers, group-size pricing and online payment.
- Role
- Full-stack developer
- Stack
- React
- Redux Toolkit
- Vite
- Tailwind CSS
- Django
- Django REST Framework
- PostgreSQL
- PayPal
- Google Maps Platform
01
Overview
Hyper Taxi is a taxi and tour operator based in Reykjavík. Its website lets travellers book sightseeing tours and fixed-price airport and private transfers, see the price for their group, choose a date and pay online.
I developed the platform as a single-page React application backed by a Django REST Framework API.
02
The brief
A traveller planning a trip in Iceland needs answers to the same few questions: where can I go, when, for how many people, and what will it cost? The site has to answer all of them and take the booking and payment in a single visit, on whatever device the traveller has with them.
Prices are not one number. They change with the trip type, the vehicle, the size of the group and optional extras, so the pricing rules had to live in data the operator can manage rather than in the interface.
03
Role and scope
- Role
- Full-stack developer
- Scope
- React front end, Django back end and REST API, and PayPal payments.
04
Main features
Tour and transfer catalogue
Sightseeing tours and 20 fixed-price private-transfer routes, with sorting, filters, pagination and “load more”.
Tour pages with booking
Photo gallery, highlights and reviews next to a booking form with a passenger stepper (up to eight), a date picker and a running booking summary.
Group-size pricing and extras
Price tiers per vehicle for one to four and four to eight passengers, plus add-ons such as child seats, extra stops and extra hours.
Distance-based quotes
A quote widget that combines Google driving distance with tariffs in Icelandic krónur managed by the operator.
Online payment
Checkout with PayPal, so a booking is paid for when it is made.
Contact and support
A contact form and a WhatsApp link for quick questions.
05
How it’s built
Single-page front end
React 18 with Vite, Redux Toolkit for shared booking state and React Router for pages. Tailwind CSS with Flowbite components keeps the interface consistent from phone to desktop.
One API for the catalogue
A Django REST Framework API under /api/ serves tours, transfers, prices and reviews through a router, with a shared pagination format so every listing loads, sorts and pages the same way.
Maps restricted to Iceland
Google Places Autocomplete is limited to Iceland, which keeps pickup and drop-off suggestions relevant. The Distance Matrix API supplies driving distances for quotes.
Static hosting for the app shell
nginx serves the built front end and falls back to the app shell for client-side routes, while the API runs behind it.
Integrations
- PayPal JavaScript SDK
- Google Places Autocomplete
- Google Distance Matrix API
- Google reCAPTCHA
06
Screenshots
ScreenshotBooking form on the live site. Screenshot captured October 2026.
07
Challenges and decisions
Pricing as data, not code
Tours, transfers and custom rides each price differently. Keeping vehicle tiers, add-ons and distance tariffs on the backend means prices can change without a new release of the front end.
Relevant addresses only
Restricting address search to Iceland removes irrelevant suggestions and keeps distance-based quotes accurate.
Consistent listings
Using one pagination format across the API let the catalogue pages share the same loading, sorting and “load more” behaviour instead of handling each list differently.
08
What was delivered
- A live booking website at hypertaxi.is
- Booking flows for tours, transfers and distance-based rides, with online payment
- A REST API for the catalogue, prices and bookings
- A responsive interface for phones, tablets and desktops