LearnMore Screenshots, Code Snippets and Wireframes

Treehouse
writes on August 12, 2009

[Update]: We want to give a big shoutout to @allisterk and @paul_leibowitz who built aseatapart.com which gave us the inspiration for the app. Meant to say that in our first post 🙂

As you probably noticed, we’ve been working hard this week on a mini app called Hello. We’re trying to be as open and transparent about the process as we can, in the hope of educating, entertaining and amusing you 🙂

Here is the latest …

Development

Matt has been pushing updates to the GitHub repository and he’s moving along quite quickly but there’s a huge amount of work to be done (possibly too much) and we’re a bit worried it won’t get done in time. Here’s a quick update from him on the ASP.NET MVC code:

We are using LINQ to SQL for our ORM. Here is an example of how easy it is to use. To grab a list of sessions that have started or start within an hour’s time, and haven’t finished yet, all you have to do is:

var sessions = _repo // _repo is our DataContext
    .Sessions
    .Where(
        s => s.Start  DateTime.Now // hasn't finished
    );

Or how about inserting a set of tags pulled out of a tweet:

_repo
    .Tags
    .InsertAllOnSubmit(
        processedTweet // this is a tweet that has been 'processed'
            .Tags
            .Select(tag => new Tag
            {
                Created = DateTime.Now,
                TagName = tag,
                Username = tweet.Username
            })
    );

Easy, huh?!

We’re using a cool tool from Red Gate called SQL Compare which scripts out the structure of the database as SQL files. You can see an example in the GitHub repo.

Wireframing

I moved the wireframe for the home page from paper into Balsamiq, just to give us a more concrete idea of size and spacing.

Paper Wireframe v2


View larger

Balsamiq Wireframe v3


View larger or Download the original Balsamiq file

Design

Here is how the design is progressing for Mike

Home page header v1

Home page v2, with search results


View full size

13 Responses to “More Screenshots, Code Snippets and Wireframes”

  1. Great post! Thanks for sharing the Balsamiq file.
    I see that you use paper sketches before using Balsamiq.
    I’m the same way: for some reason software doesn’t help you think in the early stages.
    Only difference is, I don’t use paper, but whiteboards with these awesome widgets:
    http://www.MockupMagnets.com

    -Efraim

  2. Love the use of the .net platform. Obviously the focus is on the dev at present but will there be a little config and install guide for the project once it’s finished? I see Matt is developing in monodevelop on a mac so am intruiged by the database he is using etc and how he is using the redgate tools to manage the schema.

    good work

  3. Looking great, Carsonified! Already excited about giving it a go at FOWA.

  4. Looks amazing! Will you be “open-sourcing” it? Would love to play around with the code.

  5. Ryan,

    Please put up the original .bmml file from Balsamiq for your mockup. It would be real interesting to play with it inside of Balsamiq Mockups.

    Thanks,
    Shawn

  6. Hey, nice stuff. @mike. Hello layout is looking really sweet. Great work. Personally not so keen on the main nav menu hover. But the rest is very slick!

Leave a Reply

You must be logged in to post a comment.

Learn to code with Treehouse

Start your 7 day free trial today and get access to hundreds of video courses in web development, design and business!

Learn more