The IJC Digital Blog

Posted by: Matt Mansour 3 years, 7 months ago (0 comments)

Let this be yet another a testament to rapid development frameworks and the power of Django and Mezzanine: From concept to launch, in 36.75 hours, I built a full-featured Bootstrap theme marketplace called Bootstrap ASAP.  This would amount to just under one week in a typical work week. The outline of the entire approach looked something like this:

Plan and Sketch - Creating functional specifications, wireframes, and information architecture.
Design  - Skip the PSDs. No design: Instead find a responsive theme to buy and repurpose to match the "Plan and Sketch" step.
Develop  -  Writing the actual code.
Test  - Iron out the kinks.
Launch - Going live.

I have a day job and additional clients that keep me busy so I could only work on this during early mornings and Saturdays.  I decided right away to log the hours as I was curious about how much time it would take to complete the project. 

Identify the Opportunity
I stumbled upon the opportunity while fooling around one day in Google's keyword research tool. I typed in "Bootstrap Themes" and at the time the results suggested nice search volume and low competition. That has changed a bit. In any case I saw an opportunity and I took it. I looked at the other sites out there. There were not many in the Bootstrap Theme Marketplace space at the time of my keyword research. There is one good site leading in the space. Respect. However, I knew I could build something different in a very short period of time with almost no overhead. I wanted the actual marketplace website to be responsive. Most of them are not and I feel like I am on a site from 2007. I also wanted sellers to get paid practically instantly after their transaction is cleared, instead of once a month. I believe sellers should have access to their profits soon after a sale is completed. I also wanted a Q&A forum to provide sellers with the opportunity to create their own support pages and answer buyer questions directly on the site.  

Brain-dump
First I did a brain-dump of all the features I'd like to have on a marketplace website. I did this primarly while hiking one day. I have voice-to-text conversion on my Android. I would just speak the feature into my Notes application and by the end of the hike I had a nice feature set and a nature buzz. 

Get more feature ideas from similar sites
I didn't want to only use my list of ideas. I also wanted to investigate other sites to see what I thought they were doing well.  There is certainly some talent out there.  

Brain-dump some more. Emulate some more
After a couple of hours of surfing competitor's websites, creating accounts, buying themes and seeing how they function I did another brain-dump of features.  I combined the list of their features with my own to come up with what I believe to be a nice feature set that will add value to sellers and buyers in the Bootstrap Community, and differentiate from what is currently out there.

Have a specific goal: The Minimum Viable Product
I took the feature list and narrowed them down to only those that served a single purpose: providing a marketplace that brings together buyers and sellers of responsive website themes built specifically in Twitter Bootstrap.  I removed all features that did not directly contribute to this goal. Simplifying is probably the hardest part.

Only Delegate When Required
Only utilize other people when you absolutely have to, especially if you plan on keeping overhead low.  I saw the project from start to finish before I wrote a single line of code  and knew that I could do everything on my own in terms of the product build and changes after getting feedback. 

If you're stuck on a task put it on the backburner
I had a pretty hard time coming up with a name. I owe that to my ex girlfriend. I knew that naming the website was not crucial to completing the project, so I put that task off and worked on other tasks. I actually referred to the site as "snap bootstrap" for the majority of development because I needed a temporary name and it was the first thing that came to mind. Come to think of it it's not a bad name.

Rank your features set by priority and give prominent real estate to the most important features
I listed out all the features I made from my planning stages and ranked them according to priority.  I made it so the primary features would be accessible in the most visible sections of the website, in Bootstrap ASAP's case this would be promoting that the site was focused solely on the Bootstrap Themes, the login/signup, and the “search themes feature.”

Focus hard on the wireframes
A wireframe is basically a design with no pretty stuff. There are several tools and methods for creating wireframes: prototyping software, drawing on a whiteboard, Photoshop, creately.com.  I prefer pen and paper with the occasional whiteboard.  I usually start out by drawing each page module on the page with annotated notes. I'll include all the pages relate to one another in the annotations. This to me is the hardest part. But it makes coding the project much easier.

Mix it up, keep things interesting
Switch up tasks frequently. Especially if you're stuck or just bored. You will enjoy the project more. And often the things you're stuck on come to you when you're not working. I've solved many coding problems and bugs by simply going shopping at Target.

The Design
That was easy. I lucked out. I simply found an incredible theme from a talented designer and paid $35.00 for it. My core skill set is Python, Performance Tuning and Architecture. The fact that the Theme I purchased was  built in Bootstrap made it easy for me to change it to match my Sketches.

The Code
Like many developers coding is my favorite part. I get super excited about building a rock solid foundation. And in this case I was happy to be extending the core of Django Mezzanine, a CMS that is built on a rock solid foundation yet easy to extend. Mezzanine ships with a shopping cart. However, I felt with the requirements of this project it would be faster to bang out a simple marketplace app that utilized and subclassed Mezzanine.

The Models
Mezzanine's Displayable model was the perfect to subclass. It's an abstract model that handles things like slugging titles, setting expiration dates on publishables, choosing your models to query for search. I subclassed that for many of the Models in my app. For example, the Question model in my Q&A app looks something like this:

class Question(Displayable):
    user = models.ForeignKey(User, blank=True, null=True)
    question_description = models.TextField(blank=True, null=True)
    rating = RatingField(verbose_name=_("Rating"))

    @models.permalink
    def get_absolute_url(self):
        return ('questions.views.question',
                [self.slug, ])

    def __unicode__(self):
        return self.title

The Views
A best practice in Django and Mezzanine is to have thin views and fat models. I strived for this as often as I could remember. Though some views did get a little crazy and are still in process of being refactored. Here is the view that handles a user submitting a question:

@login_required
def question_ask(request):
    form = QuestionForm(auto_id=True)
    if request.method == "POST":
        form = QuestionForm(request.POST, request.FILES, auto_id=True)
        if form.is_valid():
            question = Question(
                title=form.cleaned_data['submitted_question_title'],
                question_description=form.cleaned_data['submitted_question_description'],
                # keywords=form.cleaned_data['tags'],
                user=request.user
            )
            question.save()
            return HttpResponseRedirect(reverse('questions.views.question', args=[question.slug]))
    return render_to_response('questions/question_ask.html',
                              {'form': form, },
                              context_instance=RequestContext(request))

There is a big movement in the Django community to use Class Based Views (CBVs) instead of Function Based Views.  I can see the value in them. However, I simply went with what I knew I could implement fastest. And this view is not going to be subclassed, which is one of the many benefits of CBVs


Set little goals
The best tactic I found for motivation was to set a very small goal, such as changing some fields to a Django model. Once this small goal was completed it always lead into other things and I'd find a good stopping point a few hours later.

Get Up Early
As developers we often have the luxury of showing up at work somewhere between 10pm and 11pmI decided to wake up somewhere between 6 and 7am and put in two hours a morning into the Marketplace, and work an additional 8 hours on Saturday. I take Sunday completely off most weeks. That is basically an additional 20 Hours per week outside of my day job and still kept my evenings free. The saying "The early bird gets the worm" has always made me cringe as a sleep lover; until I made a commitment to wake up early and experience the power of it. Once the habit kicked in there was no turning back, it's too powerful.

Utilize rapid-development frameworks
I built Bootstrap ASAP  using Django and Mezzanine. Mezzanine ships with Bootstrap, so adding a new theme was easy. Frameworks typically take all the repetitive tasks out of web development such as CRUD (create/read/update/delete), forms validation, and data sanitization and instead let you focus on making a killer website.

It's done
I'm happy with how Bootstrap ASAP has turned out.  The design looks good, the code is clean, and it works well.  It's still in the feedback stages and will change as I receive feedback. In theory it will never be done. But the Mininum Viable Product was put out there fast. The best part; if it flops I only lost 36.75 hours of my life.

Current rating: 4.7

Comments