• Next.js: Utilised for server-side rendering, enhancing performance and SEO.
• TypeScript: Employed for static type checking, improving code reliability.
• Shadcn/UI: A minimal yet beautifully designed UI component library.
• Tailwind CSS: Used for utility-first styling, ensuring a modern and responsive UI.
• Cloudinary: Used for hosting the files uploaded to a modification.

• Prisma: Handles database interactions.
• PlanetScale: MySQL database platform.
• Node.js: Serves as the backend runtime.

• Clerk: Integrated for user authentication and session management.

This tab provides an overview of your vehicle's data, depending on how you have populated the vehicle's information in the web app:

This screenshot shows a vehicle where the user has opted to input their reg to retrieve their tax and MOT status via the DVLA RES API. The user has also supplied a comprehensive list of modifications added to their vehicle. This provides the user with a daily reminder of how much money they have wasted *spent on modifications. 💸

Here is how a newly-added vehicle will look:

Switch between light and dark mode at any time and your preference will be retained.

It is automatically set depending on your system theme.

A card menu has now been added, allowing the user to show or hide cards on the Overview tab. This is independently configurable for each vehicle:

I know you want to hide the total costs of the modifications. You're welcome.

Get reminders of when your Tax, MOT, Servicing and Insurance is due.

Each reminder is colour-coded and prioritised by the due date, with the main notification's dot colour set by this:

• 🟢 Due within 30 days.

• 🟠 Due within 7 days.

• 🔴 Due today/Overdue.

Notifications can be dismissed individually or all at once by either clicking on Mark as Read when hovering over the message, or Mark all as Read at the top of the notification center. For data housekeeping, each message, both Read and Unread has an expiry date of 30 days where the message will automatically be deleted.

Seamlessly switch between any vehicle at any time, or add a new vehicle to your garage:

I own an identity-confused Toyota "Zupr4" so I had to cover both options.

Display a list of modifications with multiple ways of filtering them:

The user has 18 modifications all with either one or more attachments, as highlighted by the Files column. He sure knows how to waste money. You thought you could escape the total cost of your modifications, didn't you.

Up to three Invoices or any relevant files related to the modification can be attached:

The user has created a non-obsolete modification and has attached a user guide to help brick their ECU.

Catergorise your modifications by what type they are: exterior, interior, performance etc:

The user is able to see all related modifications to this type. They are able to click on one to view or edit it. I don't have a shit joke for this one, sorry.

Keep track of your vehicle's service history. If the user has added more than one service, it will display the mileage and time in between each service in an intermediate card:

Change your vehicle's name, supply the registration number or delete data associated with this vehicle:

The user can change their vehicle's name or delete the vehicle entirely at any time. Protection features are built in so a user cannot delete all modification types unless there are no modifications associated with that type. The developer wants to ensure you that he definitely, 100%, no cap on a stack, did not do this multiple times throughout development.

Recently, I have been working on making the site more mobile-friendly, including adding a Burger Menu for smaller devices:

The app has been made fully mobile-responsive with the expensive of the developer's remaining sanity.

Mistakenly, the government trusted me with some API keys.
Enter your vehicle's registration number to view its up-to-date tax and MOT status in the Overview tab. This is directly sourced from the DVLA RES API.

To avoid getting 429'd, a request is only sent to the RES API if the user has added/changed their registration or it has been 24 hours since the API was last called:

The user is able to see how recent the tax and MOT status is by clicking on the question mark icon.

The insurance is dependant on the user manually inputting the data. This still follows the same principal of calling an api once every 24 hours to ensure its reflecting the correct data. In this instance, the API is called to determine whether to update the insurance status as "Insured" or "Not Insured":

Now the 89 year old Margret can eagerly await to pay £4300 on her 2003 Micra.

Although I am not directly affected by a website's command of accessible features, I think it should be an absolute priority to make every website easily accessible to everyone. 93% is the lowest score from a page on this web app... for now.