Before going into the code part I want to show you how the Car Hub project will look like so that you will have a picture in your mind.

This is a single page project and we are using lightning message channel to share the information from one component to another.
Filter Component: This component allows users to search for cars based on various criteria. Users can filter cars by name, select a price range, and choose specific categories or makes. Any selections made in the filter component will instantly update the “Cars Available” component, displaying the results that match the chosen filters.
Cars List Component: This component displays all the cars available in the Cars object, reflecting the current selection criteria applied in the Filter Component.
Car Details Component: When you select a car from the Cars List component, the details of the selected car will be displayed in the Car Details component.
These are the main components present on the record page, but the project also includes other child components that contribute to the overall functionality.
For example, the “Available Cars” component is built using individual “Car Tile” components.
In the next blog post, we’ll dive into how the carTile
component and the carTileList
component were created.