Heel & Toe Cars
A full stack website I created for a premium car dealership based in Lavenham, Essex.
Project Overview
Heel & Toe Cars Ltd approached me to create a comprehensive web solution for their business, their self-built Squarespace website was holding them back. Each week they would spend hours managing their stock across multiple platforms, manually uploading cars to both their website and Instagram separately, and then having to remember to update both platforms when a car had sold. With an ever growing large collection of vehicles, they tasked me with creating a better solution.
In addition to listing management, they also wanted help managing their staff, stock, finances and invoicing, so they could focus on running the business. I developed a fast, responsive website alongside a bespoke backend management system which can be seen here.
Technical Implementation
For this project I built a Next.js application written in Typescript. This way I could take advantage of server side rendering and API routes whilst maintaining type safety for predictable, maintainable code. I utilised Tailwind CSS for styling to create a modern, responsive layout.
The cars you see for sale on the website are hydrated via the Instagram Graph API. This approach allows the client to easily manage what stock is shown on their website, and means they no longer have to go through the long winded process of manually uploading cars to their website and Instagram separately. Using pre-defined key words and a clever caption template, the client has full control over what cars are displayed and how they look, without ever leaving the Instagram app.
The client also wanted the ability to advertise their collection of private number plates. These are stored in Neon Postgres, having been migrated off the Firestore database the site originally ran on. The website only reads the plates - the table itself is owned and migrated by the backend management system, so there is a single database behind both rather than two copies of the same data to keep in step.
The contact page features a form which uses the Mailjet API to route queries directly to the clients email address, this form also includes a Cloudflare Turnstile to prevent spam from bots. Each submission is written to that same Neon database before the email goes out, so an enquiry is recorded in the management system rather than living only in an inbox. The client also requested an interactive map, which I implemented using the Google Maps API at the bottom of the page.
