Autoparts Pulsor

Inspiration

If you’ve ever built a custom PC, you know how dizzying component names can be: deciphering an NVIDIA RTX 4070 Ti Super versus a 7800 XT, checking motherboard socket compatibility, or verifying power supply wattages. Yet, the tech community has tools like PCPartPicker to demystify that jargon and guarantee fitment.

In the automotive world, that problem is ten times worse—and far more expensive.

Between cryptic 10-digit OEM part numbers, platform cross-references, rotor diameter variants, and endless aftermarket tiers, everyday drivers feel completely alienated. Dealerships and repair shops exploit this information asymmetry, charging 150% to 300% markups simply because car owners are terrified of buying the wrong part.

We asked ourselves: Why isn't there an intuitive, transparent platform that does for car maintenance what PCPartPicker and 3D exploded diagrams did for tech?

We built AutoParts Pulse to eliminate the intimidation factor. Our mission is to centralize vehicle parts intelligence, educate everyday drivers with bite-sized DIY insights, and provide interactive visual tools so anyone can confidently service their car, diagnose mechanical issues, and avoid getting ripped off.

What it does

AutoParts Pulse is an interactive automotive intelligence platform that combines real-time price arbitrage with an interactive 3D digital cockpit:

Exact-Fit Parts & Cross-Store Price Arbitrage Scanner:

Users select their vehicle (Make, Model, Year, Category) or search by keyword/part number. Scrapes and indexes listings across major retailers (RockAuto, FCP Euro, AutoZone, Advance Auto Parts) alongside official Dealership OEM benchmarks. Surfaces the Arbitrage Spread—instantly showing how much money drivers save by buying aftermarket vs. dealer quotes, complete with 30-day price trend sparklines and verified fitment badges.

Interactive 3D Parts Visualizer & Digital Twin:

A full WebGL Three.js vehicle model featuring Exploded View sliders (disassembling the car in 3D space) and X-Ray Transparency modes to see exactly where components live inside the chassis. Fullscreen 3D viewport mode with real-time responsive camera resizing.

Mileage & Wear Simulation Heatmap:

An interactive Vehicle Mileage Slider (5,000 to 150,000+ mi) that simulates physical wear on the 3D model in real-time. As mileage increases, Three.js shaders visually degrade components: brake rotors shift from polished steel to scorched gunmetal with a red-hot thermal friction glow, filters turn carbon-sludged, and spark plugs show electrode fouling. A live Telemetry Wear Meter calculates remaining life against factory OEM service intervals.

Acoustic Stethoscope Diagnostic Engine:

Integrates an audio simulator that plays authentic diagnostic sound signatures for every part (comparing Normal Operation vs. Mechanical Failure). Users can listen to the exact sound of failing brake wear indicator squeal, alternator bearing whine, or engine rod knock with an animated HUD equalizer before ordering parts.

DIY Labor & Service Cost Estimator:

Compares the total cost of doing the repair yourself (parts only) against independent shops and dealership repair quotes. How we built it Frontend & Architecture: Built with Angular 22 utilizing standalone components, Signals for reactive state management, and an ultra-responsive Digital Cockpit HUD design system styled with custom mobile-first CSS. 3D Graphics & WebGL: Implemented with Three.js, incorporating custom mesh geometries, procedural shader materials (heat-emissive thermal glow, carbon sludging), orbit controls, and raycasting ray-pickers for interactive part inspection. Audio Engineering: Synthesized and streamed via the browser-native Web Audio API and a custom Node.js DSP pipeline (generate-car-audio.js), producing 44.1 kHz 16-bit PCM acoustic waveforms based on SAE J2521 brake frequencies and crankshaft impact physics. Data Processing & Catalog: Multi-store catalog normalization engine parsing part categories, SKUs, pricing histories, and compatibility matrices into a unified JSON data layer. Tooling & Build System: Node.js v24, Angular CLI, automated prebuild audio asset verification hooks, and Git version control. Challenges we ran into 3D Performance & Dynamic WebGL Shaders: Rendering an entire multi-component chassis smoothly in the browser while supporting real-time exploded view translations and material color transitions without dropping below 60 FPS required aggressive mesh optimization and material reuse. Acoustic Realism: Initial audio synthesis sounded like arcade 8-bit beeps. Real automotive failures involve complex friction textures, metal cavity resonances, and rotational runout wobbles. We had to build a dedicated DSP pipeline using biquad bandpass filter banks, pink contact noise, and harmonic stacks so engines and brakes sounded authentic on laptop speakers. Responsive 3D Viewport in Fullscreen: Managing browser fullscreen security policies while dynamically recalculating camera aspect ratios and WebGL renderer dimensions on the fly required robust resize listeners and fallback CSS overlays. Data Fragmentation: Reconciling automotive part naming standards across different retailers (where one store lists a part by manufacturer SKU and another by universal interchange code) required clean data deduplication and category normalization. Accomplishments that we're proud of Bridging 3D Visualization with Real Savings: Seamlessly connecting a 3D component click to its real-world price arbitrage spread, diagnostic symptoms, required DIY tools, and direct retailer purchasing links. Interactive Cause-and-Effect Wear Simulation: Building a dynamic visual wear heatmap where moving a mileage slider directly alters WebGL material properties and highlights critical replacement urgency. 100% Client-Side Acoustic Diagnostics: Designing an automotive sound diagnostic engine that requires zero external audio streaming services or large media downloads—everything runs reliably and instantly offline. Polished Digital Cockpit HUD: Crafting a clean, distraction-free user interface that feels like modern automotive diagnostic software rather than a generic e-commerce storefront. What we learned We encounter issues with grabbing data that does not exist for our data collect for car parts pricing, we used free api if it is available, for example ebay's free pricing apis, or we we do light data scraping on specific parts so we don't get flagged or falsely ip banned for automation. Advanced Web Audio API & Three.js Synergy: How to synchronize WebGL rendering state with real-time audio playback, visualizer equalizers, and procedural materials. The Power of Angular Signals: Leveraging fine-grained reactivity to coordinate camera zooms, part selection, audio triggers, and mileage slider inputs without unnecessary change detection cycles. What's next for AutoParts Pulse Right now, our car parts component only covers the core parts of the car, but it doesn't track the rest of the car components with are just as important such as wheel costs and much more. If we have more time, I would love to have the dashboard polished up to not only track more prices and collect more data, but also come up with a better and more scalable automation solution to improve the user experience as a full fledged dashboard application.

Built With

• angular.js
• automotive
• chart.js
• git
• github
• javascript
• json
• node.js
• npm
• three.js
• typescript
• web-audio-api
• webgl