expenseItem.cmp

<aura:component>

    <aura:attribute name="expense" type="Expense__c"/>

    <p>Amount:
        <ui:outputCurrency value="{!v.expense.Amount__c}"/>
    </p>
    <p>Client:
        <ui:outputText value="{!v.expense.Client__c}"/>
    </p>
    <p>Date:
        <ui:outputDate value="{!v.expense.Date__c}"/>
    </p>
    <p>Reimbursed?:
        <ui:outputCheckbox value="{!v.expense.Reimbursed__c}"/>
    </p>

</aura:component>

expenseList.cmp

<aura:component>

    <aura:attribute name="expenses" type="Expense__c[]"/>

    <div class="slds-card slds-p-top--medium">
        <header class="slds-card__header">
            <h3 class="slds-text-heading--small">Expenses</h3>
        </header>
        
        <section class="slds-card__body">
            <div id="list" class="row">
                <aura:iteration items="{!v.expenses}" var="expense">
                    <c:expenseItem expense="{!expense}"/>
                </aura:iteration>
            </div>
        </section>
    </div>

</aura:component>

expenses.cmp

<aura:component>
    <!-- aura:attribute -->
    <aura:attribute name="newExpense" type="Expense__c"
     default="{ 'sobjectType': 'Expense__c',
                    'Name': '',
                    'Amount__c': 0,
                    'Client__c': '',
                    'Date__c': '',
                    'Reimbursed__c': false }"/>
    <aura:attribute name="expenses" type="Expense__c[]"/>

    <!-- PAGE HEADER -->
    <div class="slds-page-header" role="banner">
        <div class="slds-grid">
            <div class="slds-col">
                <p class="slds-text-heading--label">Expenses</p>
                <h1 class="slds-text-heading--medium">My Expenses</h1>
            </div>
        </div>
    </div>
    <!-- / PAGE HEADER -->

    <!-- NEW EXPENSE FORM -->
    <div class="slds-col slds-col--padded slds-p-top--large">
        <div aria-labelledby="newexpenseform">
            <!-- BOXED AREA -->
            <fieldset class="slds-box slds-theme--default slds-container--small">
                <legend id="newexpenseform" class="slds-text-heading--small slds-p-vertical--medium">
                    Add Expense
                </legend>
                <!-- CREATE NEW EXPENSE FORM -->
                <form class="slds-form--stacked">
                    <div class="slds-form-element slds-is-required">
                        <div class="slds-form-element__control">
                            <ui:inputText aura:id="expname" label="Expense Name"
                                class="slds-input"
                                labelClass="slds-form-element__label"
                                value="{!v.newExpense.Name}"
                                required="true"/>
                            </div>
                        </div>
                        <div class="slds-form-element slds-is-required">
                            <div class="slds-form-element__control">
                                <ui:inputNumber aura:id="amount" label="Amount"
                                    class="slds-input"
                                    labelClass="slds-form-element__label"
                                    value="{!v.newExpense.Amount__c}"
                                    required="true"/>
                            </div>
                        </div>
                        <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                <ui:inputText aura:id="client" label="Client"
                                    class="slds-input"
                                    labelClass="slds-form-element__label"
                                    value="{!v.newExpense.Client__c}"
                                    placeholder="ABC Co."/>
                            </div>
                        </div>
                        <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                <ui:inputDate aura:id="expdate" label="Expense Date"
                                    class="slds-input"
                                    labelClass="slds-form-element__label"
                                    value="{!v.newExpense.Date__c}"
                                    displayDatePicker="true"/>
                            </div>
                        </div>
                        <div class="slds-form-element">
                            <ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?"
                                class="slds-checkbox"
                                labelClass="slds-form-element__label"
                                value="{!v.newExpense.Reimbursed__c}"/>
                        </div>
                        <div class="slds-form-element">
                            <ui:button label="Create Expense"
                                class="slds-button slds-button--brand"
                                press="{!c.clickCreateExpense}"/>
                    </div>
                </form>
                <!-- / CREATE NEW EXPENSE FORM -->
            </fieldset>
            <!-- / BOXED AREA -->
        </div>
        <!-- / CREATE NEW EXPENSE -->
    </div>
    <!-- / NEW EXPENSE FORM -->
    <div class="slds-m-top--small">
        <c:expensesList expenses="{!v.expenses}"/>
    </div>
</aura:component>

expensesApp.app

<aura:application>
    <!-- Include the SLDS static resource (adjust to match package version) -->
    <ltng:require styles="{!$Resource.SLDS201 + '/assets/styles/salesforce-lightning-design-system.css'}"/>
    <!-- Add the "scoping" element to activate SLDS on components
         that we add inside it. -->
    <div class="slds">
        <!-- This component is the real "app" -->
        <c:expenses/>
    </div>
    <!-- / SLDS SCOPING DIV -->
</aura:application>

expensesController.js

({
    clickCreateExpense: function(component, event, helper) {

        // Simplistic error checking
        var validExpense = true;

        // Name must not be blank
        var nameField = component.find("expname");
        var expname = nameField.get("v.value");
        if ($A.util.isEmpty(expname)){
            validExpense = false;
            nameField.set("v.errors", [{message:"Expense name can't be blank."}]);
        }
        else {
            nameField.set("v.errors", null);
        }

        // ... hint: more error checking here ...

        // If we pass error checking, do some real work
        if(validExpense){
            // Create the new expense
            var newExpense = component.get("v.newExpense");
            console.log("Create expense: " + JSON.stringify(newExpense));
            helper.createExpense(component, newExpense);
        }
    }
})

expensesHellper.js

({
    createExpense: function(component, expense) {
        var theExpenses = component.get("v.expenses");
 
        // Copy the expense to a new object
        // THIS IS A DISGUSTING, TEMPORARY HACK
        var newExpense = JSON.parse(JSON.stringify(expense));
 
        theExpenses.push(newExpense);
        component.set("v.expenses", theExpenses);
    }
})