Fleet Explorer

Fleet Explorer is a React + TypeScript app for browsing vehicles by ZIP code with fast filtering and sorting. On first load, it prompts for a ZIP to avoid a misleading "no results" state, then shows filters on the left and matching vehicles on the right.

Live demo: fleet-explorer-five.vercel.app

---

Features

• ZIP-first flow — enter a ZIP code to load inventory scoped to that area.
• Filters by make and color, with counts that update based on current selections.
• Sorting (e.g., by price) with results shown in a responsive grid.
• Clear UX — ZIP first, then filters and results, so the empty state never misleads.

---

Architecture

Client

• React + TypeScript.
• Vite for the dev server and production build.
• Plain CSS — no CSS-in-JS dependency.

Data Flow

• Inventory state is managed by the useInventoryState hook in src/hooks.
• RenderIfVisible lazily renders grid items; IntersectionObserver is mocked in tests so lazy-rendered components stay testable in JSDOM.

Project Structure

• src/
  • components/
    • EmptyState/, ErrorBanner/, Filters/, Image/
    • RenderIfVisible
    • SortBar/, VehicleCard/, VehicleGrid/, ZipSearch/
  • hooks/
    • useInventoryState.tsx
  • mockData/
  • pages/
  • templates/
    • InventoryTemplate/
  • test/
    • setup.ts
  • utils.ts
• public/
• index.html

---

How to Run

Prerequisites

• Node 18+ and npm 9+

Installation

1. Clone the repository:

   git clone https://github.com/ishantagarwal00/fleet-explorer.git
   cd fleet-explorer

2. Install dependencies:

   npm install

Usage

• Start the dev server:

  npm run dev

• Open the printed local URL in a browser.

• Build and preview the production bundle:

  npm run build
  npm run preview

Scripts

• npm run dev — dev server with hot reload
• npm run build — production build
• npm run preview — preview the production build locally
• npm test — run unit tests once (CI-friendly)
• npm run test:watch — run tests in watch mode
• npm run test:ui — run tests with an interactive UI (if enabled)
• npm run lint — run linter
• npm run typecheck — TypeScript type checking (no emit)

---

Testing

• Test runner: Vitest with globals enabled and the JSDOM environment.
• React Testing Library for DOM queries and user interactions.
• The setup file extends assertions (jest-dom) and provides lightweight browser API shims where needed.

---

Notes

• Inventory data comes from bundled mock data (src/mockData) — there's no backend or live API yet.
• Tests should avoid console output; any stray logs should be removed.