Step 1 is to create several example palettes that include a name, an image, and a few other properties. These are stored in a fake database tool called Mirage. The data for each of these palettes are loaded and displayed using a component called palette-frame.
Next we add a click handler action to each image. The action toggles an 'isWide' class on the image and enlarges the image based on our styles. We also add a helper to categorize the mood of our palettes. Here, we give the helper the mood listed on the palette and match it against a list of 'light' or 'dark' moods, and display them.
After that we create a filter component to control which palettes get displayed. We first create an input, and on every keypress we use its value to make a call to our Mirage database. We then tell Mirage to take that value and filter it against our list of palettes.
You might be asking yourself, 'Gee, do palettes really need a map service?' and the answer is YES! Here we integrate the Google Maps api as a utility, and access it using a new location-map component. The new component takes the 'city' property of a palette and passes it to a map service we create. The api returns a map with our city pinned.
The next step is to create a nested route for our palettes. To make this happen, we move our default palettes route into its nested 'index', then create a 'show' route for displaying further details. To build what it looks like, we take the ID from one of the palettes and find it in our Mirage database. The show route template can then show additional details from the palette.
Lastly, we add some links to the index route to call the show route using the ID of the palette you click on.