Introduction
A car listing platform featuring complex filtering capabilities built with custom WP API routes. This case study draws inspiration from Finsweet’s filter demo while implementing a powerful WordPress backend solution.
Pain Points Solved
- Complex Filtering: Multi-level filtering (make, model, year, price, mileage, fuel type, location)
- Real-time Search: Live search within titles and content without page reload
- URL-based Filtering: Shareable URLs with persistent filter parameters
- Performance: Optimized using WP REST API custom routes
Tech Stack
Frontend:
- Vanilla JavaScript (ES6+)
- Axios for API calls
- CSS Flexbox
- noUISlider for range inputs
- Select2 for dropdowns
WordPress Backend:
- GeneratePress Child Theme
- Advanced Custom Fields (ACF)
- Custom Post Types & Taxonomies
- WP REST API Custom Routes
- Custom meta queries & tax queries
Key Features
- Hybrid Filtering: Combine text search + taxonomy + meta field filtering
- Smooth Interactions: Price and mileage range sliders with smooth interaction
- Multiple Selection: Multi-select options for make, model, and fuel type
- Hierarchical Data: Dropdown with structured location data
- Real-time Updates: Live count updates and dynamic results
- API Pagination: Pagination handled through WP API
- URL Synchronization: Browser back/forward support with filter state
Live Demo
Available at: cars.rizwanaritonang.com
