I had an idea for a website a couple of weeks ago. It was a very simple concept - you write a text note up to 140 characters in length, pay for it and it gets sent anonymously on an A6 sized postcard anywhere around the world. The product was simple, the implementation of the site even simpler. Using modern technologies, implementing an e-Commerce web site is almost trivial. This article will show how I managed to take my idea from a concept to a fully functional e-Commerce web site in one day.

This article will examine Note In The Mail as a case study for building a single-product e-Commerce site. I will not go into the specifics of the programming involved but will talk about all the technologies used to make it happen.


A fully functional e-Commerce site in one day sounds like a myth, but it is possible. So how do you do it? The answer is define your idea in full, then leverage the myriad of existing technologies and free resources out there. I will assume that your idea is already well defined and all you need to do is to make it happen.

Without reinventing the wheel, I was able to get running very quickly, these are the technologies I used (not all are relevant to all e-Commerce sites):

• Bootstrap
• Bootstrap Form Helpers
• Font Awesome
• PayPal PHP SDK
• GD-Text
• TwitterOAuth
• OpenClipart ClipSafari (ClipSafari appears to be a better option now)
• FreeStockTextures.com

Using the Bootstrap Jumbotron example, I was able to create the basic layout for my site. This took a few hours to get right. I did have to add some of my own CSS, but largely everything was right there out of the box. Because Bootstrap is responsive, I didn't have to think too much about making my site mobile friendly, it pretty much happens automatically.

To make the site look less boring and more appealing, I added some glyphs from Font Awesome. Font Awesome is really...awesome! It's basically a set of glyphs that can be used to represent things like your shopping cart, or the help button, or even the Twitter link on your site. It provides a wide selection of glyphs and is extremely easy to add to any site. With a few icons the site starts coming to life.

I tried to reuse as many examples from Bootstrap as possible, and where it was lacking, I turned to other sources. I hit my first limitation with the order form. I didn't want a boring HTML form that every other site uses, I wanted it to stand out. For this I turned to Bootstrap Form Helpers, which is not free, but well worth the money. The feature that I specifically used was the country list drop-down that showed graphical representations of each of the country's flags next to its name - very cool.

Once the layout was more or less complete, I went over to the Free Stock Textures site and picked out a background image for my Jumbotron. Since my site was to do with sending physical notes, I wanted something to do with paper, a simple search quickly found what I wanted. I did modify the original texture slightly to make it more of a background feature by applying some opacity to the image and combining it with a white backdrop (in GIMP) however.

Although the layout was looking good at this point, there was still something missing. I had this big white postcard right at the top of my site and it looked boring. I realised that it was missing something to associate it with the post service. With this in mind, I went over to the Open Clipart site and found the Par Avion logo (ClipSafari seems to be a better option now). Now the layout was complete.

The result...


So now I had the layout of my site done, but it wasn't functional. Now I started to convert my HTML file into a PHP script and started to add logic and input validation at the same time. There is nothing special about this process, you just need to know a bit of PHP. The only thing I did differently on this project was to have a single PHP script for the entire site that uses included template files to display the content of each 'page', instead of having separate scripts for each of the pages.

Within a few hours I had the navigation logic ironed out and tested, and input validation code completed. During that time I also added a Preview feature to the ordering process, this is where the gd-text library came in very handy. I used that library to draw the text on a blank postcard image to show what the final postcard would look like.

With the layout, navigation, logic and ordering functionality completed the last missing feature was the ability to pay for the order. This is where the PayPal PHP SDK came in. I've written a separate article about it here. It only took a couple of hours to add and test the payment facility using PayPal's Sandbox environment (meaning I didn't have to put real orders through and could test with as many simulated orders as I wanted).

Finally I was able to go from writing a note on the site to previewing what it would look like to placing and paying for the order using PayPal.


Now the site was more or less completed. I still wanted to add something cool to it though, so I thought that it would be great to have the site send a tweet every time an order came through. The tweet had to be fairly fuzzy, so I opted to just tweeting about the country the order was going to. Twitter integration is extremely simple with the TwitterOAuth library, I have a separate article about it here. It literally took minutes to add this to the site.

I spent the next couple of hours testing the site in more detail and another couple of hours cleaning up and modularising the code that drives it all. Finally I was happy with the result so I deleted all my test tweets and test orders and made the site live.

No real orders came through yet, but I've not done any advertising and don't expect the site to really go anywhere. For me, this was an exercise in taking an idea and making it happen quickly, and I think others can do the same following similar steps that I described in this article.

Good luck!

-i