Introduction

Search cars for rent with the Drover API!

Table of Contents

1. About
2. Previews
3. Demo
4. Installation
5. Tests
6. Styling
7. Improvements

About

This app is a search page prototype allowing a user to search for rental cars based on dynamic criteria sent to the Drover API.

Features

• Change any dropdown or slider search filters and see all car results fetched matching those filters
• Clearable active filters show up as a user interacts with any dropdown / sliders to indicate their current selection
• Pagination
• PCO and Consumer hire types: A user can search for both private and consumer cars
• Fully responsive layout: fits mobile, tablet and desktop widths smoothly
• Expandable search filters minimise as soon as a user reaches mobile widths

Previews

Consumer Mode Preview

The Consumer mode only lists cars for regular individual use.

PCO Mode Preview

The PCO mode lists cars for private group use, with a rolling subscription option, Uber Types and City Jurisdiction options not available in Consumer mode.

Demo

https://drover-7b33b.firebaseapp.com

Installation

For Mac OS, Linux and Windows, from your terminal:

git clone https://github.com/GavBaros/search_filter.git
cd search_filter
npm install
npm start

Tests

Only simple unit tests were done as per specifications. In-depth unit and integration tests could have been done given more time.

From your terminal:

npm run test

Styling

The Semantic UI React component library has been used for a highly scalable, ready-to-use and consistent styling across the app. Extra styling was added to make the app resemble as close as possible to the original search page.

Responsive Layout

The app is fully responsive across all devices and the breakpoints easily configurable by setting them on the Grid component in App.js.

Additional UX implementations

• A loading indicator and searching for cars text are displayed while fetching results
• Car Model is disabled unless a Car Make is actively selected
• Used react-graceful-image to lazy load images on demand
• Smooth scroll to the top of the page each time new cars are fetched
• For the PCO mode, a placeholder stock photo is provided as the url for all cars as the images provided for PCO types look generic compared to those of the Consumer stock photos

Improvements

• Redux form could have been used to facilitate certain features
• The logic which prompt clearable active filters to show up could always be improved
• react-places-autocomplete could have been used as an autocomplete feature for the location field
• Testing the redux store, reducers, action creators and connected components could have been done