Categories:

December 15, 2013

Hello again! Ok so in my previous post I gave a little bit of background on my current project Roost. As I mentioned then, I actually started development a while ago now, so in this post I’ll show you where I am now, how I got there, and where I intend to go next.

Design

I have essentially finished the initial design phase for Roost, but of course there is bound to be new additions and alterations along the way.

I started by wireframing all of the core sections of the site, and by doing so turned the wall behind my computer into what can only be described as a sea of paper and scribbles, or as some would call it, a big mess. All joking aside wire framing was extremely helpful to me, and I now have a clear design pattern for the majority of the site.

After completing the wireframes, I produced a few different logo ideas and colour schemes which you probably have seen by now. Once the logo was done I continued onto a number of higher fidelity Photoshop mockups that hopefully give pretty a representative idea of what the finished site will look like. This is my standard workflow for any site really, and it seems to work well for me.

Development Environment

With the design done, I was itching to get developing. I am using Laravel as the framework, and have decided to host my site with Pagoda Box. Well at least initially.

Setting up my local environment was as easy as cloning the Pagoda Box project git repository on each of my machines, running composer install and we were ready to go. Incase you are interested the main applications I have been using for the development are as follows:

Sublime Text 3 for all text editor work. With a number of great packages to aid dev speed. (Emmet, and a load of Laravel specific plugins to name a few)

Codekit to optimise images, and compile any pre-processed css.

MAMP to manage my local server.

SourceTree to handle git because I am a wimp and avoid git on terminal :p

The State Of Play

So how far have I got so far? Well its going pretty well actually! All user related bits are completely implemented, including one click Facebook sign up and log on. The site is completely responsive thanks to the brilliance of Bootstrap 3, and a number of the core sections are pretty much finished.

When users login they are greeted by the “Dashboard”. This page will hopefully give them an overview of everything that has been happening on the site relating to them. It shows any recent activity by housemates, quickly lets them know if they are owed or owe money, shows payments that have been made, chores and tasks etc etc. I would suspect that this will be the most used page on the site so it is important to get right.

It is still looking a little bare at the moment but as other parts of the site are implemented it will soon fill up. One part I am pretty pleased with is the house balances graph. It still needs a few scales and labels added to it, but it is created using just html and css and is completely responsive. The only images use here are the users’ avatars. I achieved this by going mad with :after and :before to get the background grid. The graph also animates nicely on page load.

All of the panels are collapsable as well. Not something that is hard to implement but a nice feature to have none the less.

So so far the one area of the app that is almost complete is handling expenses. I will write a separate post explaining how shared expenses are handled because there is a lot to write about. One thing I will say though is that I am really pleased with the initial form I have created for adding an expense.

I have just finished implementing the mailing system in the app. I might write a post explaining how it is all working in detail, but for now emails are being queued using iron.io push queues, and then being sent using the wonderful MailGun. I was blown away by how easy this all was to setup!

Whats Next?

Ok so I still haven’t gone much into the technical details so far, and this post turned out to be more of a background post than I expected, but next time I’ll go into more detail.

I think the next I am going to be working on better house management. By this I mean things like allowing uses to invite friends, and remove them from their house. All that sort of thing. This should be fairly trivial to implement but is obviously a basic critical important feature.

Ha thats good to hear! Obviously I’m hoping it will be useful to a lot of people as well as getting me a decent mark ;p

About Jozef Maxted

I am Jozef Maxted, a young freelance graphic and web designer, based seconds away from the beach in Camber Sands, East Sussex, UK. I am completely self taught, although I am currently studying Multimedia & Digital Systems at Sussex University, near Brighton.