Tuesday, April 30, 2013

Grand Opening: CabralRunningAcademy.com


Donn Cabral's Olympic run this past summer was nothing short of awe-inspiring, so you can imagine how flattered I was when he contacted me to design a website for his first entrepreneurial venture as a professional athlete. Being an entrepreneur myself and a close friend, I jumped at the opportunity to help him out. The story of Cabral Running Academy itself is yet to be written, but I'm just finishing the first chapter in the story of CabralRunningAcademy.com. This is going to be a technical deep-dive into the site's technologies and architecture which will delight a certain type of reader and send most others running for the hills. I'm alright with that.

We only roughly sketched the requirements for the site before embarking--partially because I had a pretty good preexisting idea of what the site needed to do and partially because Donn and I are good friends and weren't worried about communication. Cabral Running Academy is to be a series of camps conducted by Donn and his coach Peter Oviatt. The website fulfills both a marketing and an administrative role within this pursuit. The site facilitates campers learning about and enrolling in the camps. It accepts credit card payments (with coupon discounts) and tracks camper registrations. The site includes information about each camp specifically and about the organization more broadly. Easy editing of pages by a non-technical user was also an important requirement.

I'll start and the foundation and progress upwards. The site is built using Ruby on Rails, an extremely popular web application framework. Ruby on Rails is powerful in that it allows developers to move quickly when they are performing standard tasks, but also gives them "sharp" enough tools when they need to do something specific. I could have built the site using any number of higher level tools--WordPress and drag-and-drop website builders like Weebly would have been good candidates (just because the requirements of the site weren't all that advanced). These tools probably would have gotten me 0 to 60 faster (especially with respect to editing pages), but they never would have allowed me to reach 100. Donn deserves 100.

The site needed an admin interface where Donn could see all of his registrations, edit pages, create new camps, and manage coupons. I've used a gem called ActiveAdmin in the past and found it user friendly, powerful, and easy on the eyes. Using ActiveAdmin on this project was not a difficult decision.

Many options exist for credit card processing. PayPal, Braintree, Chargify, and others have to be considered. However, I have my own darling that is still coming on the scene--a service called Stripe. Stripe is such a pleasure to work with it's almost criminal. Their APIs are the type of work that you look at and say, "Yeah, obviously that's the way it should be." Working with a product like that is, not to be too melodramatic, inspiring.

I don't claim to be a web design guru. For folks like me, I highly recommend the CSS framework Twitter Bootstrap. Bootstrap allows relatively inexperienced or untalented designers (I'll let you decide which one I consider myself) to reach a high level of design quality with minimal effort. Again, this was not a hard choice for this project.

All of these choices are fairly standard. Other standard choices made along the way were namecheap.com for domain registry, Google apps for email, Google analytics for tracking, Heroku for web app hosting, Amazon S3 for content hosting, and jQuery for javascript. The fun part comes in a few "flourishes" I added just for fun.

Perhaps the hardest requirement to really nail with the toolkit described above is the easy editing of pages. What I really needed was a content management system (CMS). This is where systems like WordPress excel. I should mention that there are libraries available for Rails that allow for CMS functionality. Most that I saw were very heavy duty and I couldn't find one that I liked. Call it hubris, but I decided that I could craft a tailored solution that would better meet Donn's needs without polluting the user interface with unnecessary functionality.

Using the same admin interface for the backend, I created a custom page editor based on the Markdown language. Markdown is specifically designed for non-technical users to produce clean web pages. Pagedown.js is a Markdown implementation in javascript. This allowed me to create a live preview of the custom page. Live previews allow for more precise and faster editing due to increased feedback. Plus, I wanted to write a live preview for kicks.

Images clearly needed to be part of the custom editing functionality. However, storing images on the web application host was not an option due to Heroku's ephemeral file system. Amazon S3 seemed like a logical choice for content hosting.

CabralRunningAcademy.com provided a lot of opportunities. The opportunity to help out a friend and fellow entrepreneur. The opportunity to try out some new technologies. And the opportunity to create something useful of which I can be proud. I think I've successfully created a pretty good out-of-the-box registration, administration, and CMS app, and I had fun doing it. Thanks, Donny!