AggieX — Startup Challenge, Thewconverts LLC

A new frontend for Threwconverts LLC that maximizes customer retention and gives all the info that a potential customer would need.

Comment

Inspiration

Single-cab and base-model trucks are rarely offered in higher trim levels from the factory. For truck enthusiasts, blue-collar workers, and business owners, this leaves very limited options for personalization and premium features. The founders of Thewconverts recognized this problem and set out to provide genuine OEM upgrades and factory-style conversion kits, allowing owners to add high-end styling directly to their existing vehicles. We were inspired by their mission and partnered with them to build a high-performance frontend landing page that brings their brand to life.

What it does

We developed the digital storefront and educational hub for Thewconverts, a startup that sources and sells genuine OEM truck parts. Our project focused on creating a high-conversion, premium e-commerce frontend designed specifically for automotive enthusiasts.

The frontend platform features:

  • A "Dark Mode First" Aesthetic: A sleek, industrial palette (Black, White, Grey with an Electric Blue accent) designed to appeal directly to their target demographic.
  • Educational "How It Works" Flow: A 6-step visual guide breaking down complex vehicle conversions into a simple, confidence-building process.
  • Dynamic Product Showcase: A fully responsive shop filtering system that categorizes front-end swaps, interior conversions, and OEM emblems.
  • Live Customer Gallery Integration: A dedicated UI space for showcasing real-world transformations (ready for direct Instagram widget integration).
  • Lead Generation Interface: Seamless contact and quote forms designed to capture custom build requests from users verifying fitment for their specific VINs.

How we built it

We prioritized speed, performance, and a completely custom aesthetic by building the site without heavy, bloated UI frameworks.

  • Frontend: HTML5 and Vanilla JavaScript (ES Modules).
  • Styling: A completely custom, robust CSS Design System utilizing CSS Variables (Custom Properties) for typography, spacing, and the dark-mode color palette. Features like CSS Grid and Flexbox were heavily utilized for responsiveness.
  • Build Tooling: We leveraged Vite for a blazingly fast development server, rapid hot-module-replacement (HMR), and optimized production bundling.
  • Interactivity: We utilized the native IntersectionObserver API to create smooth, scroll-triggered reveal animations that give the site a highly polished, premium feel.

Challenges we ran into

  • Flash of Unstyled Content (FOUC): Initially, importing CSS dynamically through JavaScript via Vite caused a momentary flash of raw HTML before the styles loaded. We re-architected the build slightly to link the compiled CSS natively in the document <head>, completely eliminating the lag and ensuring a perfectly smooth initial render.
  • Responsive Fluidity: Ensuring that a highly visual, heavy-image site looked equally stunning on a 4K desktop monitor and a mobile phone required meticulous media queries and fluid grid layouts.

Accomplishments that we're proud of

  • The Vibe: We successfully captured the startup's "Professional, Bold, Minimal, Innovative, Premium" brand guidelines perfectly. The site genuinely looks like a high-end automotive modifier's digital home.
  • Zero Dependencies: Achieving complex scroll animations, sticky glassmorphism navigation, and category filtering using 100% Vanilla JavaScript, keeping the frontend incredibly lightweight and lightning-fast.

What we learned

We learned a massive amount about creating strict, scalable design systems purely in CSS and translating another company's vision into a polished digital experience. We also deepened our understanding of Vite's module bundling, specifically how varying project structures affect the production pipeline and asset loading.

What's next for Thewconverts

While we have handed off the frontend experience, the next steps for the startup's platform include:

  • Backend Integration: Wiring up the contact forms to a serverless backend (like Formspree or Netlify Forms) to route quote requests directly to the sales team.
  • E-Commerce Checkout: Integrating a payment gateway (like Stripe or Shopify Lite) to allow customers to purchase plug-and-play harnesses and OEM parts directly from the Shop page.
  • Live Social Feed: Activating the Elfsight Instagram widget to dynamically pull in the latest customer builds from @thewconvert in real-time.

Built With

Share this project:

Updates