Hi Friends, 
my code has passed the step 4 check


--------------------------------------------------------------------
BoatSearch.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
<lightning:card title="Find a Boat" class="slds-m-top_10px" >
     <c:BoatSearchForm />
</lightning:card>    
<lightning:card title="Matching Boats" >
     <c:BoatSearchResults /> 
</lightning:card>
<aura:handler name="formsubmit"
                  event="c:FormSubmit"
                  action="{!c.onFormSubmit}"
                  phase="capture"/>

</aura:component>
--------------------------------------------------------------------

BoatSearchResults.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" 
                access="global" controller="BoatSearchResults">
    <aura:handler name="init" action="{!c.doSearch}" value="{!this}"/>
    <aura:attribute name="boatTypeId" type="String" />
    <aura:attribute name="boats" type="Boat__c[]" />  
    <!--<aura:method name="search" description="Sample method with parameter">
        <aura:attribute name="boatTypeId" type="String"  />
    </aura:method>-->
    <!-- set up the aura:method for search -->
    <aura:method name="search" description="accepts boatTypeId
            and executes search that refreshes the boats attribute">
        <aura:attribute name="boatTypeId" type="Id"/>
    </aura:method>
    <!-- Display errors, if any -->
    <!--
    <aura:if isTrue="{!not(empty(v.errorString))}">
        <div class="recordError">
            <ui:message title="Error" severity="error" closable="true">
                {!v.errorString}
            </ui:message>
        </div>
    </aura:if>-->
    <aura:if isTrue="{!not(empty(v.boats))}">
        <lightning:layout multipleRows="true" horizontalAlign="center">
                <aura:iteration items="{!v.boats}" var="boatVar">
                    <lightning:layoutItem flexibility="grow"  class="slds-m-right_small" >   
                        <c:BoatTile boat="{!boatVar}"/>
                    </lightning:layoutItem>
                </aura:iteration>
        </lightning:layout>
         <aura:set attribute="else">
            <div class="slds-align_absolute-center">No boats found</div>
        </aura:set>
    </aura:if>
</aura:component>
----------------------------------------------------------------
BoatSearchForm.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="BoatSearchFormController" >
    <aura:handler name="formsubmit"
                  event="c:FormSubmit"
                  action="{!c.onFormSubmit}"
                  phase="capture"/>
    
    <aura:attribute name="searchOptions" type='String[]' default='All'/>
    <aura:attribute name='searchOptionToIdMap' type='Map' default="{All:''}" />
    <aura:attribute name='showNewButton' type='Boolean' default='false'/>

        
    <lightning:layout horizontalAlign="center"   >

       <lightning:layoutItem class="slds-grid_vertical-align-center" >

           <lightning:select aura:id='typeSelect' name='selectItem' label='' onchange=''>
             <aura:iteration items='{!v.searchOptions}' var='option'>
                 <option value='{!option}' text='{!option}'></option>
             </aura:iteration>
         </lightning:select>
       </lightning:layoutItem>

       <lightning:layoutItem class="slds-grid_vertical-align-center" >
         <lightning:button label="Search" variant="brand" onclick='{!c.onFormSubmit}' />
         <aura:if isTrue='{!v.showNewButton}'>
            <lightning:button variant='neutral' label='New' onclick='{!c.createBoat}'/>
        </aura:if>
       </lightning:layoutItem>

    </lightning:layout>

</aura:component>
-------------------------------------------------------------------------------

BoatSearchFormController.js

({    createBoat: function (component,event,helper) {
        var createRecordEvent = $A.get('e.force:createRecord');
        if (createRecordEvent) {
            var typeName = component.find('typeSelect').get('v.value');
            var typeMap = component.get('v.searchOptionToIdMap');
            var typeId = null;
            if (typeName && typeMap && typeMap[typeName]) {
                typeId = typeMap[typeName];
            }
            createRecordEvent.setParams({
                'entityApiName': 'Boat__c',
                'defaultFieldValues': {
                    'BoatType__c': typeId
                }
            });
            createRecordEvent.fire();
        }
    },
    
    onFormSubmit : function(component, event, helper){
        var boatTypeId = component.get("v.selectedType");
        console.log("Search button pressed " + boatTypeId);
        var formSubmit = component.getEvent("FormSubmit");
        formSubmit.setParams({"formData":
                            {"boatTypeId" : boatTypeId}
        });
        formSubmit.fire();
    },   
})
--------------------------------------------------------------
 BoatSearchResults.apxc

public with sharing class BoatSearchResults  {
    @AuraEnabled
     public static List <Boat__c> getBoats(String boatTypeId) {
      if(boatTypeId != '')  {
             return [SELECT id, BoatType__c, picture__c, name,contact__r.Name
                    FROM Boat__c
                    WHERE BoatType__c =:boatTypeId];
      } else {
          return [SELECT id, BoatType__c, picture__c, name,contact__r.Name
                    FROM Boat__c];
      }
         }
         }
------------------------------------------------------------
BoatSearchResultsHelper.js

({
    onSearch : function(component) {
        var action = component.get("c.getBoats");
        action.setParam({"boatTypeId":""});
        action.setCallback(this, function(response){
        var status = response.getState();
            if(status === "SUCCESS"){
             if(! $A.util.isEmpty(response.getReturnValue())){
                    component.set("v.boatTypeId",response.getReturnValue()); 
                } else {
                     component.set("v.recordError","No boats found");
                }
            }
        });
        $A.enqueueAction(action);
    }
})
-----------------------------------------------------------------
 FormSubmit.evt

<aura:event type="COMPONENT" description="Boat Event">
    <aura:attribute name="formData" type="Object"/>
    
</aura:event>
-------------------------------------------------------------------------
BoatSearchController.js

({
    onFormSubmit : function(component, event, helper){
        console.log("event received by BoatSearchController.js");
        var formData = event.getParam("formData");
        var boatTypeId = formData.boatTypeId;
        var BSRcmp = component.find("BSRcmp");
        var auraMethodResult = BSRcmp.search(boatTypeId);
        console.log("auraMethodResult: " + auraMethodResult);
    }
})
---------------------------------------------------------------------------
BoatTile.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
 <aura:attribute name="boat" type="Boat__c" />
    <aura:attribute name="selected" type="String" />
 <lightning:button class="tile">
        <div style="{!'background-image:url(\'' + v.boat.Picture__c + '\'); '}" class="innertile">
          <div class="lower-third">
           <h1 class="slds-truncate">{!v.boat.Contact__r.Name}</h1>
          </div>
        </div>
    </lightning:button>
 </aura:component>
--------------------------------------------------------------------------------
Any help much appreciated. I would love to hear some new tips and new techniques with this task. If you share some source code that would greately appreciated. 

Thank you