14 minute reading time; ~2600 words<\/p>\n\n\n\n
Welcome and hello!<\/p>\n\n\n\n
Today, we’re going to create a template list page!<\/p>\n\n\n\n
Along the way, I’m going to show how we break down this more complex card, interpreting the wireframe into pieces of work, and how we get from start to finish. We’ll also explore how to efficiently style our page, and get to an end product that will let our stakeholders start to see the shape of the feature we’re building.<\/p>\n\n\n\n
If you haven’t read the previous posts, I’d suggest you start at An App From Scratch: Part 1 \u2013 What To Build<\/a>. You can also find all the related documents and code here: Building Tailgunner<\/a>.<\/p>\n\n\n\n Today’s card seems simple at first glance, but the details link to a mockup, which suggests there’s more work expected.<\/p>\n\n\n\n Card<\/strong>: US1-C2<\/p>\n\n\n\n Create template list page<\/p>\n<\/div>\n\n\n\n Story<\/p>\n<\/div>\n<\/div>\n\n\n\n As a business owner, I want a page that will list all templates I own, so that I can manage and work with them.<\/p>\n\n\n\n Acceptance Criteria<\/strong><\/p>\n\n\n\n Details<\/strong><\/p>\n\n\n\n Let’s break it down into tasks.<\/p>\n\n\n\n First thing’s first, we need a route to let us access the template list page. There are two methods to do this. Method 1 means you will have to explicitly specify every single route setup that you want, but it’s more flexible for uncommon routes, while Method 2 is a more elegant way for the most common REST access methods<\/a>.<\/p>\n\n\n\nWhat Do I See?<\/h2>\n\n\n\n
Title<\/h4>\n\n\n\n
Type<\/h4>\n\n\n\n
Description<\/h4>\n\n\n\n
\n
\n
What I Need To Do<\/h3>\n\n\n\n
\n
\n
\n
Putting It Into Action<\/h2>\n\n\n\n
Create a new route to show our template list<\/h4>\n\n\n\n