Credit: RhondaK

vrbtm.co development stream | Week XI

Redesign and route restructuring

Not sure what this is, start here with our README, or catch up on the last stream, vrbtm.co development stream | Week X.

We hit our November target last week as per our plan. Next up is the December release. The theme of the December release is the dashboard and hierarchies. As in, user accounts, different roles and privileges per user, etc. Wes has a solidified design that we need to implement sooner rather than later. So, that’s going to be part of this release as well.

As a side-note, I’ve finally cawped an external monitor, desk and desk chair on Black Friday (¡Viva el Capitalismo!). Hopefully that’ll make my sessions a little more productive at home.

This week is all about restructuring our routes and pages, as well as implementing the new design. I went through Wes’s PSDs and compiled a list of sub-tasks:

• Redesign header
• Redesign footer
• Place marketing page (that’s currently non-existent) on index (/) route
• Redesign pricing page, rename route from /pricing to /plans
• Rename the /upgrade page to /confirmation and redesign it
• Place index page on /compose route and redesign it
• Create a login page and route

Just confirmed with Wes that we’re keeping the terms & conditions, privacy and contact pages as-is.

Starting off with the header and footer redesign. The footer needs some restructuring, but it’s straightforward with some basic flexbox work. All borders are removed from both header and footer and some padding is added. I’m not going to code the stateful header right now since it depends on authenticated users.

The marketing page was straightforward. As was the plans page. And the confirmation page. The compose page too. So was the login page. It’s all menial front-end styling and structuring.

Some things that I didn’t implement:

• Toggle mechanism between monthly and annual plan pricing
• Stateful header for both structure and style
• Consistent mobile styling

I’ll implement the first point when I get around to payment processing. The stateful header functionality needs to come through after I implement Redux or some other Flux-like library. Making the mobile styling more consistent will come through at a later time.

I’ve come across a couple React component libraries. Mainly Blueprint and Ant Design. Talked to Wes about it and we’re going to switch over our components to Ant Design’s library. It just makes so much sense to use something like this. It’ll increase the polish and functionality of the whole build with very little effort. It’ll also serve as a reference for when we implement our own (professional done) visual language.

Timing was 7h 4m.

Next week:

• Start using Ant Design’s React component library (with mild theming)
• Implement Redux
• Stateful header updates
• User account functionality setup

Read the other half of this week with Wes’ VRBTM Explain The Problem First | Week XI where he reminds us the problem we’re trying to solve.

We’d love to hear from you…
Get in touch at Founders@vrbtm.co, talk with us on twitter @vrbtm.co, and read our story on medium.

Wes Jones is on Twitter @WesJonesCo
Nick Dandakis is on Twitter @Dandakis

Join our email list for Beta access.