Single-page React application: a virtual car showroom with a vehicle catalog from a public API (the vehicle category), a vehicle details page, API reviews, and user comments stored in localStorage.
In the repository About section on GitHub, add this link and a short project description.
- Home (
/) — catalog from the API with filters stored in the URL (search,brand,tag,priceMin,priceMax) so links are shareable and survive refresh. Clear filters resets all filter keys at once. - Search — text match on model title and description (not brand). The search field uses a ~300 ms debounce before updating the URL and re-filtering, so large lists stay responsive while typing.
- Brand and Tag — dropdown filters; tag options are derived from product tags (generic
vehicle/vehicleslabels are hidden in the UI). Tag filter uses exact tag match, separate from free-text search. - Price — min and max in USD on effective price (after discount). If
min > max, the range is ignored for filtering and the UI shows a validation message. - List cards — thumbnail, brand, title, tags (same display rules as details), and price with optional discount.
- Vehicle page (
/vehicles/:vehicleId) — extended info, gallery, tags, delivery/return details; API reviews plus localStorage reviews merged for listing and average rating (fractional stars on the summary). - Reviews — form with validation, async submit UX, success feedback;
- 404 —
/404route and fallback redirect for unknown paths.
- React + TypeScript + Vite
- React Router
- TanStack React Query
- Axios
- CSS Modules
- react-helmet-async
- Prettier
npm install
npm run devThe app opens at the URL shown in the terminal (usually http://localhost:5173/).
npm run dev— dev servernpm run build— type check + production buildnpm run lint— ESLintnpm run format— Prettier formattingnpm run format:check— formatting checknpm run preview— preview production build locally
Catalog: GET /products/category/vehicle
Single product: GET /products/{id}