A web application to check and display various details about vehicles in the UK, including tax status, MOT status, vehicle specifications, mileage history, and more.
- React: JavaScript library for building user interfaces.
- Next.js: React framework for server-side rendering and static site generation.
- TypeScript: Superset of JavaScript which adds static typing.
- Tailwind CSS: Utility-first CSS framework for styling.
- DVLA VES: Vehicle registration and tax information.
- DVSA MOT Hisotry: MOT test results.
- eBay: Vehicle listings.
- Number Plate Search: Search vehicle details using vehicle registration numbers.
- Vehicle Information: Display details like make, model, year, color, etc.
- Tax and MOT Status: Retrieve and display tax and MOT status.
- Mileage History: Display mileage history and generate mileage charts.
- MOT History: Display detailed MOT history including passed/failed MOTs.
- Dark Mode: Support for dark mode.
This feature allows users to search for vehicle details using vehicle registration numbers. When searching using a number plate, the application will validate the number plate and display the results. If the number plate is invalid, the user will be displayed an error message telling them the plate is invalid.
This feature displays information about the vehicle, including make, model, year, colour, and more. The information is retrieved from the DVLA VES API and the DVSA MOT API; it is then displayed in a user-friendly format. All of the important information is displayed on the vehicle information page.
This feature displays tax and MOT status for the vehicle. The tax status is retrieved from the DVLA VES API, and the MOT status is retrieved from the DVSA MOT API. The information is then displayed to the user giving them color-coded status indicators for tax and MOT status. Making it the first thing the user sees when looking up a vehicle as this is the most important information to know.
This feature displays mileage history for the vehicle. The mileage history is retrieved from the DVSA MOT API and displayed in a user-friendly format. The mileage history includes information such as the last known mileage, the mileage last year, and the average yearly mileage. It also includes a chart showing the mileage changes over time.
The mileage information is taken from the MOT test results section of the DVSA MOT API. The application only mileage data from PASSED MOTs, this way it can easily be sorted through years and reduced unnecessary data.
This feature displays detailed MOT history for the vehicle. The MOT history is retrieved from the DVSA MOT API and displayed in a user-friendly format. The MOT history includes information such as the last known MOT test date, the total number of MOTs, the number of PASSED MOTs, and the number of failed MOTs. It also goes into detail on specific MOTs, including the MOT test number, the completed date, the mileage, and the defects. These results are colour-coded to make it easier to understand the status of each MOT.
This feature adds support for dark mode to the application. The application uses the shadcn dark mode feature. Which allows the user to switch between light and dark modes.
- Home Page: The home page of the application. As well as the vehicle check search page.
- Vehicle Check Page: The vehicle check page. This page displays the vehicle information, tax and MOT status, mileage history, and MOT history.
- MOT History Search Page: The MOT history search page.
- MOT History Page: The MOT history page. This page displays the detailed MOT history for the vehicle.
- Mileage History Search Page: The mileage history search page.
- Mileage History Page: The mileage history page. This page displays the mileage history for the vehicle.
This page is the first thing the user sees when they visit the website. It allows them to search for vehicle details using a number plate. This then takes them to the vehicle check page where they can view the vehicle information, tax and MOT status, mileage history, and MOT history. It also tells them what information is available when searching for a vehicle.
This page displays the vehicle information, tax and MOT status, mileage history, MOT history and allows the user to view the similar vehicles for sale on eBay. The information displayed on this page is the most important information for the user. For more detailed information of specific sections, there is a button to take them to the relevant page.
This page is the search page for the MOT history. It is almost identical to the home page, but the search redirects the user to the MOT history page and tells them what information is available when searching for a vehicles MOT history.
This page displays the detailed MOT history for the vehicle. Instead of just showing a basic overview of all MOTs, this page goes into detail on each MOT, including the MOT test number, the completed date, the mileage, and the defects. These results are colour-coded to make it easier to understand the status of each MOT.
This page is the search page for the mileage history. It is almost identical to the home page, but the search redirects the user to the mileage history page and tells them what information is available when searching for a vehicles mileage history.
This page displays the mileage history for the vehicle. It goes into a bit more details about the milage history of the vehicle. Showing the user a chart of the mileage over time and gives the user a breakdown of the mileage by year.
I have tried to make the application as error-free as possible. This is to make sure the user doesn't have their experiences disrupted by errors. If an error occurs, the application is made to let the user know what went wrong, i.e. the vehicle is not found, the number plate is invalid, etc.
- Home Page
- MOT History Search Page
- Mileage History Search Page
If a number plate is using an invalid format, the application will display an error message telling the user that the number plate is invalid. This check is done using the uk-numberplates package. This package determines correct or incorrect UK number plate formats.
The above error message will show if this check returns false when pressing search
The same check is also used if a user types the number plate into the url. If this happens, the application will redirect the user to the home page.
TODO:
- Take the user back to the search page but put the invalid number plate in the input field. And display the error message.
- Vehicle Check Page
- MOT History Page
- Mileage History Page
If a vehicle is not found, the application will display an error message telling the user that the vehicle cannot be found. This is to make sure the user knows that the vehicle they are looking for cannot be found. This error message will also let the user know possible reasons why the vehicle cannot be found. There is also a link to the page they searched from, so they can try again.
- Vehicle Check Page
- MOT History Page
- Mileage History Page
Vehicle Check Page:
MOT History Page:
Mileage History Page:
If there is no recorded MOT data for the vehicle, the application will display an error message telling the user that there is no recorded MOT data. This will also create an error with the mileage, as it requires MOT data to calculate the mileage of the vehicle. The error message will let the user know some possible reasons why there is no recorded MOT data.
If there are no eBay listings for the vehicle, the application will hide that section from the vehicle check page