Frontend

• 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.

Backend

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

Authentication

• Clerk: Integrated for user authentication and session management.

Vehicle Overview

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. They have also added some pictures of their car, including modifications to the engine bay which their insurance definitely knows about. 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. 💸

Card Visibility Menu

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.

Vehicle Switcher

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.

Modifications

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

The user has 17 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.

Modification

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

The user has created a non-obsolete modification and has attached torque spec instructions that they are highly unlikely to follow.

Modification Types

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.

Servicing

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:

Settings

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.

Responsiveness

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.

Tax, MOT and Insurance

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.

Light and Dark Mode:

For some reason, some people (who I do not want to be associated with) prefer light mode so I reluctantly added this option:

It is automatically set depending on your system theme, however, you can change the web app's theme TO DARK MODE at any time and your preference will be retained. Thank you for making the right decision.

Accessibility

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.