Say goodbye to scams
May 2025
Honesty
Team
Luca Denhez
Tools
React
Next.js
Figma
Aspects
Product Design
UX / UI Design
Web Development
User Authentication
Context
When looking for a secondhand car on Craigslist, Facebook Marketplace, or OfferUp, I always run into the same problem. Scams.
Maybe the cars odometer has been rolled back, or 'the hood just won't latch' is another way to say the car had a front-end collision. You never know.
The best way to learn about the history of a vehicle is with a VIN report like Carfax. However, Carfax does not account for any work done independantly without a shop, and costs money to run each report.
I wanted a way to demonstrate all the work I've done to my car, to show potential buyers it was thoughtful, legitimate, and no funny business was happening.
Research
Existing service history websites like Carfax get all their information via the cars VIN number, which is not sufficient because it only returns work done by official shops.
There are also websites for showing off your cars modifications, that allows you to put in images of your car, modifications, mileage, etc.
This is closer, however it is not a simple, one-page reference sheet for a potential buyer. And there isn't a capability to include repairs, OEM part links, time took, etc.
Image of existing tool comparisons
User's Needs
I have a lot of friends who scroll through Facebook Marketplace looking at cars they can't afford, during class.
I asked them what they wanted to help make a secondhand car purchase feel more secure.
This is what I learned.
No BS
Links to OEM parts used
Mobile friendly
Unlimited images
Some enthusiast focused collectives like Built for Backroads, Cars & Bids, and Bring a Trailer implement these features, however they are auction websites meant for the buyer to buy the car right there.
I want this to be seamlessly integrated into existing secondhand sites like Craigslist and Marketplace, a link to the service report in the listing description.
Features
Include
Personal service history
Modification history
Engine, transmission, and car-specific information
Links to OEM parts used
Description of what the service is
Comprehensive cost breakdown
Interactive, 3D LIDAR scan of vehicle
Unlimited photos
Works well on phones, tablets, and computers
Leave Out
Limit on photo count
Pixelated, low resolution photos
Payment
Flow
Authentication is done through Firebase in order to use Firestore to store the users images.
For each vehicle the user is selling, a short unique identifier is generated on the server-side, and is used in the URL to share the car with others.
Image of flow
Image of UUID shareable URL
Design Language
To ensure the site is easily viewable on mobile devices, I opted to use a Bento style layout of cards. As the device size narrows, rows turn into columns, and the site is responsive on all screen sizes.
Thoughtfully chosen bright colors alert the user for expensive repairs, and consistent font weights make the site easy to digest.
Figma Design Language
Screen
Screen
Screen
Thoughtfully Coded
Honesty is fully open-source, and free for personal use.
Reusable components throughout the codebase ensure if new features are added, it is easy to adhere to the design language.
The photo carousels, 3D viewer, service / modification entries, and car information are all fully dynamic, and can be easily modified by changing the passed-in props.
app.js
1<TitleCard
2 make={"Mini"}
3 model={"Cooper S"}
4 year={2011}
5 mileage={113000}
6 motor={"N18 1.6T"}
7 transmission={"6MT"}
8 LCI={true}
9 color={"Pepper White"}
10/>app.js
1<PhotoCarousel images={[
2 "images/mini/front.jpg",
3 "images/mini/front_quarter_right.jpg",
4 "images/mini/front_quarter_left.jpg",
5 "images/mini/engine_bay.jpg",
6 "images/mini/driver_seat.jpg",
7 "images/mini/tachometer.jpg",
8 "images/mini/passenger_seat.jpg",
9]} />ServiceHistory.js
1<ServiceEntry
2 title="Replaced timing chain, exhaust VANOS sprocket"
3 description="Replaced timing chain assembly along with the gear, new chain, guides, torque to yield fasteners, rear main seal."
4 timestamp={parse("03.13.2025", "MM.dd.yyyy", new Date())}
5 urgency="essential"
6 pricing={[
7 {
8 price: 178.99,
9 name: 'Mini Exhaust VANOS Camshaft Sprocket',
10 source: 'FCP Euro & Febi Bilstein',
11 URL: 'https://www.fcpeuro.com/products/mini-timing-chain-sprocket-febi-bilstein-11367536085?gQT=2'
12 },
13 ]}
14 images={[
15 "images/services/03.13.2025/head.jpeg",
16 "images/services/03.13.2025/timing_chain.jpeg",
17 "images/services/03.13.2025/vanos_gear.jpeg",
18 ]}
19 hours={24*3}
20 info="The N18 engine has a system called VANOS on both the intake and exhaust side..."
21 link="https://bimmers.com/blog/bmw-vanos-explained-what-it-does-why-it-fails-and-how-to-fix-it/"
22/>ModificationHistory.js
1<ModificationEntry
2 title="H&R Pro Street Coilovers"
3 description="Smooth ride on the street with no creaks, and is nice and firm on the track."
4 images={[
5 "images/modifications/coilovers/0.jpg",
6 "images/modifications/coilovers/1.jpg",
7 "images/modifications/coilovers/2.jpg",
8 ]}
9 category="suspension"
10/>User Interaction
Next Steps
This project has been super helpful in assisting me to sell my car. I sent the link to each interested buyer, and they appreciated the thorough detail of what's been done to the car.
However, I would love to ask the community what features they would like. I want the process of adding your car and its information as simple as possible, so anyone can do it regardless of age or ability.
Reflection
This project started as just a simple, single-page website to give to a buyer who'd be interested in buying my Mini Cooper.
I have put an immense amount of work into that car, engine work, suspension work, interior dissassembly, etc.
But as I was working on the project instead of listening to my lecture... a friend saw it and said I should make it for anyone to sell their car. I had kind of forgotten how many people I know scrolling through Marketplace for used cars all the time, so I started working.
Even though this project isn't perfect; it could feel more natural, show more information, I really got to practice my React skills and it challenged me to build thoughtful, reusable components that I hadn't thought much of before.
It's really fun to be at the point where you can take any idea in your head, and just start turning it into <div>'s and flexboxes.
I spent a looooong time getting the hang of Tailwind and React, but I love learning it and I look forward to what's next.
Thanks so much for taking the time to look at my project!
Luca.