FalconsGTInteractive websites
FalconsGT Luxury
A luxury car showroom site in English and Arabic: a filterable collection, car pages with enquiries, side-by-side comparison and model campaign pages.
Context / scope
Overview and scope
Falcons Luxury Motors sells luxury cars from its showroom at Al Awir Auto Market in Dubai. The site presents the collection and takes enquiries.
Pages: home, vehicles and a page per car, compare, offers, gallery, about, contact, and campaign pages for the GAC GS8 and the Mercedes-Benz C200.
Front-end developer: one of two developers on the site from January to March 2025 (277 of its 532 commits: car pages and galleries, comparison, the gallery page, the campaign pages and their lead forms, watermarking), then completed it in a second pass on the same code: filters, comparison by link, offers, enquiry fixes, keyboard access and page titles.
Results
- No results were recorded, so none are claimed.
- The photos, campaign artwork and showroom contact details are the client's; the cars and their specifications in the captures are sample values.
Interface / screens
Walkthrough
Screen 1 of 9: Home page search. Real interface, sample data.
Responsive and states
Screen 1 of 1: Car page on a phone. Real interface, sample data.
Behaviour / flows
Features and flows
Finding a car
- Brand, model, year, type and cylinder filters live in the address, so a search can be shared, reloaded and undone with Back; models narrow to the chosen brand.
- A result count, the active filters as removable chips, sorting by model year, and pages that open at the top of the results.
- Every select works from the keyboard (arrows, Enter, Escape, type-ahead), and the navbar menus open on focus.
A page for each car
- A photo gallery with a full-screen viewer; every photo carries the showroom's logo as a watermark.
- Overview, technical specifications, interior and exterior features, a brochure when the car has one, and similar cars of the same body type.
- The enquiry form sends the car and its page to the client's CRM, with a country code for the phone.
- Share opens the phone's share sheet, or copies the link.
Comparison and campaigns
- Up to three cars side by side, kept in the address so a comparison can be shared, with an option to show only the differences.
- Campaign pages for the GAC GS8 and the Mercedes-Benz C200, with the client's artwork and a lead form that asks how the buyer will pay; Offers lists them.
- Every page in English and Arabic, right to left, and every page fits a phone.
Engineering / decisions
Architecture and decisions
A Vite single-page app with React 18, TypeScript, Tailwind CSS 3 and React Router 7; TanStack Query and Axios fetch the collection, i18next loads English and Arabic, and Embla runs the carousels.
Filters and the comparison live in the address; one select component serves the search card, the filters, the forms and the comparison picker.
Filters belong in the address
The vehicles page kept its filters in component state and reset them on arrival, so a search from the home page showed every car. One hook now reads brand, model, year, type, cylinder, sort and page from the address and writes them back; the old links by body type still open that type.
A comparison that can be sent
The first car came from the browser's storage, so opening /compare directly crashed. The compared cars now live in the address and the browser remembers the list, so pressing Compare on several car pages builds one comparison.
Hidden fields reach the CRM
The shared form input never rendered a hidden field's value, so campaign and vehicle enquiries sent the placeholder "Your Brand" instead of the car. Hidden fields are now plain hidden inputs, and the vehicle form adds the car.
Lighter watermarks
Photos are watermarked on a canvas in the browser and cached. They used to become full-size PNG data; they are now scaled to the size the site shows and kept as JPEG, and a photo that fails to load keeps its plain address.
Limits / notes
Known limitations
- The collection in the captures is sample data on a local stand-in for the client's API, shown with the site's own showroom photos; the specifications are typical published figures.
- Enquiries go to the client's Zoho endpoint; the captures used a local stand-in, so nothing was sent.
- The campaign headlines are part of the client's artwork, so the Arabic pages show them in English.
Stack / tools
Technologies
- React
- TypeScript
- Vite
- Tailwind CSS
- React Router
- TanStack Query
- i18next
- Embla Carousel
Part of FalconsGT
The FalconsGT work spans three automotive front ends: Motors, SML commercial vehicles and Luxury vehicles.
Motors is a car trading and export site in Arabic, English and French, with a filterable vehicle list, vehicle pages and export enquiries. SML presents SML Isuzu trucks and buses with a model browser, comparison and campaign pages per market, while Luxury is a showroom site in English and Arabic with filters, comparison and campaign pages. My role across these sites was front-end development.